Published
Edited
Sep 21, 2022
3 forks
chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height])
.attr('style', 'border: 1px solid #eee')
.attr('xmlns', 'http://www.w3.org/2000/svg')
gradient(svg);
svg.call(xAxis);
svg.call(yAxis)
const bar = svg.append("g")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => xScale(d[xField]))
.attr("y", d => yScale(d[yField]))
.attr("height", d => yScale(0) - yScale(d[yField]))
.attr("width", xScale.bandwidth())
// .attr("fill", '#005bef')
.attr('fill', 'url(#mylLnearGradient)');
return svg.node();
}
xAxis = svg => svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale).tickSizeOuter(0))
yAxis = svg => {
// A helper method for generating grid lines on the y-axis.
function grid(tick) {
return tick.append("line")
.attr("class", "grid")
.attr("x2", width - margin.left - margin.right)
.attr("stroke", "rgba(0,0,0,0.2)")
// .attr("stroke-opacity", 0.5)
.attr("stroke-dasharray", [5, 5])
}
return svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(yScale).ticks(5))
// .call(svg => svg.select(".domain").remove())
.call(g => g.selectAll(".tick").call(grid));
}
xScale = {
const domains = d3.map(data, d => d[xField]);
const scale = d3.scaleBand()
.range([margin.left, width - margin.right])
.domain(domains)
.paddingInner(0.1)
.paddingOuter(0.1);
return scale;
}
yScale = {
const min = d3.min(data, (d) => d[yField]);
const max = d3.max(data, (d) => d[yField]);
const scale = d3.scaleLinear()
.domain([0, max])
.nice()
.clamp(true)
.range([height - margin.bottom, margin.top]);
return scale;
}
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.
