color swatchestoc with nestinghistogramline chartbias and gainperiodicity
horizontal stacked normalized bar chart
hbar_stack_norm(data, options)
data = make_data()
options = ({ color_scheme_provider: d3.interpolateGreys })
hbar_stack_norm = (data, options={}) => {
if (data.length == 0) throw new Error('no data; nothing to represent');
const {
color_scheme_provider = d3.interpolateSpectral,
margin = {top: 20, right: 20, bottom: 10, left: 50},
chart_width = width,
chart_height = (data.length * 25) + margin.top + margin.bottom,
} = options;
if (!data.columns) data.columns = Object.keys(data[0]);
const series_labels = data.columns.slice(1);
const color_scheme = Array(series_labels.length).fill(0).map((v,i,a) => color_scheme_provider((i+1)/a.length));
const x = d3.scaleLinear()
.range([margin.left, chart_width - margin.right]);
const y = d3.scaleBand()
.domain(data.map(d => d.name))
.range([margin.top, chart_height - margin.bottom])
.padding(0.08);
const xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(chart_width / 100, "%"))
.call(g => g.selectAll(".domain").remove());
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
.call(g => g.selectAll(".domain").remove());
const formatPercent = d3.format(".1%");
const formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en");
const series = d3.stack()
.keys(series_labels)
.offset(d3.stackOffsetExpand)
(data)
.map(d => (d.forEach(v => v.key = d.key), d));
const color = d3.scaleOrdinal()
.domain(series.map(d => d.key))
.range(color_scheme)
.unknown("#fcc");
const svg = d3.create("svg")
.attr("width", chart_width)
.attr("height", chart_height);
svg.append("g")
.selectAll("g")
.data(series)
.enter().append("g")
.attr("fill", d => color(d.key))
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", d => x(d[0]))
.attr("y", d => y(d.data.name))
.attr("width", d => x(d[1]) - x(d[0]))
.attr("height", y.bandwidth())
.append("title")
.text(d => `${d.data.name} ${d.key}\n${formatPercent(d[1] - d[0])} (${formatValue(d.data[d.key])})`);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
make_data = (num_series=3, num_samples=4, value_range={min:2,max:20}) => {
// consistent with d3csv.parse() output (array with columns property)
// https://github.com/d3/d3-dsv/blob/master/src/dsv.js
const alpha = (i) => String.fromCharCode('a'.charCodeAt(0)+i);
const value = (i) => Math.floor(Math.random()*(value_range.max-value_range.min)) + value_range.min;
const rows = JSON.parse('{ "rows":[' +
Array(num_series).fill(1).map((v,i) => ('{' +
`"name":"series-${i+1}",` +
`${Array(num_samples).fill(1).map((v,i) => `"${alpha(i)}":${value(i)}`).join(',')}` +
'}')).join(',') +
']}').rows;
return rows;
}
d3 = require("d3@6")
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.
