UW | Data Visualization TA
EVdata = FileAttachment("Electric_Vehicle_Population_Data@1.csv").csv({typed: true})
import { Table } from "@observablehq/inputs"
Table(EVdata.slice(0, 5))
rollupEVdata = d3.rollup(d3.filter(EVdata, d => d.State == "WA"), v => v.length, d => d.County)
aggData = d3.filter(Array.from(rollupEVdata, ([county, count]) => ({ county, count })), d => d.count > 600)
Table(aggData.slice(0, 5))
width
height = 500
margins = ({
top: 30,
right: 10,
bottom: 20,
left: 45
})
x = d3.scaleBand()
// .domain: data range, sorted first by electric vehicle population, and then county name
.domain(d3.groupSort(aggData, ([d]) => -d.count, (d) => d.county))
// .range: canvas range
.range([margins.left, width - margins.right])
// We are using a little bit of padding to make the graph look nicer
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(aggData, d=> d.count)])
.range([height - margins.bottom, margins.top])
.nice()
emptyChart = {
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;")
return svg.node()
}
xyChart = {
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
// Add x-axis and label
svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
// Add y-axis and label
svg.append("g")
.attr("transform", `translate(${margins.left}, 0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
.call(g => g.select(".domain").remove()) // style: remove the axis but preserve the ticks
.call(g => g.append("text")
.attr("x", -margins.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Count"));
return svg.node()
}
barChart = {
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
// Add x-axis and label
svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
// Add y-axis and label
svg.append("g")
.attr("transform", `translate(${margins.left}, 0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
.call(g => g.select(".domain").remove()) // style: remove the axis but preserve the ticks
.call(g => g.append("text")
.attr("x", -margins.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Count"));
// Add bars
const bars = svg.append("g")
.selectAll()
.data(aggData)
.join("rect")
.attr("x", d => x(d.county))
.attr("y", d => y(d.count))
.attr("height", d => y(0) - y(d.count)) // must be y(0) - y(d.count)
.attr("width", x.bandwidth())
.attr("fill", "pink")
return svg.node()
}
labelChart = {
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
// Add y-axis and label
svg.append("g")
.attr("transform", `translate(${margins.left}, 0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
.call(g => g.select(".domain").remove()) // remove the axis but preserve the ticks
.call(g => g.append("text")
.attr("x", -margins.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Count"));
const bars = svg.append("g")
.selectAll()
.data(aggData)
.join("rect")
.attr("x", d => x(d.county))
.attr("y", d => y(d.count))
.attr("height", d => y(0) - y(d.count)) // must be y(0) - y(d.country)
.attr("width", x.bandwidth())
.attr("fill", "pink")
// Add x-axis and label
svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
// Append a label for each letter.
const label = svg.append("g")
.selectAll()
.data(aggData)
.join("text")
.attr("x", (d) => x(d.county) + x.bandwidth()/2)
.attr("y", (d) => y(d.count))
.attr("dx", +15)
.attr("dy", -5)
.text((d) => d.count)
.attr("font-size", 12)
.attr("fill", "black")
.attr("text-anchor", "end")
// 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("Electric vehicle ownership distribution, Washington State")
return svg.node()
}
tooltipChart = {
// Create the SVG container
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
// Add y-axis and label
svg.append("g")
.attr("transform", `translate(${margins.left}, 0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
.call(g => g.select(".domain").remove()) // remove the axis but preserve the ticks
.call(g => g.append("text")
.attr("x", -margins.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Count"))
const barColor = "pink"
const barHighlightColor = "lightblue"
const bars = svg.append("g")
.selectAll()
.data(aggData)
.join("rect")
.attr("x", d => x(d.county))
.attr("y", d => y(d.count))
.attr("height", d => y(0) - y(d.count)) // must be y(0) - y(d.country)
.attr("width", x.bandwidth())
.attr("fill", barColor)
.attr("class", "bars")
const label = svg.append("text")
bars
.on("mouseover", function(e,d){
d3.selectAll(".bars")
.transition()
.duration(200)
.style("opacity", 0.5)
d3.select(this)
.transition()
.duration(200)
.attr("fill", barHighlightColor)
.attr("opacity", 1)
const labelText = `${d.count}`
label
.attr("display", null)
.attr("font-size", "13px")
.style("opacity", 1)
.attr("transform", `translate(${d3.select(this).attr("x")},${d3.select(this).attr("y")})`)
.attr("dx", +33)
.attr("dy", -5)
.text(d => labelText)
.attr("text-anchor", "end")
})
.on("mousemove", function(e, d){
d3.selectAll(".bars")
.transition()
.duration(10)
.attr("fill", barColor)
.style("opacity", 1)
d3.select(this)
.transition()
.duration(10)
.attr("fill", barHighlightColor)
.attr("opacity", 1)
})
.on("mouseleave", function(e, d){
d3.selectAll(".bars")
.transition()
.duration(200)
.attr("fill", barColor)
.style("opacity", 1)
label
.attr("display", "none")
})
// Add x-axis and label
svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
// 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("Electric vehicle ownership distribution, Washington State")
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.
