Published
Edited
Jul 14, 2019
3 stars
xBand.step()
xPoint.step()
chart2 = {
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.attr("fill", "charcoal")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => xHybrid(d.name))
.attr("cy", d => y(d.value) - 3)
.attr("r", 3);
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => xHybrid.band(d.name))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", xHybrid.bandwidth());
svg.append("g")
.style('color', 'charcoal')
.call(xAxisHybrid);
svg.append("g")
.call(yAxis);
return svg.node();
}
barWidthOrdinal = ((xPoint.range()[1] - xPoint.range()[0])/data.length) * (xPointForAll.padding());
xPointForAll = {
let paddingPoint = 0.4;
return d3.scalePoint()
.domain(data.map(d => d.name))
.range([margin.left, width - margin.right])
.padding(paddingPoint)
}
height = 500
margin = ({top: 20, right: 0, bottom: 30, left: 40})
d3 = require("d3@5")
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.
