D3-MULTILINE-CHART

D3 multiline chart rendering for reusability purpOse.

Quick Preview

Installation

  npm install d3-multiline-chart

Dependencies

  npm install d3

Options/Config

Following options are available:

| Name | Type | Description | | --------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | data | data: [{"x_val": 4,"score_love": 12,"score_like": 47}] | Data for multiline chart | | margin | Object { top: 5, right: 20, bottom: 15, left: 26 } | Specify margin | | colNamesMapping | Object {'score_love': '#172D83', 'score_like': '#3D76DA', "score_laughter": '#60C1E8'} | column name mappings for rendering multiple lines and color fill of lines and dots based on diff col names. | | width | String | Width for SVG | | height | String | height for SVG |

Usage/Examples

HTML

<div id="multilineSecbySecChart" class=""></div>

JS

const config = {
  width: 491,
  height: 304,
  paddingTop: 25,
  paddingBottom: 113,
  paddingLeft: 42,
  paddingRight: 26,
  leftTransVal: 20,
  colNamesMapping: {
    score_love: "#172D83",
    score_like: "#3D76DA",
    score_laughter: "#60C1E8",
    score_surprise: "#D18641",
    score_confusion: "#EE9C1F",
    score_sad: "#DEBC11",
    score_dislike: "#92C649",
    score_angry: "#E72E94",
    score_grand_total: "#7E57E5",
  },
  data: [
    {
      x_val: 4,
      score_love: 12,
      score_like: 47,
      score_laughter: 47,
      score_surprise: 37,
      score_confusion: 12,
      score_sad: 27,
      score_dislike: 27,
      score_angry: 37,
      score_grand_total: 80,
    },
    {
      x_val: 8,
      score_love: 64,
      score_like: 36,
      score_laughter: 27,
      score_surprise: 17,
      score_confusion: 32,
      score_sad: 17,
      score_dislike: 17,
      score_angry: 17,
      score_grand_total: 90,
    },
    {
      x_val: 12,
      score_love: 64,
      score_like: 41,
      score_laughter: 17,
      score_surprise: 27,
      score_confusion: 32,
      score_sad: 37,
      score_dislike: 47,
      score_angry: 57,
      score_grand_total: 99,
    },
    {
      x_val: 15,
      score_love: 63,
      score_like: 23,
      score_laughter: 37,
      score_surprise: 37,
      score_confusion: 52,
      score_sad: 17,
      score_dislike: 22,
      score_angry: 27,
      score_grand_total: 88,
    },
    {
      x_val: 16,
      score_love: 71,
      score_like: 30,
      score_laughter: 17,
      score_surprise: 44,
      score_confusion: 22,
      score_sad: 37,
      score_dislike: 27,
      score_angry: 11,
      score_grand_total: 79,
    },
    {
      x_val: 32,
      score_love: 64,
      score_like: 56,
      score_laughter: 77,
      score_surprise: 47,
      score_confusion: 52,
      score_sad: 37,
      score_dislike: 33,
      score_angry: 16,
      score_grand_total: 68,
    },
  ],
};
renderMultilineSecbySecChart("#gramexMultilineChart", config);