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.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  
  <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>

<div id="chart"></div>

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>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-ease.v1.min.js

https://d3js.org/d3-queue.v3.min.js

https://d3js.org/d3-selection.v1.min.js

https://d3js.org/d3-transition.v1.min.js