January 4, 2013

simple D3 color scales

In my previous example I had used 2 CSS classes for the two lines but there is a better way to change your colors dynamically. D3 lets you use scale in lots of creative ways but one way that's obvious is to map colors. In goes a value, out comes a nice color. In this simple example, I am using the series id to get a color.

<html>
    <head>
        <meta charset="UTF-8">
        <title>super simple graph with 2 lines</title>
        <style>
            .line {
              fill: none;
              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]),
                color = d3
                    .scale
                    .category10(),
                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", "line")
                .attr("stroke",function(d,i){return color(i);});
        </script>
    </body>
</html>



And you get:

No comments:

Post a Comment