D3 Line with JSON Data, Not Rendering
<p>I have a Flask webserver that takes a dict of Python data and uses the jsonify function to return a JSON object when a GET is called on <code>/data</code>. The JSON object is not a nested list (see sample below) like most other examples on here.</p>

<p>I've been attempting to take that JSON data and pass it into my <code>d3.svg.line()</code> function, but it appears that something is wrong with the data I'm passing into it. My webpage renders the axes, but no line appears.</p>

<p>Inspecting the elements shows that the x and y axes are populated with my data, (<code>&lt;path class="domain" d="M0,6V0H890V6"&gt;&lt;/path&gt;</code>) but my <code>&lt;path class="line"&gt;&lt;/path&gt;</code> is empty.</p>

<p>I'm running a map function to convert my dates and values into their correct formats and returning them as an array. Running <code>console.log</code> on this function shows an output of a valid JSON object.</p>

<p>Can anybody help me out with where I'm going wrong here? Should I reformat my jsonified object to be a nested list instead and then populate my data object with <code>forEach</code>?</p>

<p>Below is my code and JSON sample:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;meta charset="utf-8"&gt;
&lt;style&gt;

body { font: 12px Arial; }

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

.axis path, .axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

&lt;/style&gt;

&lt;body&gt;
&lt;script src="//d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

        var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

        var x = d3.time.scale().range([0,width]);
        var y = d3.scale.linear().range([height,0]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

        var valueline = d3.svg.line()
            .x(function(d) {return x(d.timeStamps); })
            .y(function(d) {return y(d.outTemps); });

        var svg = d3.select("body")
            .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
            .append("g")
                .attr("transform", 
                      "translate (" + margin.left + "," + margin.top + ")");

        d3.json("/data",function(error, data) {
            function type(d) {
            d.timeStamps = 
            d.timeStamps.map(function (time) {return formatDate(time) } );
            d.outTemps = d.outTemps.map(function (temp) {return parseFloat(temp)});
        };
    x.domain(d3.extent(data, function (d) {return d.timeStamps}));
    y.domain(d3.extent(data, function(d) { return d.outTemps; }));


        svg.append("path")
            .datum(data)
            .append("path")
            .attr("class", "line")
            .attr("d", valueline(data));

        svg.append("path")  
            .attr("class", "line")
            .attr("d", valueline(data));

        svg.append("g")     
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")     
            .attr("class", "y axis")
            .call(yAxis);

        });



&lt;/script&gt;
&lt;/body&gt;


{
  "outTemps": [
    "79.7",
    "79.7",
    "79.8",
  ],
  "timeStamps": [
    "2016-09-20 19:15:07",
    "2016-09-20 19:10:07",
    "2016-09-20 19:05:11",
  ]
</code></pre>

<p>Your data is in a strange format for <code>d3</code>ing.  <code>d3</code> prefers arrays of objects where each property of the object represents an <code>x</code> or<code>y</code>.  So your data properly formatted should look something like this:</p>

<pre><code>[{
  "timeStamps": "2016-09-20T23:15:07.000Z",
  "outTemps": 79.7
}, {
  "timeStamps": "2016-09-20T23:10:07.000Z",
  "outTemps": 79.7
}, {
  "timeStamps": "2016-09-20T23:05:11.000Z",
  "outTemps": 79.8
}]
</code></pre>

<p>Further, my guess is that your <code>type</code> function is an attempt at re-formatting the data but you aren't even calling it...</p>

<p>Finally, if you want to just re-format your data with JavaScript, it would look something like this:</p>

<pre><code>  data = data.timeStamps.map(function(d, i) {
    return {
      timeStamps: formatDate(d),
      outTemps: parseFloat(data.outTemps[i])
    }
  });
</code></pre>

<p>With that correction, <a href="http://plnkr.co/edit/yLWhz6nHoNFFUw1L99Iv?p=preview" rel="nofollow">here's your running code and plot</a>.</p>

javascript python json d3.js svg