Published
Edited
May 6, 2020
md`I messed around with an idea for an "inlineCode" helper to make it easier to write inline code that includes back ticks and add some inline code styling. For example, "Here's how to use a \`html\` tagged template literal: ${inlineCode("html`<style></style>`")}".`
chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height])
.attr('style', 'font: 400 14px/1.5 "Work Sans", "Open Sans"; fill: #202630');
// bars
const bar = svg.append('g')
.selectAll('rect')
.data(data)
.join('rect')
.style("mix-blend-mode", "multiply")
.attr('fill', d => groupColors[d.group - 1])
// .attr('x', (d,i) => xScale(i))
.attr("x", d => xScale(d.name))
.attr('y', d => yScale(d.value))
.attr('width', xScale.bandwidth())
.attr('height', d => yScale(0) - yScale(d.value))
const percentFormatter = d3.format(".2~%")
// bar value labels
// const barValues = svg.append("g")
// .attr("fill", "#202630")
// .attr("text-anchor", "middle")
// .attr("font-family", "Work Sans")
// .attr("font-size", 12)
// .style("text-shadow", "white 1px 1px, white -1px -1px, white 1px -1px, white -1px 1px")
// .selectAll("text")
// .data(data)
// .join("text")
// .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2)
// .attr("y", d => yScale(d.value))
// .attr("dy", "-.5em")
// .text(d => percentFormatter(d.value));
// x-axis
const gx = svg.append('g').call(xAxis);
// y-axis
const gy = svg.append('g').call(yAxis);
// legend
svg.append("g")
.call(legend);
// chart title
svg.append("text")
.attr("transform", `translate(0, 0)`)
.attr("dy", "1em")
.attr("text-anchor", "start")
.style("fill", "#202630")
.style("font-size", 18)
.html("Allocation of resources across groups");
return Object.assign(svg.node(), {
update(order) {
xScale.domain(data.sort(order).map(d => d.name));
const t = svg.transition()
.duration(750);
bar.data(data, d => d.name)
.order()
.transition(t)
.delay((d, i) => i * 20)
.attr("x", d => xScale(d.name));
// barValues.data(data, d => d.name)
// .order()
// .transition(t)
// .delay((d, i) => i * 20)
// .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2)
gx.transition(t)
.call(xAxis)
.selectAll(".tick")
.delay((d, i) => i * 20);
}
});
}
chart.update(order)
// vegalite = require("@observablehq/vega-lite@0.2")
// _vl = vegalite
import { vl } from "@vega/vega-lite-api"
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.
