D3 Examples - Matplotlib Linechart in D3

Matplotlib Linechart in D3

This is a useful example for converting a matplotlib linechart to D3 with an initial animation. Using this template, you can quickly generate a dynamic linechart using all of your favorite matplotlib styles, and add more advanced interactions without dealing with a lot of additional formatting.

See linechart.py for code used to generate linechart.svg. It generates a simple linechart with some basic formatting. Matplotlib's savefig function will automatically output an svg format if the filepath has a .svg extension. The key is to assign a unique gid to each line using the gid parameter, so it is simple to find the lines when you read the svg in index.html.

This is Part 2 in a series of examples for using matplotlib generated plots in D3.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <!-- CDN resource versions -->
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-ease.v1.min.js"></script>
  <script src="https://d3js.org/d3-queue.v3.min.js"></script>
  <script src="https://d3js.org/d3-selection.v1.min.js"></script>
  <script src="https://d3js.org/d3-transition.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<body>
​
<!-- chart SVGs-->
<div id="chart"></div>
​
<script type="text/javascript">
d3.queue()
  .defer(d3.xml, "linechart.svg")
    .await(ready);
​
function ready(error, xml) {
  if (error) throw error;
​
  // Load SVG into chart
  d3.select("#chart").node().appendChild(xml.documentElement);
​
​
  ///////////////////////////////////////////////////////////////////////////
  /////////////////////////// Helper Functions //////////////////////////////
  ///////////////////////////////////////////////////////////////////////////
​
  // Temporarily disable user interractions to allow animations to complete
  var disableUserInterractions = function (time) {
    isTransitioning = true;
    setTimeout(function(){
      isTransitioning = false;
    }, time);
  }//disableUserInterractions
​
​
  ///////////////////////////////////////////////////////////////////////////
  ///////////////////////// Animation Elements //////////////////////////////
  ///////////////////////////////////////////////////////////////////////////
​
  // Set initial transition state
  var isTransitioning = false;
​
  // Basic plot elements
  var svg, plot, lines
      label = "line_";
​
  svg = d3.select("#chart").select("svg")
  plot = svg.select("#figure_1")
​
  lines = plot.selectAll("g").filter(function(d,i,j) {
    return new RegExp(label, 'g').test(j[i].id)
  });
​
  svg.on("click", function(){
    if (isTransitioning == false) {
      init();
    }
  });
​
​
  ///////////////////////////////////////////////////////////////////////////
  ////////////////// Initialize Graphic and Animations //////////////////////
  ///////////////////////////////////////////////////////////////////////////
​
  function init() {
​
    //////////////////////////////////////////////////////
    ///////////////////// Actions ////////////////////////
    //////////////////////////////////////////////////////
    var DURATION = 2000;
    var DELAY = 2000;
​
    disableUserInterractions(DURATION * lines.nodes().length);
​
    // Intialize lines to zero
    lines.each(function() {
      d3.select(this).selectAll("path")
        .attr("stroke-dasharray", function(d) {
          var totalLength = this.getTotalLength()
          return(totalLength + " " + totalLength)
        }) 
        .attr("stroke-dashoffset", function(d) {
          return this.getTotalLength()
        })
    })
​
    // Animate lines
    lines.each(function(d,i) {
      d3.select(this).selectAll("path")
        .transition().delay(i * DELAY).duration(DURATION)
          .ease(d3.easeLinear)
          .attr("stroke-dashoffset", 0)
    })
​
  }//init
​
  init()
};
</script>
</body>
​
    