title: Feeding live CSV data into D3 Charts
body: <p>I have an d3 web app which displays a chart containing some server info (throughput, ssl, etc.)</p>
  
  <p>The app works fine with static data, as it should. I have a Python script set up to continually update my traffic.csv to include current data (new data is appended every 30 seconds, and old data past a certain time frame is removed.) </p>
  
  <p>I am wondering what the best way to import this data into my graph is. I have tried to "store" my CSV data as a JavaScript variable but than D3 is unable to parse it.</p>
  
  <p>I would prefer a method that would allow this graph to update in real-time(or close to). I have looked into storing my data inside an AngularJS model and attempting to bind it to the d3 chart to take advantage of Angular's realtime two-way data binding. Has this been done before?</p>
  
  <p>Here is my D3 Bar Chart Code: <strong><a href="http://plnkr.co/edit/SclU3HYF7yCwZgHDOEHg?p=preview" rel="nofollow">http://plnkr.co/edit/SclU3HYF7yCwZgHDOEHg?p=preview</a></strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html ng-app="CSVReader"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Bar Chart&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"&gt;&lt;/script&gt;
    &lt;script src="controller.js"&gt;&lt;/script&gt;
    &lt;!-- import main controller --&gt;
    &lt;script src="http://code.jquery.com/jquery-1.11.1.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://d1e24pw9mnwsl8.cloudfront.net/c/bootstrap/css/bootstrap.min.css"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=9"&gt;
    &lt;script src="controller.js"&gt;&lt;/script&gt;
    &lt;!-- import main controller --&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl"&gt;
  
  
  
    &lt;div id="title" style="text-align:center;padding-bottom:20px;"&gt;
      &lt;h1&gt;Traffic Throughput (&lt;a href="index2.html"&gt;in&lt;/a&gt;) by Time&lt;/h1&gt;
      &lt;small&gt;Time in "Unix-Time", Throughput in Bytes&lt;/small&gt;
    &lt;/div&gt;
    &lt;div id="chart" style="text-align:center"&gt;&lt;/div&gt;
    &lt;script src="http://d3js.org/d3.v2.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      function renderChart() {
  
  
        var data = d3.csv.parse(d3.select('#csv').text());
        var valueLabelWidth = 50; // space reserved for value labels (right)
        var barHeight = 20; // height of one bar
        var barLabelWidth = 100; // space reserved for bar labels
        var barLabelPadding = 5; // padding between bar and bar labels (left)
        var gridLabelHeight = 18; // space reserved for gridline labels
        var gridChartOffset = 3; // space between start of grid and first bar
        var maxBarWidth = 420; // width of the bar with the max value
  
        // accessor functions 
        var barLabel = function(d) {
          return d['unixtime'];
        };
        var barValue = function(d) {
          return parseFloat(d['tput_bytes_in']);
        };
  
        // scales
        var yScale = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);
        var y = function(d, i) {
          return yScale(i);
        };
        var yText = function(d, i) {
          return y(d, i) + yScale.rangeBand() / 2;
        };
        var x = d3.scale.linear().domain([0, d3.max(data, barValue)]).range([0, maxBarWidth]);
        // svg container element
        var chart = d3.select('#chart').append("svg")
          .attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
          .attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);
        // grid line labels
        var gridContainer = chart.append('g')
          .attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')');
        gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text")
          .attr("x", x)
          .attr("dy", -3)
          .attr("text-anchor", "middle")
          .text(String);
        // vertical grid lines
        gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line")
          .attr("x1", x)
          .attr("x2", x)
          .attr("y1", 0)
          .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
          .style("stroke", "#ccc");
        // bar labels
        var labelsContainer = chart.append('g')
          .attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')');
        labelsContainer.selectAll('text').data(data).enter().append('text')
          .attr('y', yText)
          .attr('stroke', 'none')
          .attr('fill', 'black')
          .attr("dy", ".35em") // vertical-align: middle
        .attr('text-anchor', 'end')
          .text(barLabel);
        // bars
        var barsContainer = chart.append('g')
          .attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')');
        barsContainer.selectAll("rect").data(data).enter().append("rect")
          .attr('y', y)
          .attr('height', yScale.rangeBand())
          .attr('width', function(d) {
            return x(barValue(d));
          })
          .attr('stroke', 'white')
          .attr('fill', 'green');
        // bar value labels
        barsContainer.selectAll("text").data(data).enter().append("text")
          .attr("x", function(d) {
            return x(barValue(d));
          })
          .attr("y", yText)
          .attr("dx", 3) // padding-left
        .attr("dy", ".35em") // vertical-align: middle
        .attr("text-anchor", "start") // text-align: right
        .attr("fill", "blue")
          .attr("stroke", "none")
          .text(function(d) {
            return d3.round(barValue(d), 2);
          });
        // start line
        barsContainer.append("line")
          .attr("y1", -gridChartOffset)
          .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
          .style("stroke", "#000");
  
      }
    &lt;/script&gt;
    &lt;script id="csv" type="text/csv"&gt;
      // Data goes here until I can figure out how to link to the .csv 
    &lt;/script&gt;
    &lt;script&gt;
      renderChart();
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I was hoping I could find a one-line solution for importing data that like this:</p>
  
  <pre><code> var data = d3.csv.parse((traffic.csv).text());
  </code></pre>