Published
Edited
Feb 17, 2018
1 fork
7 stars
{
const svg = d3.select(DOM.svg(width, height));
const defs = svg.append("defs");
const linearGradient = defs.append("linearGradient")
.attr("id", "linear-gradient");
linearGradient.selectAll("stop")
.data(colorScale.ticks().map((t, i, n) => ({ offset: `${100*i/n.length}%`, color: colorScale(t) })))
.enter().append("stop")
.attr("offset", d => d.offset)
.attr("stop-color", d => d.color);
svg.append('g')
.attr("transform", `translate(0,${height - margin.bottom - barHeight})`)
.append("rect")
.attr('transform', `translate(${margin.left}, 0)`)
.attr("width", width - margin.right - margin.left)
.attr("height", barHeight)
.style("fill", "url(#linear-gradient)");
svg.append('g')
.call(axisBottom);
return svg.node();
}
html`<style>
.x-axis line, .x-axis path { stroke: #fff; }
</style>`
colorScale = d3.scaleSequential(d3.interpolatePiYG).domain([0, 42])
axisScale = d3.scaleLinear()
.domain(colorScale.domain())
.range([margin.left, width - margin.right])
axisBottom = g => g
.attr("class", `x-axis`)
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(axisScale)
.ticks(width / 80)
.tickSize(-barHeight))
margin = ({top: 20, right: 40, bottom: 30, left: 40})
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.
