frontend + d3
Published
Edited
Jul 8, 2021
1 star
trans = (x, y, k) => {
if (k) return `translate(${[x, y, k].join(',')})`;
return `translate(${[x, y].join(',')})`;
}
getKey = ([k, v]) => k
getValue = ([k, v]) => v
cfg = {
const c = {
height: 600,
width: width,
marginTop: 50,
marginBottom: 50,
marginLeft: 50,
marginRight: 50
};
return {
...c,
chartWidth: c.width - (c.marginTop + c.marginBottom),
chartHeight: c.height - (c.marginLeft + c.marginRight)
};
}
scaleX = d3
.scaleLinear()
.domain([minValue, maxValue])
.range([0, cfg.chartWidth]);
scaleAltY = {
const minKey = d3.min(Array.from(newData.keys()).map(n => Number(n)));
const maxKey = d3.max(Array.from(newData.keys()).map(n => Number(n)));
return d3
.scaleLinear()
.domain([minKey, maxKey])
.range([0, cfg.chartHeight]);
}
maxValue = d3.max(newData.values())
minValue = d3.min(newData.values())
axisScaleY = d3
.scaleLinear()
.domain([maxValue, minValue])
.range(scaleY.range())
scaleY = d3
.scaleLinear()
.domain([minValue, maxValue])
.range([0, cfg.height - (cfg.marginTop + cfg.marginBottom)])
scaleBandX = d3
.scaleBand()
.domain(newData.keys())
.range([cfg.marginLeft, cfg.width - (cfg.marginLeft + cfg.marginRight)])
.paddingInner(.2)
barWidth = scaleBandX.bandwidth()
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.
