Exploring the politics of a digitally networked world.
response
style = html`<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,500;0,700;1,300;1,500;1,700&display=swap');
</style> `
spark(
Array.from(
allDataClean
.get("FL")
.get("US President")
.get("statewide")
).map(d => d[1].movPercent)
)
Array.from(
allDataClean
.get("FL")
.get("US President")
.get("statewide")
).map(d => -d[1].movPercent)
import { spark } from "@elibenton/sparklines"
function sparklineArray(values, width = 80, height = 22) {
const x = d3
.scaleLinear()
.domain([0, values.length - 1])
.range([0.5, width - 0.5]);
const y = d3
.scaleLinear()
.domain(d3.extent(values))
.range([height - 0.5, 0.5]);
const context = DOM.context2d(width, height);
const line = d3
.line()
.x((d, i) => x(i))
.y(y)
.context(context);
context.beginPath(), line(values), context.stroke();
return context.canvas;
}
function partyColor(data) {
if (data === "R") {
return html`<span style="color:#fc473a">(R)</span>`;
} else if (data === "D") {
return html`<span style="color:#118efc">(D)</span>`;
} else {
return html`<span style="color:#acafac">(I)</span>`;
}
}
function color(data) {
if (
data.get(statesRev.get(response.normalizedInput.state)).leader[0] === "D"
) {
return `style="color:#fc473a"`;
} else {
return `style="color:#118efc"`;
}
}
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.
