The avatar for @christophe-yamahata
Christophe Yamahata
Public
Edited
Oct 6, 2024
Paused
Fork of Temperature Contour Density Map
2 stars
8
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// ⚠ To enhance the comparison of the datasets and effectively highlight temperature variations,
// we should utilize the overall domain derived from both datasets to maintain consistent scales.
//
// The adapted color scale intends to utilize the overall domain derived from both datasets.
// For this purpose, the domain ΔT is defined between [-DeltaT_max°F, +DeltaT_max°F] (DeltaT_max = 4.5°F).
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ramp(linearColorScale)
Insert cell
Insert cell
// dataDomain = d3.extent(CSV_data.map(d => +d['Temperature Change'] * factor_temperature))
dataDomain = d3.extent(mergedData.map(d => +d['Temperature Change'] * factor_temperature))
Insert cell
// we use d3.range to make even spaced bins of our temperature values
bins = d3.range(
...dataDomain, // it should span the entire domain
(dataDomain[1] - dataDomain[0]) / density_thresholds.length) // and be evenly spaced, but the same number as our density thresholds
Insert cell
zero_estimation_index = d3.bisect(bins, 0)
Insert cell
// quantz = d3.quantize(linearColorScale, (density_thresholds.length - zero_estimation_index)*2)
quantz = {
const domain = [-DeltaT_max*factor_temperature, DeltaT_max*factor_temperature]; // Temperature change range set to [-4.5°F , +4.5°F]
const minDeltaT = d3.min(domain);
const maxDeltaT = d3.max(domain);
const a = maxDeltaT - minDeltaT;
const b = minDeltaT;
return bins.map(bin => linearColorScale((bin-b)/a))
}
Insert cell
Insert cell
threshold_index_domain = d3.range(-zero_estimation_index, density_thresholds.length - zero_estimation_index, 1)
Insert cell
thresholdColorScale = d3.scaleOrdinal()
.domain(density_thresholds)
.range(quantz.slice(-threshold_index_domain.length))
Insert cell
Insert cell
fileMap = [
{name: "1901-2023", file: FileAttachment("rate_temperature_change_USA_1901-2023.csv") },
{name: "1901-2015", file: FileAttachment("rate_temperature_change_USA_1901-2015.csv") },
]
Insert cell
Insert cell
Insert cell
Insert cell
//d3.json("https://gist.githubusercontent.com/efrymire/40006463cad8b7fce053ceb000ad0391/raw/320e1518773ef30330643045500e161659e92d42/climate_divisions.topojson")
divisionsTopoJSON = FileAttachment("climate_divisions.topojson").json()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more