31:T2560,class Chart { constructor(dataMap, radius, fill = {}, detail) { 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.detail = detail; 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") // (this.fill.scale !== undefined) ? 1 : 0.2) .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(currYear = 1) { /* * Update chart with data from a new year */ this.circles .transition(this.radiusTransition) .attr("stroke", d => {if (d.properties.delays[currYear] < 0) {return "#7eccf7"} else if (d.properties.delays[currYear] == 0) {return "#fff"} }) .attr("fill", d => { if (this.fill.scale) { return this.fill.scale(d.properties[this.fill.metric][currYear]); } return "brown"; }) .attr("r", d => this.radius.scale(d.properties[this.radius.metric][currYear])) // if (!this.isSilent) { // this.labels // .text(d => d.properties.name + " (" + d.properties.code + "): " + truncate(d.properties.delays[currYear]) + " min delay") // } this.titleText.text(months[currYear - 1]); this.month = currYear; console.log(this.month + " THIS MONTH IS UPDATED"); // TEXT ANNOTATION // With the minutes early displayed (truncated the minutes - for readability) // this.annotations.text(d => {if (d.properties.delays[currYear] < 0) {return d.properties.code + ": " + truncate(d.properties.delays[currYear]) + " min"}}); // Without minutes displayed, just the airport code //this.annotations.text(d => {if (d.properties.delays[currYear] < 0) {return d.properties.code}}); // LITTLE BLUE RINGS // this.circle_annotation.attr("r", d => this.radius.scale(d.properties[this.radius.metric][currYear] + 2)); // this.circle_annotation.attr("r", d => {if (d.properties.delays[currYear] < 0){return this.radius.scale((d.properties[this.radius.metric][currYear])*(-1) + 2000)}}); // this.circle_annotation.attr("r", d => {if (d.properties.delays[currYear] < 0){return this.radius.scale((-1*(d.properties[this.radius.metric][currYear])))}}); } // update method } // Chart class32:[] 2f:{"title":"","cells":[{"id":1445,"value":"submission()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"md`Data for this notebook was imported from a [Google Sheet](https://docs.google.com/spreadsheets/d/1QrdRzn-mYCx1iOMiN9ln9x6X-cttlivnGvnXAsL7pIY/edit?usp=sharing). Although the work joining and aggregating raw data was done in [an Excel workbook](https://1drv.ms/f/s!Agom-EMi8B6RqQJNoA37lXV_nzhA).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"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":1797,"value":"dataByYear = {\n var out = [];\n for (let year = 1; year < 12; year++) {\n let flights = [];\n let delays = [];\n for (let airport of data.values()) {\n flights.push(airport.properties.flights[year]);\n delays.push(airport.properties.delays[year]); \n }\n out.push({\n year: year,\n delays: delays,\n flights: flights\n });\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1572,"value":"md`\nThe notebook variable \\`\\`claimsCount\\`\\` may be less than what's found in other people's anaysis because the \\`\\`claims\\`\\` data includes only data from airports in the U.S. with both passenger and claims totals for all years.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"claimsCount = {\n let sum = 0;\n for (let airport of data.values()) {\n for (let year in airport.properties.claims) {\n sum += airport.properties.claims[year]; \n }\n }\n return sum;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"formatNumber = d3.format(\",.0f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"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 detail = (d, year, format) => format(d.properties.rates[year]) + \" claims / 1M passengers\";\n const detail = (d, year, format) => \"\";\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, detail);\n \n chart.update(1);\n \n return chart.div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"_ = require(\"underscore\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1967,"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":2006,"value":"truncate = d3.format(\".1f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"d3_svg_annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}