UW | Data Visualization TA
data = {
const data = [];
// https://data.giss.nasa.gov/gistemp/tabledata_v3/GLB.Ts+dSST.csv
await d3.csvParse(await FileAttachment("temperatures1@1.csv").text(), (d, i, columns) => {
for (let i = 1; i < 13; ++i) { // pivot longer
data.push({date: new Date(Date.UTC(d.Year, i - 1, 1)), value: +d[columns[i]]});
}
});
return data;
}
import { Table } from "@observablehq/inputs"
Table(data.slice(0, 5))
// Declare the chart dimensions and margins.
width
height = 500
margins = ({
top: 50,
right: 30,
bottom: 30,
left: 40
})
// Declare the x (horizontal position) scale.
x = d3.scaleUtc(d3.extent(data, d => d.date), [margins.left, width - margins.right]);
// Declare the y (vertical position) scale.
y = d3.scaleLinear()
.domain(d3.extent(data, d => d.value)).nice()
.range([height - margins.bottom, margins.top])
// Declare the area generator.
area = d3.area()
.curve(d3.curveStep)
.x(d => x(d.date))
.y0(y(0))
.y1(d => y(d.value))
emptychart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80))
.call(g => g.select(".domain").remove());
svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y).ticks(null, "+"))
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line")
.clone()
.attr("x2", width - margins.right - margins.left)
.attr("stroke-opacity", d => d === 0 ? 1 : 0.1))
.call(g => g.append("text")
.attr("fill", "#000")
.attr("x", 5)
.attr("y", margins.top)
.attr("dy", "0.32em")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Anomaly (°C)"))
return svg.node();
}
areaChart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.datum(data)
svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80))
.call(g => g.select(".domain").remove());
svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y).ticks(null, "+"))
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line")
.clone()
.attr("x2", width - margins.right - margins.left)
.attr("stroke-opacity", d => d === 0 ? 1 : 0.1))
.call(g => g.append("text")
.attr("fill", "#000")
.attr("x", 5)
.attr("y", margins.top)
.attr("dy", "0.32em")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Anomaly (°C)"));
// Append a path for the area (under the axes).
svg.append("path")
.attr("fill", "#f49f0a")
.attr("d", area(data));
return svg.node();
}
// Declare the area generator.
areaAbove = d3.area()
.curve(d3.curveStep)
.x(d => x(d.date))
.y0(y(0))
.y1(function(d) {if (d.value >= 0) {return y(d.value)} else {return y(0)} })
areaBelow = d3.area()
.curve(d3.curveStep)
.x(d => x(d.date))
.y0(y(0))
.y1(function(d) {if (d.value < 0) {return y(d.value)} else {return y(0)} })
changeColorChart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.datum(data)
svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80))
.call(g => g.select(".domain").remove());
svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y).ticks(null, "+"))
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line")
.clone()
.attr("x2", width - margins.right - margins.left)
.attr("stroke-opacity", d => d === 0 ? 1 : 0.1))
.call(g => g.append("text")
.attr("fill", "#000")
.attr("x", 5)
.attr("y", margins.top)
.attr("dy", "0.32em")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Anomaly (°C)"));
// Append a path for the area (under the axes)
svg.append("path")
.style("fill", "#f49f0a")
.attr("d", areaAbove(data))
svg.append("path")
.style("fill", "lightblue")
.attr("d", areaBelow(data))
return svg.node();
}
finalChart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.datum(data)
svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80))
.call(g => g.select(".domain").remove());
svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y).ticks(null, "+"))
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line")
.clone()
.attr("x2", width - margins.right - margins.left)
.attr("stroke-opacity", d => d === 0 ? 1 : 0.1))
.call(g => g.append("text")
.attr("fill", "#000")
.attr("x", 5)
.attr("y", margins.top)
.attr("dy", "0.32em")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Anomaly (°C)"));
// Append a path for the area (under the axes)
svg.append("path")
.style("fill", "#f49f0a")
.attr("d", areaAbove(data))
svg.append("path")
.style("fill", "lightblue")
.attr("d", areaBelow(data))
// Add a title
const title = svg.append("g")
.append("text")
.attr("x", width / 2)
.attr("y", (margins.top / 2))
.attr("text-anchor", "middle")
.attr("front-weight", "bold")
.attr("font-family", "Helvetica Neue, Arial")
.attr("font-size", "20px")
.text("Global temperature change, 1880 - 2020")
return svg.node();
}
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
import {toc} from "@jonfroehlich/collapsible-toc"
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.
