Published
Edited
Oct 14, 2020
1 star
snap = DOM.download(() => rasterize(chart), undefined, "Share Snapshot")
function rasterize(svg) {
let resolve, reject;
const promise = new Promise((y, n) => (resolve = y, reject = n));
const image = new Image;
image.onerror = reject;
image.onload = () => {
const rect = svg.getBoundingClientRect();
const context = DOM.context2d(rect.width, rect.height);
context.drawImage(image, 0, 0, rect.width, rect.height);
context.canvas.toBlob(resolve);
};
image.src = URL.createObjectURL(serialize(svg));
return promise;
}
import {serialize} from "@mbostock/saving-svg"
xPer = d3.scaleLinear()
.range([margin.left, width - margin.right])
x = d3.scaleLinear()
.domain([0, d3.max(series2, d => d3.max(d, d => d[1]))])
.range([margin.left, width - margin.bottom, margin.top])
xAxisPer = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(xPer).ticks( show == "total"? 5 : width / 100, "%" ))
.call(g => g.selectAll(".domain").remove())
xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks( null, "s"))
.call(g => g.selectAll(".domain").remove())
totalTick = {5, "s"}
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove())
data = d3.csvParse(await FileAttachment("InternationalManagerU21.csv").text(), (d, i, columns) => (d3.autoType(d)))
series2 = d3.stack()
.keys(show2=="Senior"? data2.columns.slice(1) : data.columns.slice(1))
(show2=="Senior"? data2 : data)
.map(d => (d.forEach(v => v.key = d.key), d))
seriesPer2 = d3.stack()
.keys(show2=="Senior"? data2.columns.slice(1) : data.columns.slice(1))
.offset(d3.stackOffsetExpand)
(show2=="Senior"? data2 : data)
.map(d => (d.forEach(v => v.key = d.key), d))
y = d3.scaleBand()
.domain(data2.map(d => d.Manager))
.range([margin.top, height - margin.bottom])
.padding(0.08)
colorRange = d3.schemeSpectral[series2.length].reverse()
import { radio } from "@jashkenas/inputs"
import {legend} from "@d3/color-legend"
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.
