Public
Edited
May 27, 2023
d3 = require('d3@7')
us_json = FileAttachment("us_json.json").json()
output = FileAttachment("output.json").json()
nodes = Object.entries(output).map(([state, years]) => {
let node = { id: state, years: [] };
for (let [year, data] of Object.entries(years)) {
node.years.push({ year: parseInt(year), value: +data["categories"]["All Fuels"] });
}
return node;
});
viewof selectedYear = html`<input type="range" min="2001" max="2022" value="2001">`
selectedYearValue = {
return selectedYear;
}
debugValues = nodes.map(d => {
return {
id: d.id,
year: +selectedYear,
valueForYear: d.years.find(year => year.year === +selectedYear).value,
newSize: Math.sqrt(d.years.find(year => year.year === +selectedYear).value) / 10
};
});
width = 800
height = 800
simulation = d3.forceSimulation(us_json.nodes)
.force("link", d3.forceLink(us_json.links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
drag = simulation => {
function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
function joinData(nodes, debugValues) {
return nodes.map(node => {
const match = debugValues.find(value => value.id.trim() === node.id);
return match ? {...node, r: match.newSize} : node;
});
}
joinedData = joinData(us_json.nodes, debugValues);
// Update the 'r' attribute of nodes in us_json.nodes based on debugValues
us_json.nodes.forEach(node => {
const match = debugValues.find(value => value.id.trim() === node.id);
if (match) {
node.r = match.newSize;
}
});
us_json.nodes;
minRadius = d3.min(us_json.nodes, d => d.r);
maxRadius = d3.max(us_json.nodes, d => d.r);
colorScale = d3.scaleSequential()
.domain([minRadius, maxRadius])
.interpolator(d3.interpolatePlasma);
svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(us_json.links)
.join("line")
.attr("stroke-width", d => Math.sqrt(d.value));
node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(us_json.nodes)
.join("circle")
.attr("fill", "#000")
.call(drag(simulation))
.attr("r", d => d.r)
.attr("fill", d => colorScale(d.r));
node.append("title")
.text(d => d.id);
simulation.on("tick", () => {
svg.selectAll("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y);
svg.selectAll("line")
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
});
svg.node()
energy_data = FileAttachment("energy_data.json").json()
margin = ({top: 20, right: 20, bottom: 30, left: 40})
state = Object.keys(energy_data)
viewof chosenState = {
const select = document.createElement("select");
state.forEach(e => {
const option = document.createElement("option");
option.text = e;
option.value = e;
select.add(option);
});
return select;
}
data2 = Object.entries(energy_data[viewof chosenState.value].years).map(([year, values]) => {
let convertedValues = {};
for (let key in values) {
convertedValues[key] = +values[key];
}
return {year: +year, ...convertedValues};
})
columns = Array.from(new Set(data2.flatMap(d => Object.keys(d)).filter(e => e !== "state" && e !== "year")))
x = d3.scaleBand()
.domain(d3.range(data2[0].year, data2[data2.length - 1].year + 1))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(data2, e => d3.sum(columns, key => e[key] || 0))]).nice()
.range([height - margin.bottom, margin.top])
colors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"];
color = d3.scaleOrdinal()
.domain(columns)
.range(colors);
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.selectAll("g")
.data(d3.stack().keys(columns)(data2))
.join("g")
.attr("fill", e => color(e.key))
.selectAll("rect")
.data(e => e)
.join("rect")
.attr("x", (e, i) => x(e.data.year))
.attr("y", e => y(e[1]))
.attr("height", e => y(e[0]) - y(e[1]))
.attr("width", x.bandwidth());
svg.append("text")
.attr("x", width / 2)
.attr("y", height - margin.bottom / 2)
.attr("text-anchor", "middle")
.text("Year");
svg.append("text")
.attr("x", -height / 2)
.attr("y", margin.left / 2)
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.text("Net Energy Generated");
return svg.node();
}
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.
