javascript - 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).