January 3, 2013

Smoothing lines out on our last D3JS example

exact same code as in my last post with ONE twist...

.interpolate("basis")

on the line object...

<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()
                    .interpolate("basis")
                    .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: 

No comments:

Post a Comment