28:null 29:["$","title",null,{"children":"Map | Claire Xueqi Ren | Observable"}] 2e:T16cb,{ var margin = {top: 20, right: 30, bottom: 30, left: 60}, width = 800 - margin.left - margin.right, height = 600 - margin.top - margin.bottom; var svg = d3.select("#plot") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var states = null; var projection = d3.geoAlbers(); d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/us.json").then ( function(map) { var isContinental = function(d) { var id = +d.id; return id < 60 && id !== 2 && id !== 15; }; map.objects.states.geometries = map.objects.states.geometries.filter(isContinental); states = topojson.feature(map, map.objects.states); projection.fitSize([width, height], states); var base = svg.append("g").attr("class", "basemap"); var path = d3.geoPath(projection); base.datum(states) .append("path") .attr("class", "land") .attr("d", path) .attr("fill", "#dddddd"); var isInterior = function(a, b) { return a !== b; }; base.append("path") .attr("class", "border interior") .attr("d", path(topojson.mesh(map, map.objects.states, isInterior))) .attr("stroke", "white") .attr("fill", "#dddddd"); d3.csv("https://raw.githubusercontent.com/caz2114/datavis-hw5/master/data/airports-lat-long-2.csv").then ( function(airports) { airports = airports.filter(function(d) { return d3.geoContains(states, [d.longitude, d.latitude]); }); airports.forEach(function(d) { var coords = projection([d.longitude, d.latitude]); d.x = coords[0]; d.y = coords[1]; }); svg.append("g").attr("class", "airports") .selectAll("g.airports") .data(airports) .enter() .append("circle") .attr("r", 4) .attr("cx", function(d){ return d.x;}) .attr("cy", function(d){ return d.y;}) .style("fill", "white") .style("opacity", 0.6) .style("stroke", "#252525"); d3.csv("https://raw.githubusercontent.com/caz2114/datavis-hw5/master/data/2001-09-11-cleaned-2.csv").then ( function(flights) { flights.forEach(function(d) { var coords = projection([d.longitude, d.latitude]); d.x = coords[0]; d.y = coords[1]; }); var drawline = d3.line() .curve(d3.curveBundle.beta(0.5)) .x(function(d) {return d.x; }) .y(function(d) {return d.y; }); var multiLineData = null; var lineColor = function(d) { if (parseInt(d[0].cancelled) == 1) { return "red"; } if (parseInt(d[0].diverted) == 1) { return "blue"; } return "grey"; }; function drawFlights(data) { svg.selectAll(".flights").remove(); multiLineData = d3.nest() .key(d => d.id) .entries(data); svg.append("g").attr("class", "flights") .selectAll(".flights") .data(multiLineData) .enter() .append("path") .attr("d", function(d){ return drawline(d.values);}) .attr("stroke", function(d){ return lineColor(d.values);}) .attr("stroke-width", "0.5px") .attr("opacity", 0.5); }; function filterFlights(time) { var newData = flights.filter(function(d) { return Math.floor(d.crs_dep_time/100) == time; }); drawFlights(newData); }; filterFlights(0); d3.select("#add").on("click",function(){ var time = document.getElementById("show_time").innerText.split(":")[0]; if (parseInt(time) == 23) { return; } var newtime = "" + (parseInt(time)+1); filterFlights(newtime); d3.select('#show_time').text(newtime+":00-"+(parseInt(newtime)+1)+":00"); document.getElementById("slider").value = newtime; }); d3.select("#minus").on("click",function(){ var time = document.getElementById("show_time").innerText.split(":")[0]; if (parseInt(time) == 0) { return; } var newtime = "" + (parseInt(time)-1); filterFlights(newtime); d3.select('#show_time').text(newtime+":00-"+time+":00"); document.getElementById("slider").value = newtime; }); d3.select("#slider").on("change", function(d){ var time = this.value; var time2 = parseInt(time) + 1; filterFlights(time); d3.select('#show_time').text(time+":00-"+(parseInt(time)+1)+":00"); }); var legend_keys = ["normal", "cancelled", "diverted"]; var colorScale = d3.scaleOrdinal() .domain(legend_keys) .range(["grey", "red", "blue"]); var lineLegend = svg.selectAll(".lineLegend") .data(legend_keys) .enter().append("g") .attr("class","lineLegend") .attr("transform", function (d,i) { return "translate(" +width*0.9 + "," + (i*20)+")"; }); lineLegend.append("text").text(function (d) {return d;}) .attr("transform", "translate(20,10)"); //align texts with boxes lineLegend.append("rect") .attr("fill", function (d, i) {return colorScale(d); }) .attr("width", 10) .attr("height", 10); }); }); }); }2f:[] 2c:{"id":"82b388ba69790bfb","slug":"map","title":"Map","thumbnail":"f629b59ab52d114cbaed717b02c2467a3e52304e321152f60ac8c3a0312ca242","access_level":"public","create_time":"$D2019-04-25T08:46:17.395Z","update_time":"$D2019-04-26T23:44:02.696Z","view_time":null,"first_public_time":"$D2019-04-27T14:23:41.117Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"6b579d71a5a94066","login":"clairexueqi","name":"Claire Xueqi Ren","avatar_url":"https://avatars-next.observableusercontent.com/1b2b1d49293ec83911e9e4f58fa3361b981e7fbd601b6198d3c986ad1f4a3807","tier":"starter_2024"},"version":163,"publish_version":163,"role":null,"authored":false,"authors":[{"type":"individual","id":"8367bce09bb979be","login":"clairexueqi","name":"Claire Xueqi Ren","avatar_url":"https://avatars-next.observableusercontent.com/1b2b1d49293ec83911e9e4f58fa3361b981e7fbd601b6198d3c986ad1f4a3807","tier":null}],"members":[{"type":"individual","id":"8367bce09bb979be","login":"clairexueqi","name":"Claire Xueqi Ren","avatar_url":"https://avatars-next.observableusercontent.com/1b2b1d49293ec83911e9e4f58fa3361b981e7fbd601b6198d3c986ad1f4a3807","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Map","cells":[{"id":0,"value":"md`# Map`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"topojson = require(\"https://d3js.org/topojson.v1.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"html`\n

Time: 0:00-1:00

\n\n\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"