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)
svg
.append("g")
.selectAll("g")
.data(dataCategoryByName)
.join("g")
.attr("transform", d => {
// console.log(xScale(d[0]));
return `translate(${xScale(d[0])},0)`;
})
.attr("fill", 'red')
.attr("width", xScale.bandwidth())
.attr("height", yScale(0) - margin.top)
.attr("y", margin.top)
.attr('id', d => d)
.attr('class', 'bar-container')
// Group
.selectAll("rect")
.data(d => {
return xBarDomains.map(key => ({ key, ...dataCategoryByName.get(d[0]).find(item => item[seriesField] === key) }));
})
.join("rect")
.attr("x", d => xBarScale(d.key))
.attr("y", d => yScale(d[yField]))
.attr("width", xBarScale.bandwidth())
.attr("height", d => yScale(0) - yScale(+d[yField]))
.attr("fill", d => color(d.key))
return svg.node();
}
xAxis = svg => svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale).tickSizeOuter(0))
// .call(g => g.select(".domain").remove())
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(g => g.selectAll(".tick").call(grid));
// .call(svg => svg.select(".domain").remove())
}
xBarScale = d3.scaleBand()
.domain(xBarDomains)
.range([0, xScale.bandwidth()])
.padding(0)
xScale = {
const domains = xDomains; // ==> data.map(d => d[seriesField])
const scale = d3.scaleBand()
.domain(domains)
.range([margin.left, width - margin.right])
.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;
}
color = d3.scaleOrdinal().range(colors[1])
xBarDomains = [...getCategories('week').keys()]
xDomains = [...getCategories('name').keys()]
dataCategoryByName = getCategories('name')
dataCategoryByWeek = getCategories('week')
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.
