i have data in streamgraph stack layout , desired aesthetic i'm after assign arbitrary series center line(s). series above lines (as determined index in data) stack on top , series below line stack below.
here's a jsfidde.
in example, i'd ms , rc series single horizontal lines other groups stacked above , below them, respectively. (as opposed data index, set middle series based on data attribute, in example, oldest date make sense.)
i think solution require passing own offset function i'm having hard time figuring out how built-in ones do.
html
<div class="chart"> js
// adapted https://gist.github.com/willturman/4631136 var data = [ {"key":"dj","value":0,"date":"1/8/13"}, {"key":"dj","value":0,"date":"1/9/13"}, {"key":"dj","value":0,"date":"1/10/13"}, {"key":"dj","value":1,"date":"1/11/13"}, {"key":"dj","value":1,"date":"1/12/13"}, {"key":"ms","value":0,"date":"1/8/13"}, {"key":"ms","value":1,"date":"1/9/13"}, {"key":"ms","value":1,"date":"1/10/13"}, {"key":"ms","value":1,"date":"1/11/13"}, {"key":"ms","value":1,"date":"1/12/13"}, {"key":"rc","value":0,"date":"1/8/13"}, {"key":"rc","value":1,"date":"1/9/13"}, {"key":"rc","value":1,"date":"1/10/13"}, {"key":"rc","value":1,"date":"1/11/13"}, {"key":"rc","value":1,"date":"1/12/13"}, {"key":"cg","value":0,"date":"1/8/13"}, {"key":"cg","value":0,"date":"1/9/13"}, {"key":"cg","value":0,"date":"1/10/13"}, {"key":"cg","value":0,"date":"1/11/13"}, {"key":"cg","value":1,"date":"1/12/13"}, {"key":"ri","value":0,"date":"1/8/13"}, {"key":"ri","value":0,"date":"1/9/13"}, {"key":"ri","value":0,"date":"1/10/13"}, {"key":"ri","value":0,"date":"1/11/13"}, {"key":"ri","value":1,"date":"1/12/13"} ] chart(data, "pink"); var datearray = []; var colorrange = []; function chart(data, color) { if (color == "blue") { colorrange = ["#045a8d", "#2b8cbe", "#74a9cf", "#a6bddb", "#d0d1e6", "#f1eef6"]; } else if (color == "pink") { colorrange = ["#980043", "#dd1c77", "#df65b0", "#c994c7", "#d4b9da", "#f1eef6"]; } else if (color == "orange") { colorrange = ["#b30000", "#e34a33", "#fc8d59", "#fdbb84", "#fdd49e", "#fef0d9"]; } strokecolor = colorrange[0]; var format = d3.time.format("%m/%d/%y"); var margin = {top: 20, right: 40, bottom: 30, left: 30}; var width = document.body.clientwidth - margin.left - margin.right; var height = 400 - margin.top - margin.bottom; var tooltip = d3.select("body") .append("div") .attr("class", "remove") .style("position", "absolute") .style("z-index", "20") .style("visibility", "hidden") .style("top", "30px") .style("left", "55px"); var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height-10, 0]); var z = d3.scale.ordinal() .range(colorrange); var xaxis = d3.svg.axis() .scale(x) .orient("bottom") .ticks(d3.time.weeks); var yaxis = d3.svg.axis() .scale(y); var yaxisr = d3.svg.axis() .scale(y); var stack = d3.layout.stack() .offset("silhouette") .values(function(d) { return d.values; }) .x(function(d) { return d.date; }) .y(function(d) { return d.value; }); var nest = d3.nest() .key(function(d) { return d.key; }); var area = d3.svg.area() .interpolate("linear") .x(function(d) { return x(d.date); }) .y0(function(d) { return y(d.y0); }) .y1(function(d) { return y(d.y0 + d.y); }); var svg = d3.select(".chart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); data.foreach(function(d) { d.date = format.parse(d.date); d.value = +d.value; }); var layers = stack(nest.entries(data)); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]); svg.selectall(".layer") .data(layers) .enter().append("path") .attr("class", "layer") .attr("d", function(d) { return area(d.values); }) .style("fill", function(d, i) { return z(i); }); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + width + ", 0)") .call(yaxis.orient("right")); svg.append("g") .attr("class", "y axis") .call(yaxis.orient("left")); svg.selectall(".layer") .attr("opacity", 1) .on("mouseover", function(d, i) { svg.selectall(".layer").transition() .duration(250) .attr("opacity", function(d, j) { return j != ? 0.6 : 1; })}) .on("mousemove", function(d, i) { mousex = d3.mouse(this); mousex = mousex[0]; var invertedx = x.invert(mousex); invertedx = invertedx.getmonth() + invertedx.getdate(); var selected = (d.values); (var k = 0; k < selected.length; k++) { datearray[k] = selected[k].date datearray[k] = datearray[k].getmonth() + datearray[k].getdate(); } mousedate = datearray.indexof(invertedx); pro = d.values[mousedate].value; d3.select(this) .classed("hover", true) .attr("stroke", strokecolor) .attr("stroke-width", "0.5px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible"); }) .on("mouseout", function(d, i) { svg.selectall(".layer") .transition() .duration(250) .attr("opacity", "1"); d3.select(this) .classed("hover", false) .attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden"); }) var vertical = d3.select(".chart") .append("div") .attr("class", "remove") .style("position", "absolute") .style("z-index", "19") .style("width", "1px") .style("height", "380px") .style("top", "10px") .style("bottom", "30px") .style("left", "0px") .style("background", "#fff"); d3.select(".chart") .on("mousemove", function(){ mousex = d3.mouse(this); mousex = mousex[0] + 5; vertical.style("left", mousex + "px" )}) .on("mouseover", function(){ mousex = d3.mouse(this); mousex = mousex[0] + 5; vertical.style("left", mousex + "px")}); }
