Published
Edited
Aug 21, 2019
{
const svg = DOM.svg(width,60);
d3.select(svg)
.selectAll("rect")
.data(colors)
.enter()
.append("rect")
.attr("x", d => xColorScale(d))
.attr("y", 0)
// .attr("stroke", "black")
.attr("width", xColorScale.bandwidth())
.attr("height", 30)
.style("fill", d => d)
// .attr("opacity", 0.9)
.style("shape-rendering", "crispEdges")
d3.select(svg)
.selectAll("text")
.data(legend)
.enter()
.append("text")
.attr("x", (d,i) => xLegend(data.length/100*d))
.attr("y", 50)
.attr("dx", "0.32em")
.attr("text-anchor", "middle")
.style("font", "14px sans-serif")
.text(d => d + "%")
return svg
}
expScale = d3.scaleSqrt().domain([0, data.length]).range([0.5, 0.9])
xColorScale = d3.scaleBand().domain(colors).range([margin.left,width - 50])
colorScale = d3.scaleSequential(d3.interpolateRdYlBu).domain([1,0])
// colorScale = d3.scaleSequential(d3.interpolateRdPu()).domain([0, data.length])
colors = d3.range(0, data.length).map( d => colorScale(expScale(d)) )
xLegend = d3.scaleSqrt().domain([0, data.length]).range([margin.left, width-50])
// xLegend = d3.scaleLinear().domain([0, nSeparation]).range([margin.left, width-50])
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.
