Published
Edited
Jul 19, 2018
5 forks
6 stars
chart = {
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const serie = svg.append("g")
.selectAll("g")
.data(series)
.enter().append("g")
.attr("transform", d => `translate(0,${y(d.key) + 1})`);
const tip = d3tip().attr('class', 'd3-tip').html(d => (100*d).toFixed(1));
svg.call(tip)
serie.append("g")
.selectAll("rect")
.data(d => d.value)
.enter().append("rect")
.attr("fill" , "#ddd")
.attr("stroke", "black")
.style("stroke-dasharray", `${x.bandwidth()} 1000`)
.attr("x" , (d,i) => x(bins[i]))
.attr("y" , d => z(d))
.attr("height", d => z(0) - z(d))
.attr("width" , x.bandwidth())
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
