d3 = require('d3@7')
src="https://d3js.org/d3.v7.min.js"
airportDelays = d3.json("https://raw.githubusercontent.com/e9d8v/cs448b/main/airports_delays.json", function(d) {
return {
// We parse the data into an array of csv objects. We could for example change the names of fields.
OriginAirport: d.origin_airport,
DelayRate: d.delay_rate,
NumFlights: d.flights_count
};
}).then(function(airportDelays) {
//Outside of Observable notebooks you would put all code to draw the graph here.
return airportDelays;
});
margin = ({top: 20, right: 0, bottom: 40, left: 50})
width = 800 - margin.left - margin.right
height = 600 - margin.top - margin.bottom
x = d3.scaleBand()
.domain(airportDelays.map(d => d.origin_airport))
.rangeRound([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(airportDelays, d => d.delay_rate)]).nice()
.rangeRound([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
// chart = {
// const svg = d3.create("svg")
// .attr("viewBox", [0, 0, width, height]);
// svg.append("g")
// .call(xAxis);
// svg.append("g")
// .call(yAxis);
// svg.selectAll("rect")
// .data(airportDelays)
// .join("rect")
// .attr("x", d => x(d.origin_airport))
// .attr("y", d => y(d.delay_rate))
// .attr("height", d => y(0) - y(d.delay_rate))
// .attr("width", x.bandwidth())
// .attr("fill", "steelblue")
// svg.selectAll("rect")
// .on("mouseover", (event, d) => {
// // Code to show tooltip
// })
// .on("mouseout", (event, d) => {
// // Code to hide tooltip
// });
// return svg.node();
// }
// SVG Canvas Setup
svg = d3.select(DOM.svg(width, height))
// Render the Bar Chart
svg.selectAll(".bar")
.data(airportDelays)
.enter().append("rect")
.attr("class", "bar")
.attr("x", d => x(d.origin_airport))
.attr("y", d => y(d.delay_rate))
.attr("width", x.bandwidth())
.attr("height", d => height - y(d.delay_rate))
.attr("fill", "steelblue")
.on("mouseover", function(d) {
tooltip.transition().duration(200).style("opacity", .9);
tooltip.html(d.origin_airport + "<br/>" + d.delay_rate)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition().duration(500).style("opacity", 0);
});
// Tooltip Setup for Interactivity
tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Add X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y Axis
svg.append("g")
.call(d3.axisLeft(y));
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.
