How do i plot multiple lines in the same line graph using the D3 framework?

Question

<!DOCTYPE html>
<meta charset="utf-8">
  <head>
    <title>Simple Line Graph using SVG and d3.js</title>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <style>
      /* tell the SVG path to be a thin blue line without any area fill */
      svg {
        border: 1px solid red;
      }

      .text-anchor{
      font-size: 15px;
      }

      path {
        stroke: steelblue;
        stroke-width: 1;
        fill: none;
      }

      .axis {
        shape-rendering: crispEdges;
      }

      .x.axis line {
        stroke: lightgrey;
      }

      .x.axis .minor {
        stroke-opacity: .5;
      }

      .x.axis path {
        display: none;
      }

      .y.axis line, .y.axis path {
        fill: none;
        stroke: #000;
      }
    </style>
  </head>
  <body>


  <div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>


  <script>
    /* implementation heavily influenced by http://bl.ocks.org/1166403 */

    //var json=[{"created_at":1385481173,"ranking":[["#OBAMA",88],["#TCOT",82]]},{"created_at":1385481233,"ranking":[["#OBAMA",86],["#TCOT",62]]},{"created_at":1385481293,"ranking":[["#OBAMA",82],["#TCOT",42]]},{"created_at":1385481353,"ranking":[["#OBAMA",67],["#TCOT",62]]},{"created_at":1385481413,"ranking":[["#OBAMA",88],["#TCOT",22]]}];

   var json = ["{\"created_at\":1385481755,\"rankings\":[[\"#OBAMA\",91],[\"#TCOT\",65],[\"#OBAMACARE\",26],[\"#IRAN\",25],[\"#MTVSTARS\",20],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#LNYHBT\",12],[\"#PJNET\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481749,\"rankings\":[[\"#OBAMA\",90],[\"#TCOT\",64],[\"#OBAMACARE\",26],[\"#IRAN\",25],[\"#MTVSTARS\",19],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#LNYHBT\",12],[\"#PJNET\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481743,\"rankings\":[[\"#OBAMA\",90],[\"#TCOT\",64],[\"#OBAMACARE\",26],[\"#IRAN\",25],[\"#MTVSTARS\",18],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#LNYHBT\",12],[\"#PJNET\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481737,\"rankings\":[[\"#OBAMA\",93],[\"#TCOT\",63],[\"#OBAMACARE\",28],[\"#IRAN\",27],[\"#MTVSTARS\",18],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#PJNET\",12],[\"#POPCORN\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481731,\"rankings\":[[\"#OBAMA\",91],[\"#TCOT\",64],[\"#OBAMACARE\",29],[\"#IRAN\",27],[\"#MTVSTARS\",17],[\"#BENGHAZI\",17],[\"#TEAPARTY\",15],[\"#POPCORN\",11],[\"#CARAMEL\",11],[\"#IMMIGRATION\",11]]}","{\"created_at\":1385481725,\"rankings\":[[\"#OBAMA\",61],[\"#TCOT\",63],[\"#OBAMACARE\",28],[\"#IRAN\",26],[\"#MTVSTARS\",17],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",11],[\"#CARAMEL\",11],[\"#POPCORN\",11]]}","{\"created_at\":1385481719,\"rankings\":[[\"#OBAMA\",93],[\"#TCOT\",64],[\"#OBAMACARE\",28],[\"#IRAN\",26],[\"#MTVSTARS\",18],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",12],[\"#CARAMEL\",11],[\"#POPCORN\",11]]}","{\"created_at\":1385481713,\"rankings\":[[\"#OBAMA\",93],[\"#TCOT\",33],[\"#OBAMACARE\",28],[\"#IRAN\",26],[\"#MTVSTARS\",18],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",12],[\"#POPCORN\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481707,\"rankings\":[[\"#OBAMA\",94],[\"#TCOT\",66],[\"#IRAN\",28],[\"#OBAMACARE\",28],[\"#MTVSTARS\",18],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",12],[\"#CARAMEL\",11],[\"#PJNET\",11]]}","{\"created_at\":1385481701,\"rankings\":[[\"#OBAMA\",94],[\"#TCOT\",66],[\"#IRAN\",28],[\"#OBAMACARE\",28],[\"#MTVSTARS\",16],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#PJNET\",12]]}"];


    //parse json
    $.each(json,function(index,value){
      json[index]= JSON.parse(value);
      // convert epoch time to js epoch time (milliseconds)
      json[index].created_at = json[index].created_at * 1000 ;
    });

    // define dimensions of graph
    var m = [80, 80, 80, 80]; // margins
    var w = 1000 - m[1] - m[3]; // width
    var h = 400 - m[0] - m[2]; // height
    var format = d3.time.format("%Y-%m-%d %H:%M:%S");

    //specify ranges and domains
    var color = d3.scale.category10();

    var x = d3.time.scale().domain( d3.extent(json,function (d){return d.created_at}) ).range([0, w]);

    var y = d3.scale.linear().domain([0, d3.max(json, function (d) {
            return Math.max(d.rankings[0][1],d.rankings[1][1]);
      })]).range([h, 0]);



    var line = d3.svg.line()
      // assign the X function to plot our line as we wish
      .x(function(d,i) { 
        //console.log(d);
        //console.log('Plotting X value for data point to be at: ' + d.created_at + ' using our xScale.');
        return x(d.created_at); 
      })
      .y(function(d) { 
        //console.log('Plotting Y value for data point to be at:' + d.rankings[0][1] + " using our yScale.");
        return y(d.rankings[0][1]); 
    })

    // Add an SVG element with the desired dimensions and margin.
    var graph = d3.select("#graph").append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2])
      .append("svg:g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

    // create yAxis
    // var xAxis = d3.svg.axis().scale(x);//.ticks(-h).orient("bottom");//tickSize(-h).tickSubdivide(true);
    var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickFormat(d3.time.format("%H:%M:%S"));

    //collect all the rankings
    color.domain(d3.keys(json[0]).filter(function(key) { return key !== "date"; }));

    // var rankings = color.domain().map(function(name) {
    //   return {
    //     name: name,
    //     values: data.map(function(d) {
    //         return {date: d.created_at, rankings: +d[name]};
    //     })
    //   };
    // });

    // Add the x-axis.
    graph.append("svg:g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
            .call(xAxis)
        .selectAll("text")  
      .attr("class","text-anchor")
      .attr("dx", "-2.48em")
      .attr("dy", ".15em")
      .attr("transform", function(d) {
        return "rotate(-65)" 
      });

      // create left yAxis
      var yAxisLeft = d3.svg.axis().scale(y).ticks(9).orient("left");
      // Add the y-axis to the left
      graph.append("svg:g")
      .attr("class", "y axis")
      .call(yAxisLeft);

      // Add the line by appending an svg:path element with the data line we created above
      // do this AFTER the axes above so that the line is above the tick-lines
      graph.append("svg:path").attr("d", line(json));


  </script>



  </body>
</html>

i am having a very hard time to follow this example http://bl.ocks.org/mbostock/3884955 and there is no tutorial or concrete example to explain to you how plot multiple lines in the same graph. HELP please

this is my data structure:

[
  {
    "created_at": 1385481173,
    "ranking": [
      [
        "#OBAMA",
        88
      ],
      [
        "#TCOT",
        82
      ]
    ]
  },
  {
    "created_at": 1385481233,
    "ranking": [
      [
        "#OBAMA",
        86
      ],
      [
        "#TCOT",
        62
      ]
    ]
  },
  {
    "created_at": 1385481293,
    "ranking": [
      [
        "#OBAMA",
        82
      ],
      [
        "#TCOT",
        42
      ]
    ]
  },
  {
    "created_at": 1385481353,
    "ranking": [
      [
        "#OBAMA",
        67
      ],
      [
        "#TCOT",
        62
      ]
    ]
  },
  {
    "created_at": 1385481413,
    "ranking": [
      [
        "#OBAMA",
        88
      ],
      [
        "#TCOT",
        22
      ]
    ]
  }
]

not sure how i should deal with my data structure. It is quite different from the other examples. — fenec
– fenec, Commented Dec 2, 2013 at 21:25
are you suggesting that i turn my data structure to something like this?[ [{created_at:1385481173,frequency:88},{created_at:1385481173,frequency:83},{created_at:1385481173,frequency:80}], [{created_at:1385481173,frequency:68},{created_at:1385481173,frequency:63},{created_at:1385481173,frequency:60}], ] — fenec
– fenec, Commented Dec 2, 2013 at 22:02

Lars Kotthoff · Accepted Answer · 2013-12-02 22:15:48Z

1

The quick and dirty way to do this is to define a second line generator that extracts the data for the other line.

var line2 = d3.svg.line()
  .x(function(d,i) {
    return x(d.created_at); 
  })
  .y(function(d) {
    return y(d.ranking[1][1]); 
});

Then all you need to do to draw the line is something like this.

graph.append("svg:path").attr("d", line2(json)).style("stroke", "red");

Complete example here.

answered Dec 2, 2013 at 22:15

Lars Kotthoff

110k16 gold badges210 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fenec Over a year ago

THIS IS AWESOME, but it would cause a problem if i don't know the number of line i need to draw in advance.

Lars Kotthoff Over a year ago

Yes, which is why you would need to take one of the other approaches I've linked to above in that case.

Collectives™ on Stack Overflow

How do i plot multiple lines in the same line graph using the D3 framework?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related