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.

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

And you get:

1 comment:

  1. thank you arnoud for making it all seem so easy to me. i am not sure what i would have done without your help. keep us updated wit more