32:Tdb6,md`

## Design Process Our original static visualization encoded departure delay magnitude for the 20 busiest airports with the size of squares on a map. Feedback from class suggested that the encoding was confusing because the size of the square appeared to relate to airport traffic rather than departure delay, and the map appeared sparse. Below is our first static visualization:

We incorporated this feedback by encoding the size of circles with the number of departures and color of circle with magnitude of average delay. However, we found that the delays were usually so close to zero that the circles were either very light orange or very light blue, indistinguishable from each other. Text labels for average delay proved to be too busy, and darkening the color scheme for the blue circles created the false appearance of very high magnitude earliness. The following in-process image shows how crowded the map got when adding text annotations to airports with negative delays (early departures).

text-labels-for-negative-delays-too-crowded

Even when just displaying airport codes, though less cluttered, it was difficult to absorb the information through both text and bubbles. We learned here that consistency of representation was important.

Our final solution was to make the circles “glow” -- every circle that represented positive delay was given a thin orange border, one of zero delay would have a white border, and one with negative delay would have blue. We also did some data preprocessing to eliminate airports that fell outside our geographic range (50 states). We also changed the size range of our bubbles to make smaller airports visible. In the top left of the following image, you can see hints of airports that are out of bounds. We eliminated this data for our visualization.

We abandoned the idea of using a horizon graph because although they are useful for diverging data, the frequency and magnitude of early departures would require a very high level of granularity to perceive. Moreover, the map allowed us to see the spatial clusters (such as in the Northwest) of early airports. Finally, the original tooltip we chose appeared to look like a general Google Chrome hover tooltip and was slow to respond to mouse movement. We reduced the lag time and reformatted the tooltip to reflect the airport code, name, and average departure delay in separate lines. Below is the original tooltip:

In addition to the annotation on hover, we added an interactive slider to illustrate trends, particularly around departure delays increasing in winter months. We met several times throughout the last three weeks to collaborate in-person on the Observable notebook and our writeup. `33:T20ad,class Chart { constructor(dataMap, radius, fill = {}) { this.month = 1; const data = Array.from(dataMap).map((d) => d[1]); const interval = 500; // milliseconds const width = 960; const height = 600; const path = d3.geoPath(); const projection = d3.geoAlbersUsa().scale(1280).translate([width / 2, height / 2]); this.radius = radius; this.fill = fill; this.isSilent = (!radius.scaleData.length); this.radiusTransition = d3.transition().duration(interval); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("font-family", "sans-serif") .style("height", "auto"); const tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("background", "#fcfcfc") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden"); svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "#ccc") .attr("d", path); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); const legend = svg.append("g") .attr("fill", "#777") .attr("transform", `translate(${width - 55},${height - 8})`) .attr("text-anchor", "middle") .style("font-size", "10px"); legend.append("text") .attr("y", 4) .text(() => (this.isSilent) ? "" : "Number of Departures"); const legend2 = legend.selectAll("g") .data(radius.scaleData) .enter().append("g"); legend2.append("circle") .attr("fill", "none") .attr("stroke", "#ccc") .attr("cy", d => -this.radius.scale(d) - 10) .attr("r", this.radius.scale); legend2.append("text") .attr("y", d => -2 * this.radius.scale(d) - 10) .attr("dy", "1.3em") .text(d3.format(".1s")); // Create graphic title this.titleText = svg.append("text") .attr("x", width / 2) .attr("y", 15) .attr("text-anchor", "middle") .attr("font-size", "16px"); this.circles = svg.append("g") .attr("stroke", "#f7976a") .attr("opacity", () => (this.fill.scale !== undefined) ? 1 : 0.5) .attr("stroke-width", 1.0) .selectAll("circle") .data(data).enter() .append("circle") .attr("transform", d => `translate(${projection(d.geometry.coordinates)})`) .attr("r", 0) .on("mouseover", d => { var circle_name = d.properties.name; var circle_code = d.properties.code; var circle_month = this.month; console.log(this.month+"!!!!!"); var circle_delay = truncate(d.properties.delays[circle_month]); tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "4px solid " + "#fcfcfc"); tooltip.append("div") .text(d => "Airport Name: " + circle_name) .style("font-family", "sans-serif") .style("font-size", "10px") .style("color", "#474545"); tooltip.append("div") .text(d => "Airport Code: " + circle_code) .style("font-family", "sans-serif") .style("font-size", "10px") .style("color", "#474545"); tooltip.append("div") .text(d => "Delay: " + circle_delay + " mins") .style("font-family", "sans-serif") .style("font-size", "10px") .style("color", "#474545"); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-20) + "px").style("left", (d3.event.pageX+18) + "px"); }) .on("mouseout", function(d) { tooltip.style("visibility", "hidden"); }); this.circle_annotation = svg.append("g") .attr("stroke", "#00f") .attr("opacity", () => 1.0) .attr("fill", "none") .attr("stroke-width", 1.0) .selectAll("circle") .data(data).enter() .append("circle") .attr("transform", d => `translate(${projection(d.geometry.coordinates)})`) .attr("r", 0); // annotations this.annotations = svg.append("g") .selectAll("text") .data(data).enter() .append('text') .attr("transform", d => `translate(${projection(d.geometry.coordinates)})`) .attr('font-size', 10) .attr('font-family', 'sans-serif'); this.labels = this.circles.append("title"); if (this.fill.scale) { this.drawRateScale(width, height, svg); } this.div = DOM.element("div"); const input = this.drawInput(1, 12); console.log(input.value + "?????"); this.div.appendChild(svg.node()); this.div.appendChild(input); } // constructor drawInput(min, max) { /** * Create range and number input for stepping through map data * Hat tip to @mbostock https://beta.observablehq.com/@mbostock/linked-inputs */ const div = html` `; const range = div.querySelector("[type=range]"); const number = div.querySelector("[type=number]"); div.value = range.value = number.value = min; const update = _.debounce(() => { this.update(div.value); }, 300); range.addEventListener("input", () => { number.value = div.value = range.valueAsNumber; update(); }); number.addEventListener("input", () => { range.value = div.value = number.valueAsNumber; update(); }); return div; } drawRateScale(width, height, svg) { const margin = { bottom: 150, right: 50, left: 10, top: 225} ; const barWidth = 15; const linearGradient = svg.append("defs").append("linearGradient") .attr("id", "linear-gradient") .attr("x1", "0%") .attr("y1", "100%") .attr("x2", "0%") .attr("y2", "0%"); linearGradient.selectAll("stop") .data(this.fill.scale.ticks().map((t, i, n) => ({ offset: `${100*i/n.length}%`, color: this.fill.scale(t) }))) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); const axisScale = d3.scaleLinear() .domain(this.fill.scale.domain().reverse()) .range([margin.top, height - margin.bottom]); const ticks = g => g .attr("class", "y-axis") .attr("fill", "#777") .call(d3.axisLeft(axisScale) .ticks(height / 80) .tickSize(-barWidth)); // this changes the bar const legend = svg.append("g") .attr("fill", "#777") .attr("transform", `translate(${width - margin.right - barWidth + 2},12)`); legend.append("text") .attr("y", height - margin.bottom + 15) .attr("x", -33) .attr("text-align", "center") .attr("font-size", "10px") .attr("font-family", "sans-serif") .text("Average Departure") .append("tspan") .attr("dy", "10px") .attr("dx", "-76px") .text("Delay (minutes)") legend.append("g") .append("rect") .attr('transform', `translate(0,${margin.top})`) .attr("height", height - margin.top - margin.bottom) .attr("width", barWidth) .style("fill", "url(#linear-gradient)"); legend.append("g").call(ticks); } update(currMonth = 1) { /* * Update chart with data from a new month */ this.circles .transition(this.radiusTransition) .attr("stroke", d => {if (d.properties.delays[currMonth] < 0) {return "#7eccf7"} else if (d.properties.delays[currMonth] == 0) {return "#fff"} }) .attr("fill", d => { if (this.fill.scale) { return this.fill.scale(d.properties[this.fill.metric][currMonth]); } return "brown"; }) .attr("r", d => this.radius.scale(d.properties[this.radius.metric][currMonth])) this.titleText.text(months[currMonth - 1]); this.month = currMonth; console.log(this.month + " THIS MONTH IS UPDATED"); } // update method } // Chart class34:[] 30:{"title":"Average Departure Delays from U.S. Airports per Month","cells":[{"id":0,"value":"md`# Average Departure Delays from U.S. Airports per Month`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"submission()","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`**Authors:** Vasudha Rengarajan (vr2375), Jessie Liu (jll2219), Nikhil Jain (nsj2112)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`\nThis visualization displays departure delays from US Airports in 2008. The slider changes the month displayed, and the diverging color scale assigns shades of red-orange to airports with positive average delays and shades of blue to airports with negative average delays (early departures). Size of the circle encodes the number of flights departing an airport that month. Our dataset was from the U.S. Bureau of Transportation Statistics (BTS) from 2008, which we found through the American Statistical Association’s [2009 Data Expo](http://stat-computing.org/dataexpo/2009/the-data.html). \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`\n## Resources \n[Original data source](http://stat-computing.org/dataexpo/2009/the-data.html)\n\n[Color legend](https://github.com/d3/d3-scale-chromatic)\n\n[Mapping and slider](https://beta.observablehq.com/@stvkas/tsa-claims-with-passenger-count-by-airport)\n\n[Tooltip annotations](https://beta.observablehq.com/@ceguiluzrosas/comparison-in-word-usage-between-democrats-and-republican)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = new Map((await d3.csv(\"https://gist.githubusercontent.com/vizbiz/2dfba0aac385283840f165d6905d4f89/raw/b79bb350d6aacf3f35203f7f445f3aa9eaa172a6/final.csv\", (d) => {\n let delays = {},\n flights = {},\n max = 0;\n \n for (let i = 1; i <= 12; i++) {\n delays[i] = +d[\"delay_\" + i];\n flights[i] = +d[\"flights_\" + i];\n console.log(flights[i])\n max = (flights[i] > max) ? flights[i] : max;\n }\n \n // GeoJSON Feature schema\n return {\n \"type\": \"Feature\",\n \"geometry\" : {\n \"type\": \"Point\",\n \"coordinates\": [d.Longitude, d.Latitude]\n },\n \"properties\": {\n \"delays\": delays,\n \"flights\": flights,\n \"code\": d.code,\n \"max\": max,\n \"name\": d.name\n }\n };\n}))\n.sort((a, b) => b.properties.max - a.properties.max)\n.map(d => [d.properties.code.toLowerCase(), d]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"submission = function() {\n const radius = {\n scale: d3.scaleSqrt()\n .domain([0, 37000])\n .range([3, 40]),\n scaleData: [5000, 20000, 40000],\n metric: \"flights\"\n };\n \n const fill = {\n scale: d3.scaleSequential(d3.interpolateRdBu)\n .domain([60, -60]),\n metric: \"delays\"\n };\n \n const chart = new Chart(data, radius, fill);\n \n chart.update(1);\n \n return chart.div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"_ = require(\"underscore\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"months = ['January 2008', 'February 2008', 'March 2008', 'April 2008', 'May 2008', 'June 2008', 'July 2008', 'August 2008', 'September 2008', 'October 2008', 'November 2008', 'December 2008']","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"truncate = d3.format(\".1f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"d3_svg_annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}