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('path')
.data(dataCategoryByWeek)
.join('path')
.attr('d', (d) => {
// console.log(d[0], d[1])
return lineBuilder(d[1]);
})
.style('stroke', d => color(d[0]))
.style('stroke-width', 4)
.style('fill', 'transparent');
return svg.node();
}
lineBuilder = {
return d3
.line()
.curve(d3.curveMonotoneX)
.x((d) => xScale(d[xField]) + xScale.bandwidth() / 2)
.y((d) => yScale(d[yField]));
}
lineTypeMap = ({
'd3.curveBasis': d3.curveBasis,
'd3.curveBasisClosed': d3.curveBasisClosed,
'd3.curveBasisOpen': d3.curveBasisOpen,
'd3.curveBumpX': d3.curveBumpX,
'd3.curveBumpY': d3.curveBumpY,
'd3.curveBundle': d3.curveBundle,
'd3.curveCardinal': d3.curveCardinal,
'd3.curveCardinalClosed': d3.curveCardinalClosed,
'd3.curveCardinalOpen': d3.curveCardinalOpen,
'd3.curveCatmullRom': d3.curveCatmullRom,
'd3.curveCatmullRomClosed': d3.curveCatmullRomClosed,
'd3.curveCatmullRomOpen': d3.curveCatmullRomOpen,
'd3.curveLinear': d3.curveLinear,
'd3.curveLinearClosed': d3.curveLinearClosed,
'd3.curveMonotoneX': d3.curveMonotoneX,
'd3.curveMonotoneY': d3.curveMonotoneY,
'd3.curveNatural': d3.curveNatural,
'd3.curveStep': d3.curveStep,
'd3.curveStepAfter': d3.curveStepAfter,
'd3.curveStepBefore': d3.curveStepBefore,
})
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 = xDomains;
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.
