Public
Edited
May 11
all_data_merged = FileAttachment("all_data_merged.csv").csv({typed: true})
fires = FileAttachment("California_Fire_Incidents.csv").csv({typed: true})
Plot.plot({
fit: californiaCounties,
marks: [
Plot.geo(californiaCounties, {
stroke: "black",
fill: "#794D82",
opacity: 0.15
}),
Plot.text(
californiaCounties.features.filter(d =>
(fireCounts[d.properties.CountyName] || 0)
),
{
text: d => d.properties.CountyName,
x: d => d.properties.CENTROID_X || d3.geoCentroid(d)[0],
y: d => d.properties.CENTROID_Y || d3.geoCentroid(d)[1],
fill: "black",
fontSize: 8,
fontWeight: "bold",
textAnchor: "middle"
})
]
})
all_data_merged_filter
Type Table, then Shift-Enter. Ctrl-space for more options.
fires_temperature_per_county
X
Avg Air Temp (F)
Y
count
Name
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
line
Type Chart, then Shift-Enter. Ctrl-space for more options.
all_data_merged_filter
X
Started
Y
count
Name
Color
sum
Avg Air Temp (F)
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.rectY(
all_data_merged_filter,
Plot.binX(
{ y: "count" },
{ x: "Started", y: "Avg Air Temp (F)", tip: true }
)
),
Plot.line(
all_data_merged_filter,
Plot.binX(
{ y: "mean" }, // mean of temperature
{ x: "Started", y: "Avg Air Temp (F)" }
)
),
Plot.ruleY([0])
]
})
Plot.plot({
fit: californiaCounties,
color: {
type: "quantize",
scheme: "Purples",
domain: [0, d3.max(Object.values(fireCounts))]
},
marks: [
Plot.geo(californiaCounties, {
fill: d => (fireCounts[d.properties.CountyName] || 0),
stroke: "lightgrey",
title: d => `${d.properties.CountyName}: ${fireCounts[d.properties.CountyName] || 0} fires` // no braces needed
}),
Plot.dot(fires_cleaned, {
x: "Longitude",
y: "Latitude",
r: 1.5,
fill: "grey",
opacity: 0.5
}),
Plot.text(californiaCounties.features.filter(d => (fireCounts[d.properties.CountyName] || 0) > 20), {
text: d => d.properties.CountyName,
x: d => d.properties.CENTROID_X || d3.geoCentroid(d)[0],
y: d => d.properties.CENTROID_Y || d3.geoCentroid(d)[1],
fill: "black",
fontSize: 10,
fontWeight: "bold",
textAnchor: "middle"
})
]
})
viewof county_select = Inputs.select(new Set(fires.map((d) => d.Counties)), {
label: "Select one",
})
chartonet = Plot.plot({
color: {
legend: true, // Ensures legend is displayed
type: "categorical",
domain: ["True", "False"],
range: ["purple", "orange"]
},
grid: true, // Enables gridlines
x: {
label: "Year" // Custom X-axis label
},
y: {
label: "Acres Burned" // Custom Y-axis label
},
marks: [
Plot.dot(fires.filter(d => d.Counties == county_select), {
x: "ArchiveYear",
y: "AcresBurned",
fill: "MajorIncident",
r: 5, // Vary radius based on age
//title: d => `${d.ArchiveYear}: ${d.ConditionStatement}`, // Tooltip showing more info
opacity: 0.5
}),
Plot.text(fires.filter(d => d.Counties == county_select), {
x: "ArchiveYear",
y: "AcresBurned",
//text: d => d.ArchiveYear,
dx: 5 // Shifts text slightly right
})
]
});
viewof metric = Inputs.select(new Set(fires.map((d) => d.Counties)), {
label: "Select one",
})
Plot.plot({
width: 800,
marginBottom: 50,
x: {
label: "Year",
transform: (d) => String(d)
},
y: {
label: "Injuries"
},
marks: [
Plot.barY(fires,
Plot.groupX({ y: "sum" }, {
x: "ArchiveYear",
y: "Injuries",
tip: true,
fill: "#794D82"
}))
]
});
Plot.plot({
width: 800,
marginBottom: 50,
x: {
label: "Year",
transform: (d) => String(d)
},
y: {
label: "Major Incidents"
},
marks: [
Plot.barY(fires.filter(d => d.MajorIncident === "True"),
Plot.groupX({ y: "count" }, {
x: "ArchiveYear",
tip: true,
fill: "#794D82"
}))
]
});
Plot.plot({
width: 1000,
marginBottom: 120,
marks: [
Plot.barY(
fires,
Plot.groupX({ y: "count" }, {
x: "Counties",
y: "Counties",
tip: true,
fill: "#794D82"
})
),
Plot.ruleY([0]),
],
x: {
tickRotate: -45
}
})
conditions = FileAttachment("monthly_weather_conditions_california.csv").csv({typed: true})
Inputs.table(fires)
fires_clean = fires.map(d => ({
...d,
County: d.County ? d.County.trim().toLowerCase() : null
}))
conditions_clean = conditions.map(d => ({
...d,
County: d.County ? d.County.trim().toLowerCase() : null
}))
merged = fires_clean.map(fire => ({
...fire,
...conditions_clean.find(cond => cond.County === fire.County)
}))
fires_cleaned = fires.filter(d =>
d.Longitude > -125 && d.Longitude < -114 &&
d.Latitude > 32 && d.Latitude < 43
)
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.
