From Barnstable MA.Started my career working in the field for Rice Energy in Pittsburgh PA. Earned my Masters in Energy Economics from Rice University in Houston TX. Working to build a community that will drive the Global Energy Transition.
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.call(grid);
const circle = svg.append("g")
.attr("stroke", "black")
.selectAll("circle")
.data(dataAt(1980), d => d.name)
.join("circle")
.sort((a, b) => d3.descending(a.population, b.population))
.attr("cx", d => x(d.income/d.population))
.attr("cy", d => y(d.lifeExpectancy/d.income))
.attr("r", d => radius(d.population*100))
.attr("fill", d => color(d.region))
.call(circle => circle.append("title")
.text(d => [d.name, d.region].join("\n")));
return Object.assign(svg.node(), {
update(data) {
circle.data(data, d => d.name)
.sort((a, b) => d3.descending(a.population, b.population))
.attr("cx", d => x(d.income/d.population))
.attr("cy", d => y(d.lifeExpectancy/d.income))
.attr("r", d => radius(d.population*100));
}
});
}
update = chart.update(currentData)
currentData = dataAt(year)
x = d3.scaleLog([0.0002, 0.19], [margin.left, width - margin.right])
y = d3.scaleLinear([0, 0.035], [height - margin.bottom, margin.top])
radius = d3.scaleSqrt([0, 5e8], [0, width / 24])
color = d3.scaleOrdinal(data.map(d => d.region), d3.schemeCategory10).unknown("black")
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80, ","))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", width)
.attr("y", margin.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text("Income per capita (dollars) →"))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Energy Intensity"))
grid = g => g
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.1)
.call(g => g.append("g")
.selectAll("line")
.data(x.ticks())
.join("line")
.attr("x1", d => 0.5 + x(d))
.attr("x2", d => 0.5 + x(d))
.attr("y1", margin.top)
.attr("y2", height - margin.bottom))
.call(g => g.append("g")
.selectAll("line")
.data(y.ticks())
.join("line")
.attr("y1", d => 0.5 + y(d))
.attr("y2", d => 0.5 + y(d))
.attr("x1", margin.left)
.attr("x2", width - margin.right));
function dataAt(year) {
return data.map(d => ({
name: d.name,
region: d.region,
income: valueAt(d.income, year),
population: valueAt(d.population, year),
lifeExpectancy: valueAt(d.lifeExpectancy, year)
}));
}
function valueAt(values, year) {
const i = bisectYear(values, year, 0, values.length - 1);
const a = values[i];
if (i > 0) {
const b = values[i - 1];
const t = (year - a[0]) / (b[0] - a[0]);
return a[1] * (1 - t) + b[1] * t;
}
return a[1];
}
data = FileAttachment("EnergyIntensity.json").json()
bisectYear = d3.bisector(([year]) => year).left
margin = ({top: 20, right: 20, bottom: 35, left: 40})
height = 560
d3 = require("d3@6")
import {Scrubber} from "@mbostock/scrubber"
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.
