Developer @Observable
Unlisted
Edited
Mar 22, 2023
cell = Plot.plot({
projection: "albers-usa",
color: { legend: true, scheme: "viridis" },
grid: true,
height: 700,
width: 900,
marginLeft: 70,
x: { nice: true },
y: { inset: 5 },
facet: { data: filteredData, y: "year" },
marks: [
Plot.geo(states),
Plot.density(filteredData, {
x: "longitude",
y: "latitude",
bandwidth: 15,
fill: "density",
opacity: 0.15
}),
Plot.dot(filteredData, {
x: "longitude",
y: "latitude",
fill: "black",
r: 1.5
}),
Plot.text(
states.features,
Plot.centroid({
text: (d) => d.properties.name,
fill: "currentColor",
dy: 40,
filter: (d) => d.properties.name.match(/^Louis/)
})
),
Plot.text(text_data, {
x: -100,
y: 45,
text: (d) => `Year: ${d.year}\nSlope: ${d3.format(".2f")(d.b0)}`,
dy: 10,
fy: "year",
fill: "black",
stroke: "white"
}),
Plot.linearRegressionY(filteredData, {
x: "longitude",
y: "value",
stroke: "red",
ci: 0,
opacity: 0.2
})
]
})
linearRegression = d3.regressionLinear()
.x(d => d.longitude)
.y(d => d.value)
function returnSlopes(data) {
var uniqueYears = [...new Set(filteredData.map(d => d.year))]
var slopeHolder =[]
var soh = new Object;
uniqueYears.forEach((d,i) =>
slopeHolder.push([d,linearRegression(data.filter(d => d.year==uniqueYears[i])).a]))
const slopes = slopeHolder.map(([year,b0]) => ({year,b0}))
return slopes
}
text_data = returnSlopes(filteredData)
function generateData(numRows) {
const data = [];
for (let i = 0; i < numRows; i++) {
// Generate random latitude and longitude values within the continental US
const latitude = Math.random() * (42 - 39) + 39;
const longitude = -1 * (Math.random() * (100 - 80) + 80);
// Generate a random value between 0 and 100
const value = Math.random() * 100;
const year = Math.floor(Math.random() * (2022 - 2018 + 1)) + 2018;
// Add the data row to the array
data.push({latitude, longitude,year, value});
}
return data;
}
data = generateData(300)
test@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
filteredData = data.filter(d => {
const point = [d.longitude, d.latitude];
return d3.geoContains(states, point);
})
states = topojson.feature(us, us.objects.states)
import { us } from "@observablehq/plot-geo";
d3 = require('d3@7','d3-regression@1','d3-array')
topojson = require('topojson')
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.
