How to use json data instead of tsv file in d3 multi line charts?

Question

jsfiddle link https://jsfiddle.net/8vhsLor6/

Basically I want to replace tsv file data with json object. I am getting error. Type error

var cities = data.columns.slice(1).map(function(id) {

I have data like this

var data = [
{date:"1-May-12","New York":"58.13", "San Francisco":"58.13", "Austin": "43"},
{date:"30-Apr-12","New York":"53.98" , "San Francisco":"48.13", "Austin": "53"},
{date:"27-Apr-12","New York":"67.00", "San Francisco":"38.13", "Austin": "63"},
{date:"26-Apr-12","New York":"89.70", "San Francisco":"28.13", "Austin": "73"},
{date:"25-Apr-12","New York":"99.00", "San Francisco":"18.13", "Austin": "83"}
];

Answer 1

d3.tsv in version 4:

When changing the data from Bostock's code from a TSV to a JSON (or, more precisely, to a variable), you forgot something important: In the new D3 v4.x, d3.tsv function creates an array property called columns.

This property contains all the headers of the TSV file as an array. In the original code, if you console.log(data.columns), you'll get this:

["date", "New York", "San Francisco", "Austin"];

So, basically, for your code to work, all I did was adding this property:

data.columns = ["date", "New York", "San Francisco", "Austin"];

Here is your fiddle: https://jsfiddle.net/uz9rtcwd/

PS: You have a wrong date format. Also, you have to parse the dates in the data array (this step corresponds to the accessor function in the d3.tsv, but keep in mind that d3.json has no accessor function).

Answer 2

To make the multiline graph have a few steps need to be added:-

• Find out the unique keys for y-axis
• Time parsing is another important factor
• Add style for the line and path.

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%e-%b-%y")

var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { return x(parseTime(d.date)); })
    .y(function(d) { return y(d.temperature); });


var data = [
{date:"1-May-12","New York":"58.13", "San Francisco":"58.13", "Austin": "43"},
{date:"30-Apr-12","New York":"53.98" , "San Francisco":"48.13", "Austin": "53"},
{date:"27-Apr-12","New York":"67.00", "San Francisco":"38.13", "Austin": "63"},
{date:"26-Apr-12","New York":"89.70", "San Francisco":"28.13", "Austin": "73"},
{date:"25-Apr-12","New York":"99.00", "San Francisco":"18.13", "Austin": "83"}
];

	var keys =d3.keys(data[0]);
  var i = keys.indexOf('date')
  if(i != -1) {
    keys.splice(i, 1);
  }
  var cities = keys.map(function(d) { 
    return {
      id:d,
      values: data.map( function(e) {
        return {
          date: e.date,
          temperature: e[d]
        };
      })
  } });

  x.domain(d3.extent(data, function(d) { return parseTime(d.date); }));

  y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); })
  ]);

  z.domain(cities.map(function(c) { return c.id; }));

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("fill", "#000")
      .text("Temperature, ºF");

  var city = g.selectAll(".city")
    .data(cities)
    .enter().append("g")
      .attr("class", "city");

  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) {  return line(d.values); })
      .style("stroke", function(d) { return z(d.id); });

  city.append("text")
      .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) {  return "translate(" + x(parseTime(d.value.date)) + "," + y(d.value.temperature) + ")"; })
      .attr("x", 3)
      .attr("dy", "0.35em")
      .style("font", "10px sans-serif")
      .text(function(d) { return d.id; });

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}


.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>

var keys =d3.keys(data[0]); var i = keys.indexOf('date') if(i != -1) { keys.splice(i, 1); } var cities = keys.map(function(d) { return { id:d, values: data.map( function(e) { return { date: e.date, temperature: e[d] }; }) } });