extent = d3.extent([...data.values()])
// extent = [0, 10]
viewof palette = {
const form = html`<form><select name=i>${schemes.map(c => Object.assign(html`<option>`, {textContent: c.name}))}</select>`;
form.i.selectedIndex = 1;
form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;
form.oninput();
return form;
}
palette
// viewof n = html`<select>
// <option value=256>continuous</option>${d3.range(11, 2, -1).map(n => `
// <option value=${n}>discrete (${n})</option>`)}
// </select>`
async function toDataURL(url) {
return new Promise(async(resolve, reject) => {
const res = await fetch(url);
if(!res.ok) return reject(`Error: ${res.status} ${res.statusText}`);
const blob = await res.blob();
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => resolve(reader.result);
});
}
font = await toDataURL('https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6M-Bp0u-.woff')
// await toDataURL('https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6M-Bp0u-.woff')
chart = {
const path = d3.geoPath()
const svg = d3.create("svg")
.attr("viewBox", "0 0 960 600")
.style("width", "100%")
.style("height", "auto")
.style("font-family", font)
svg.append("g")
.attr("transform", "translate(600,40)")
.call(legend);
svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("fill", d => color(data.get(d.id)) != null ? color(data.get(d.id)) : "lightgrey")
.attr("d", path)
.append("title")
.text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}
${format(data.get(d.id))}`);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
legend = g => {
const x = d3.scaleLinear()
.domain(d3.extent(color.domain()))
.rangeRound([0, 260]);
g.selectAll("rect")
.data(color.range().map(d => color.invertExtent(d)))
.join("rect")
.attr("height", 8)
.attr("x", d => x(d[0]))
.attr("width", d => x(d[1]) - x(d[0]))
.attr("fill", d => color(d[0]));
g.append("text")
.attr("x", x.range()[0])
.attr("y", -6)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Unemployment Rate");
g.call(
d3.axisBottom(x)
.tickValues(getTickValues(color))
)
.select(".domain")
.remove();
}
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.
