d3.js graph to plot binary data

Question

I am trying to create a graph which plots data from a log file, the data indicates if several switches are on or off, so the data line for them is 1 or 0 and this is logged over a 24 hour period. What I am looking is the time scale (24 hour period) along the bottom, which I have done ok, and this is where I need the help, I need a horizontal bar for each of the data lines which spans the entire time scale but it would be two colours, one for when it is on (data =1) and another for when it is off.

I suspect I need to do check the data in the following section of code and the set the colour based on its value but how do I access the data here

  svg.append("path")      
    .attr("class", "line")
    .style("stroke", "red")
    .attr("stroke-width", 5)
    .attr("d", valuleline_heater1(data));

In this section I can access the data but can't control the colour

    var valuleline_heater1 = d3.svg.line()
            .x(function(d) { return x(d.dt); })
            .y(function(d) { return y(d.heater1); });

Can any one point me in the right direction, many thanks

Answer 1

A path is a single entity, so you can't style parts of if according to some data. What d3.svg.line does is create the string that describes the path (the d attribute of the path element), so it uses all the data to create a single element.

If I understood correctly what you want, instead of using a path you should use a segmented line: draw n line segments (svg line elements) so that you can style each one individually, according to its datum.

You can take a look at this example , you'll see that it creates a path element for each datum.