January 3, 2013

Smoothing lines out on our last D3JS example

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


on the line object...

        <meta charset="UTF-8">
        <title>super simple graph with 2 lines</title>
            .line0 {
              fill: none;
              stroke: #00F;
              stroke-width: 2px;
            .line1 {
                fill: none;
                stroke: #0F0;
                stroke-width: 2px;
        <script src="js/jquery-1.7.2.min.js"></script>
        <script src="js/d3.v3.min.js"></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
                    .domain([0, 18])
                    .range([0, width]),
                y = d3
                    .domain([0, 10])
                    .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
              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
                .attr("class", function(d,i){return "line"+i;});

And you get: 

No comments:

Post a Comment