d3 JSON multiple line chart

Question

I\'m trying to make a plot with multiple lines on it from a JSON blob that looks like:

{\"2007\": [{\"val\":10, \"mon\":10}, {\"val\":20, \"mon\":11}, {\"va         


        

Answer 1

My guess is that the biggest problem here is that you're starting with an object, not an array. d3.data takes an array, not an object, so you might need your data set up like:

[
  [{"val":10, "mon":10}, {"val":20, "mon":11}, {"val":40, "mon":12}, ...],
  [{"val":20, "mon":8}, {"val":20, "mon":9}, {"val":40, "mon":10}, ...],
  ...
]

If you need to convert your current data to this format, look at d3.entries, which will give you an array with your key as well as your array of points:

[
  {
    key: "2008",
    value: [{"val":10, "mon":10}, {"val":20, "mon":11}, {"val":40, "mon":12}, ...]
  },
  { 
    key: "2008",
    value: [{"val":20, "mon":8}, {"val":20, "mon":9}, {"val":40, "mon":10}, ...]
  },
  ...
]

See this fiddle for a simple-case version of your graph, using the first data format above: http://jsfiddle.net/nrabinowitz/kmmyc/