January 2, 2013

The stupid simple multi-line D3 example

Ever since I started looking at D3js I have been amazed at the flexibility and the uncanny simultaneous simplicity and complexity of the api. It seems like an impossible thing. It's both brutally evident and completely unintuitive. How is that even possible you ask? well, you just gotta get used to their ways. Once you have, you can start creating nice visualizations.
With no further ado, here is a 2-liner to show how to create a super simple 2-line graph.
<html>
    <head>
        <meta charset="UTF-8">
        <title>super simple graph with 2 lines</title>
        <style>
            .line0 {
              fill: none;
              stroke: #00F;
              stroke-width: 2px;
            }
            .line1 {
                fill: none;
                stroke: #0F0;
                stroke-width: 2px;
            }
        </style>
    </head>
    <body>
        <script src="js/jquery-1.7.2.min.js"></script>
        <script src="js/d3.v3.min.js"></script>
        <script>

            var data = [[0,2,4,6,8,10,8,6,4,2,4,6,8,6,4,6,6,6,6],
                        [null,null,null,5,7, 9,7,5,3,1,3,5,7,5,3,5,5,5,5]],
                width = 400,
                height = 200,
                x = d3
                    .scale
                    .linear()
                    .domain([0, 18])
                    .range([0, width]),
                y = d3
                    .scale
                    .linear()
                    .domain([0, 10])
                    .range([height,0]),
                line=d3
                    .svg
                    .line()
                    .x(function(d,i) {return x(i);})
                    .y(function(d) {return y(d);});

            /*
              add a visualisation,
              select the body tag,
              append an svg container tag,
              give it the right width,
              give it the right height as well,
            */
            var visualisation = d3
                .select("body")
                 .append("svg")
                 .attr("height",height)
                 .attr("width",width);
            /*
              start from the visualisation
              - select all the path elements (there are none)
              - join the 2D array (which creates an enter() selection with 2 entries, one for each data series)
              - create a path element for each series
              - use the 'line' variable to get the appropriate x,y coordinates translated by the x and y scales defined earlier
              - use a lambda function to assign each series to its own style (line0, line1)
            */    
            var line = visualisation
                .selectAll("path")
                .data(data)
                .enter()
                .append("path")
                .attr("d",line)
                .attr("class", function(d,i){return "line"+i;});
   
    </script>
    </body>
</html>


And you get: 

8 comments: