The avatar for @gsolat
Guillermo Solano
Published
Edited
Feb 9, 2018
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof strokeWidth = slider({min: 0.01, max: 5, value: 0.35})
Insert cell
chart = {
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.attr("fill", columnColor)
.selectAll("rect").data(data).enter().append("rect")
.attr("x", d => x(d.name))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
svg.append("g")
.call(xAxis)
.selectAll("text")
.attr("text-anchor","start")
.attr("transform", "rotate(45)");
svg.append("g")
.call(yAxis)
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more