UW | Data Visualization TA
presentChart = {
const height = 600;
const margins = ({
top: 20,
right: 20,
bottom: 30,
left: 40
})
const x = d3.scaleLinear()
.domain(d3.extent(data, d => d[xVariable]))
.range([margins.left, width - margins.right])
const y = d3.scaleLinear()
.domain(d3.extent(data, d => d[yVariable])).nice()
.range([height - margins.bottom, margins.top])
const max = d3.max(data, d => d[yVariable])
const color = d3.scaleOrdinal(d3.schemeDark2)
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
const xAxis = svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80))
.call(g => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", width)
.attr("y", margins.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(`${xVariable}`))
svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y))
.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(`${yVariable}`));
const circles = svg.append("g")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.selectAll()
.data(data)
.join("circle")
circles
.attr("cx", d => x(d[xVariable]))
.attr("cy", d => y(d[yVariable]))
.attr("fill", d => color(d[colorVariable]))
.attr("r", 2.5)
.attr("opacity", 0.8)
return Object.assign(svg.node(), {scales: {color}})
}
import {legend} from "@d3/color-legend"
data = FileAttachment("stationAggYearMonthly2011_2020@1.csv").csv()
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.
