29:null 2a:["$","title",null,{"children":"A4: Interactive Visualization | Columbia Data Viz Sp21 | Observable"}] 2f:T5d59,park_trails = { const margin = {top: 60, right: 50, bottom: 50, left: 50}; const width = 920; const height = 560; const projection = d3.geoAlbersUsa().fitSize([width-100, height+50], states); const path = d3.geoPath().projection(projection); const svg = d3.create("svg").attr("viewBox", [-50, -60, 1020, 640]); const g = svg.append("g"); let transform; const us = g .selectAll(".state") .data(states.features) .join("path") .attr("d", path) .attr("class", "state") .style("fill", "white") .attr("fill-opacity", 1) .attr("stroke", "black") .on("mouseover", function(d) { d3.select(".tooltip").remove(); }) .on("mouseout", function(d) { d3.select(".tooltip").remove(); }) const park = g .selectAll("circle") .data(parks) .enter() .append("circle") .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; }) .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; }) .attr("fill", function(d) { return "silver"; }) .on("mouseover", function(d, i) { d3.select(this) .attr("fill", "black") }) .on("mouseout", function(d) { d3.select(this) .transition().duration(100) .attr("fill", "silver") d3.select(".tooltip").remove(); }); function park_info (d, i, info) { var tgrp = svg.append("g") .attr("class", "tooltip") tgrp.append("rect") .attr("x", (width - (i.name.length * 15 + 10))/2) .attr("y", 20) .attr("width", (i.name.length * 15 + 10) + "px") .attr("height", "72px") .attr("fill", "black") .attr("padding", "5px") tgrp.append("text") .attr("x", (width - (i.name.length * 15 - 10))/2) .attr("y", 48) .attr("text-anchor", "left") .attr("font-family", "monospace") .attr("font-size", "24px") .attr("font-weight", "bold") .attr("fill", "white") .attr("dy", "0em") .text(`${i.name}`); tgrp.append("text") .attr("x", (width - (i.name.length * 15 - 10))/2) .attr("y", 60) .attr("text-anchor", "left") .attr("font-family", "monospace") .attr("font-size", "14px") .attr("font-weight", "regular") .attr("fill", "white") .attr("dy", "1em") .text(`Number of Trails: ${i.count}`); } const pop_scale = d3.scaleLinear().domain([ Math.min(... trails.map(d => parseFloat(d.popularity))), Math.max(... trails.map(d => parseFloat(d.popularity))) ]).range([0, 1]); const len_scale = d3.scaleLinear().domain([ Math.min(... trails.map(d => parseFloat(d.length))), Math.max(... trails.map(d => parseFloat(d.length))) ]).range([0, 1]); const elev_scale = d3.scaleLinear().domain([ Math.min(... trails.map(d => parseFloat(d.elevation_gain))), Math.max(... trails.map(d => parseFloat(d.elevation_gain))) ]).range([0, 1]); const dif_scale = d3.scaleLinear().domain([ Math.min(... trails.map(d => parseFloat(d.difficulty_rating))), Math.max(... trails.map(d => parseFloat(d.difficulty_rating))) ]).range([0, 1]); const use_scale = d3.scaleLinear().domain([ Math.min(... trails.map(d => parseFloat(d.visitor_usage))), Math.max(... trails.map(d => parseFloat(d.visitor_usage))) ]).range([0, 1]); const rate_scale = d3.scaleLinear().domain([ Math.min(... trails.map(d => parseFloat(d.avg_rating))), Math.max(... trails.map(d => parseFloat(d.avg_rating))) ]).range([1, 0]); function compute_val(t) { return 5 * pop_scale(t.popularity) + 2 * len_scale(t.length) + 2 * elev_scale(t.elevation_gain) + dif_scale(t.difficulty_rating) + use_scale(t.visitor_usage) + 0.5 * rate_scale(t.avg_rating); } trails.sort(function(a,b) { return compute_val(a) - compute_val(b); }); const trail_point = d3.symbol().type(d3.symbolTriangle) const trail = g .selectAll("path") .data(trails) .enter() .append("path") .attr("class", "trail") .attr("d", trail_point) .attr("transform", function (d, i) { return "translate(" + (projection([d.lon, d.lat])[0]) + "," + (projection([d.lon, d.lat])[1]) + ")"; }); function trail_info (d, i, info) { var tgrp = svg.append("g") .attr("class", "tooltip") tgrp.append("rect") .attr("x", (width - (i.name.length * 15 + 10))/2) .attr("y", 20) .attr("width", Math.max(i.name.length * 15, i.area_name.length * 9, info.length * 9)+10) .attr("height", "72px") .attr("fill", "lightgray") .attr("padding", "5px") tgrp.append("text") .attr("x", (width - (i.name.length * 15 - 10))/2) .attr("y", 44) .attr("text-anchor", "left") .attr("font-family", "monospace") .attr("font-size", "24px") .attr("font-weight", "bold") .attr("fill", "black") .attr("dy", "0em") .text(`${i.name}`); tgrp.append("text") .attr("x", (width - (i.name.length * 15 - 10))/2) .attr("y", 50) .attr("text-anchor", "left") .attr("font-family", "monospace") .attr("font-size", "14px") .attr("font-weight", "regular") .attr("fill", "black") .attr("dy", "1em") .text(i.area_name); tgrp.append("text") .attr("x", (width - (i.name.length * 15 - 10))/2) .attr("y", 68) .attr("text-anchor", "left") .attr("font-family", "monospace") .attr("font-size", "14px") .attr("font-weight", "regular") .attr("fill", "black") .attr("dy", "1em") .text(info); } const legend = svg.append("rect") .attr("width", "190px") .attr("height", "190px") .attr("x", "775px") .attr("y", "375px") .attr("fill", "white") .attr("stroke", "black") .style("opacity", 0.9); svg.append("text") .attr("x", "830px") .attr("y", "380px") .attr("text-anchor", "left") .attr("font-family", "monospace") .attr("font-size", "20px") .attr("font-weight", "bold") .attr("fill", "black") .attr("dy", "1em") .text("Legend"); const zoom_scale = d3.scaleLinear().domain([Math.log(1), Math.log(40)]).range([30, 2.5]); const zoom = d3.zoom() .scaleExtent([1, 38]) .on("zoom", e => { g.attr("transform", (transform = e.transform)); g.style("stroke-width", 1 / Math.sqrt(transform.k)); us.on("mouseover", function(d) { d3.select(".tooltip").remove(); }) park .attr("r", function(d) { return (Math.sqrt(d.count) * 2.5) / Math.sqrt(transform.k); }) .style("opacity", function(d) { return Math.max(0, (0.6/transform.k)-0.1); }); trail_point.size(function(d) { return 2 * zoom_scale(Math.log(transform.k/0.7)); }); trail.attr('d', trail_point); }); svg .call(zoom) .call(zoom.transform, d3.zoomIdentity); svg.append("rect") .attr("x", 0 - margin.left) .attr("y", 0 - margin.top) .attr("width", 1020) .attr("height", 80) .attr("fill", "white") .style("opacity", 0.9); svg.append("text") .attr("x", ((width + 50) / 2)) .attr("y", -30) .attr("text-anchor", "middle") .style("font-size", "32px") .style("font-family", "monospace") .style("font-weight", "bold") .text("Trail " + feature + " by US National Park"); svg.append("text") .attr("x", ((width + 50) / 2)) .attr("y", -4) .attr("text-anchor", "middle") .style("font-size", "13px") .style("font-family", "monospace") .style("font-weight", "bold") .text("Calling all hikers, whether you're starting beginner trails, challenging new heights, or sightseeing popular views!"); svg.append("text") .attr("x", ((width + 50) / 2)) .attr("y", 8) .attr("text-anchor", "middle") .style("font-size", "13px") .style("font-family", "monospace") .style("font-weight", "bold") .text("To explore more information, hover over circles for National Parks and zoom into triangles for specific trails and features."); svg.node().update = () => { var triangle = d3.symbol().type(d3.symbolTriangle).size(50); switch(feature) { case "Popularity": var min_trail = Math.min(... trails.map(d => parseFloat(d.popularity))); var max_trail = Math.max(... trails.map(d => parseFloat(d.popularity))); var trail_scale = d3.scaleLinear().domain([min_trail, max_trail]).range([1, 4.9]) var colorQ = d3.scaleQuantize([0,5], d3.schemeBlues[5]); var min_park = Math.min(... parks.map(d => parseFloat(d.avg_popularity))); var max_park = Math.max(... parks.map(d => parseFloat(d.avg_popularity))); var colorS = d3.scaleSequential(d3.interpolateBlues).domain([min_park, max_park]); var label_list = ["Not popular", "Moderately popular", "Popular", "Very popular"]; svg.selectAll(".trail") .attr("fill", function(d) { return colorQ(trail_scale(d.popularity)); }) .on("mouseover", function(d, i) { trail_info(d, i, label_list[parseInt(trail_scale(i.popularity))-1]); d3.select(this) .attr("stroke", "black") .attr("stroke-width", 0.1); }) .on("mouseout", function(d) { d3.select(".tooltip").remove(); d3.select(this) .attr("stroke-width", 0); }); svg.selectAll("circle") .attr("fill", function(d) { return colorS(d.avg_popularity); }) .on("mouseover", function(d, i) { park_info(d, i); d3.select(this) .attr("fill", "blue"); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(100) .attr("fill", function(d) { return colorS(d.avg_popularity); }) d3.select(".tooltip").remove(); }); svg.append("g") .selectAll('path') .data(label_list) .enter() .append('path') .attr('d',triangle) .attr('fill', function(d, i) { return colorQ(i+1); }) .attr('transform',function(d, i) { return `translate(${790},${430 + i*30})`; }) for (var i = 0; i < label_list.length; i++) { svg.append("text") .attr("x", 800) .attr("y", 433 + i*30) .attr("text-anchor", "left") .style("font-size", "14px") .style("font-family", "monospace") .style("font-weight", "regular") .text(label_list[i]); } break; case "Length": var min_trail = Math.min(... trails.map(d => parseFloat(d.length))); var max_trail = Math.max(... trails.map(d => parseFloat(d.length))); var trail_scale = d3.scaleSqrt().domain([min_trail, max_trail]).range([1, 4.9]) var colorQ = d3.scaleQuantize([0,5], d3.schemeOranges[5]); var min_park = Math.min(... parks.map(d => parseFloat(d.avg_length))); var max_park = Math.max(... parks.map(d => parseFloat(d.avg_length))); var colorS = d3.scaleSequential(d3.interpolateOranges).domain([min_park, max_park]); var label_list = ["0-34 km", "35-140 km", "141-326 km", "327-530 km"]; svg.selectAll(".trail") .attr("fill", function(d) { return colorQ(trail_scale(d.length)); }) .on("mouseover", function(d, i) { trail_info(d, i, "Length: " + parseInt(i.length) + " m"); d3.select(this) .attr("stroke", "black") .attr("stroke-width", 0.1); }) .on("mouseout", function(d) { d3.select(".tooltip").remove(); d3.select(this) .attr("stroke-width", 0); }); svg.selectAll("circle") .attr("fill", function(d) { return colorS(d.avg_length); }) .on("mouseover", function(d, i) { park_info(d, i); d3.select(this) .attr("fill", "red"); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(100) .attr("fill", function(d) { return colorS(d.avg_length); }) d3.select(".tooltip").remove(); }); svg.append("g") .selectAll('path') .data(label_list) .enter() .append('path') .attr('d',triangle) .attr('fill', function(d, i) { return colorQ(i+1); }) .attr('transform',function(d, i) { return `translate(${790},${430 + i*30})`; }) for (var i = 0; i < label_list.length; i++) { svg.append("text") .attr("x", 800) .attr("y", 433 + i*30) .attr("text-anchor", "left") .style("font-size", "14px") .style("font-family", "monospace") .style("font-weight", "regular") .text(label_list[i]); } break; case "Elevation Gain": var min_trail = Math.min(... trails.map(d => parseFloat(d.elevation_gain))); var max_trail = Math.max(... trails.map(d => parseFloat(d.elevation_gain))); var trail_scale = d3.scaleSqrt().domain([min_trail, max_trail]).range([1, 4.9]) var colorQ = d3.scaleQuantize([0,5], d3.schemeGreens[5]); var min_park = Math.min(... parks.map(d => parseFloat(d.avg_elevation_gain))); var max_park = Math.max(... parks.map(d => parseFloat(d.avg_elevation_gain))); var colorS = d3.scaleSequential(d3.interpolateGreens).domain([min_park, max_park]); var label_list = ["0-922 m", "923-3,701 m", "3,702-8,369 m", "8,370-14,030 m"]; svg.selectAll(".trail") .attr("fill", function(d) { return colorQ(trail_scale(d.elevation_gain)); }) .on("mouseover", function(d, i) { trail_info(d, i, "Elevation gain: " + parseInt(i.elevation_gain) + " m"); d3.select(this) .attr("stroke", "black") .attr("stroke-width", 0.1); }) .on("mouseout", function(d) { d3.select(".tooltip").remove(); d3.select(this) .attr("stroke-width", 0); }); svg.selectAll("circle") .attr("fill", function(d) { return colorS(d.avg_elevation_gain); }) .on("mouseover", function(d, i) { park_info(d, i); d3.select(this) .attr("fill", "dark green"); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(100) .attr("fill", function(d) { return colorS(d.avg_elevation_gain); }) d3.select(".tooltip").remove(); }); svg.append("g") .selectAll('path') .data(label_list) .enter() .append('path') .attr('d',triangle) .attr('fill', function(d, i) { return colorQ(i+1); }) .attr('transform',function(d, i) { return `translate(${790},${430 + i*30})`; }) for (var i = 0; i < label_list.length; i++) { svg.append("text") .attr("x", 800) .attr("y", 433 + i*30) .attr("text-anchor", "left") .style("font-size", "14px") .style("font-family", "monospace") .style("font-weight", "regular") .text(label_list[i]); } break; case "Difficulty": var min_trail = Math.min(... trails.map(d => parseFloat(d.difficulty_rating))); var max_trail = Math.max(... trails.map(d => parseFloat(d.difficulty_rating))); var trail_scale = d3.scaleLinear().domain([min_trail, max_trail]).range([1, 4]) var colorQ = d3.scaleQuantize([0,4], d3.schemeReds[5]); var min_park = Math.min(... parks.map(d => parseFloat(d.avg_difficulty))); var max_park = Math.max(... parks.map(d => parseFloat(d.avg_difficulty))); var colorS = d3.scaleSequential(d3.interpolateReds).domain([min_park, max_park]); var label_list = ["Easy", "Medium", "Hard", "Expert"]; svg.selectAll(".trail") .attr("fill", function(d) { return colorQ(trail_scale(d.difficulty_rating)); }) .on("mouseover", function(d, i) { trail_info(d, i, "Difficulty: " + label_list[parseInt(trail_scale(i.difficulty_rating))-1]); d3.select(this) .attr("stroke", "black") .attr("stroke-width", 0.1); }) .on("mouseout", function(d) { d3.select(".tooltip").remove(); d3.select(this) .attr("stroke-width", 0); }); svg.selectAll("circle") .attr("fill", function(d) { return colorS(d.avg_difficulty); }) .on("mouseover", function(d, i) { park_info(d, i); d3.select(this) .attr("fill", "maroon"); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(100) .attr("fill", function(d) { return colorS(d.avg_difficulty); }) d3.select(".tooltip").remove(); }); svg.append("g") .selectAll('path') .data(label_list) .enter() .append('path') .attr('d',triangle) .attr('fill', function(d, i) { return colorQ(i+1); }) .attr('transform',function(d, i) { return `translate(${790},${430 + i*30})`; }) for (var i = 0; i < label_list.length; i++) { svg.append("text") .attr("x", 800) .attr("y", 433 + i*30) .attr("text-anchor", "left") .style("font-size", "14px") .style("font-family", "monospace") .style("font-weight", "regular") .text(label_list[i]); } break; case "Visitor Usage": var min_trail = Math.min(... trails.map(d => parseFloat(d.visitor_usage))); var max_trail = Math.max(... trails.map(d => parseFloat(d.visitor_usage))); var trail_scale = d3.scaleLinear().domain([min_trail, max_trail]).range([1, 5]) var colorQ = d3.scaleQuantize([0,5], d3.schemePurples[6]); var min_park = Math.min(... parks.map(d => parseFloat(d.avg_visitor_usage))); var max_park = Math.max(... parks.map(d => parseFloat(d.avg_visitor_usage))); var colorS = d3.scaleSequential(d3.interpolatePurples).domain([min_park, max_park]); var label_list = ["No Data", "Light", "Moderate", "Heavy", "Very Heavy"]; svg.selectAll(".trail") .attr("fill", function(d) { return colorQ(trail_scale(d.visitor_usage)); }) .on("mouseover", function(d, i) { trail_info(d, i, "Visitor usage: " + label_list[parseInt(trail_scale(i.visitor_usage))-1]); d3.select(this) .attr("stroke", "black") .attr("stroke-width", 0.1); }) .on("mouseout", function(d) { d3.select(".tooltip").remove(); d3.select(this) .attr("stroke-width", 0); }); svg.selectAll("circle") .attr("fill", function(d) { return colorS(d.avg_visitor_usage); }) .on("mouseover", function(d, i) { park_info(d, i); d3.select(this) .attr("fill", "purple"); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(100) .attr("fill", function(d) { return colorS(d.avg_visitor_usage); }) d3.select(".tooltip").remove(); }); svg.append("g") .selectAll('path') .data(label_list) .enter() .append('path') .attr('d',triangle) .attr('fill', function(d, i) { return colorQ(i+1); }) .attr('transform',function(d, i) { return `translate(${790},${430 + i*30})`; }) for (var i = 0; i < label_list.length; i++) { svg.append("text") .attr("x", 800) .attr("y", 433 + i*30) .attr("text-anchor", "left") .style("font-size", "14px") .style("font-family", "monospace") .style("font-weight", "regular") .text(label_list[i]); } break; case "Rating": var min_trail = Math.min(... trails.map(d => parseFloat(d.avg_rating))); var max_trail = Math.max(... trails.map(d => parseFloat(d.avg_rating))); var trail_scale = d3.scaleLinear().domain([min_trail, max_trail]).range([0, 5]) var colorQ = d3.scaleQuantize([0,5], d3.schemeGreys[6]); var min_park = Math.min(... parks.map(d => parseFloat(d.avg_rating))); var max_park = Math.max(... parks.map(d => parseFloat(d.avg_rating))); var colorS = d3.scaleSequential(d3.interpolateGreys).domain([min_park, max_park]); var label_list = ["0", "1", "2", "3", "4", "5"]; svg.selectAll(".trail") .attr("fill", function(d) { return colorQ(trail_scale(d.avg_rating)); }) .on("mouseover", function(d, i) { trail_info(d, i, "Average rating: " + i.avg_rating); d3.select(this) .attr("stroke", "red") .attr("stroke-width", 0.1); }) .on("mouseout", function(d) { d3.select(".tooltip").remove(); d3.select(this) .attr("stroke-width", 0); }); svg.selectAll("circle") .attr("fill", function(d) { return colorS(d.avg_rating); }) .on("mouseover", function(d, i) { park_info(d, i); d3.select(this) .attr("fill", "silver"); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(100) .attr("fill", function(d) { return colorS(d.avg_rating); }) d3.select(".tooltip").remove(); }); svg.append("g") .selectAll('path') .data(label_list) .enter() .append('path') .attr('d',triangle) .attr('fill', function(d, i) { return colorQ(i); }) .attr('transform',function(d, i) { return `translate(${790},${425 + i*25})`; }) for (var i = 0; i < label_list.length; i++) { svg.append("text") .attr("x", 800) .attr("y", 428 + i*25) .attr("text-anchor", "left") .style("font-size", "14px") .style("font-family", "monospace") .style("font-weight", "regular") .text(label_list[i]); } break; default: svg.selectAll(".trail") .attr("fill", "black"); } }; svg.node().update(); return svg.node(); }30:T982,md `## Writeup Originally we had a chloropleth graph with a circle mapped to each trail, and each state shaded according to the number of trails per state, but shifted from the idea because of the redundancy of the state coloring and the difficulty of distinguishing the circles from one another. Next, we plotted national parks in circles and trails in triangles colored by difficulty and sized by length. To maximize user control, we ended up with a dropdown menu for users to choose which color-based trail feature to view on the map (e.g. popularity, length, etc.), circles to signify each national park sized based on the number of trails, and equisized triangles for the trails tinted by the feature value. All members of the team contributed to the design process and implementation of the visualization. Karen took the lead on the design as well the front end aspects. Cherie implemented most of the interactivity including the hover and filter effects. Bonnie worked mainly on the basic functionality and debugging. The code was frequently passed around by all members. Everyone contributed to user testing and updating the visualization according to feedback as well. Challenges occurred when we added the interactivity functionality. We had trouble honing the zoom functionality since many of the trails are positioned near each other. To counteract this, we adjusted the datapoint size based on the zoom level. The filtering functionality also took some time to figure out. For trail length and elevation gain, the map was unhelpful at first since most of the points fell under the same interval and were thus colored the same. For these metrics, we decided on a square root scale in order to differentiate elevations and lengths of different tiers, while the others utilized either a linear or ordinal scale. Users indicated various functionality that was not obvious at first glance such as the zoom/drag feature and the color coding averages for national parks. Furthermore, it would have been more beneficial to place the visualization in more of a real world context rather than a minimalistic map. Users wanted to know where they were located no matter how zoomed into the visualization they were. Finally, more user testing on the aesthetics of the map suggested some fine tuning such as placement of text and tooltips, color coordination, and relation of circles for park size and triangles for trail heads.`31:[{"id":"67f9fde1b3b0e2e2c2cb2f1870b86e936fd5438ec8b3fa9b986fa0508b26994c9ac194a11d78d743c0427c57d5f42745657a2780d01f086fd4f1b01178898faf","href":"https://static.observableusercontent.com/files/67f9fde1b3b0e2e2c2cb2f1870b86e936fd5438ec8b3fa9b986fa0508b26994c9ac194a11d78d743c0427c57d5f42745657a2780d01f086fd4f1b01178898faf","name":"sketches2@2.png","type":"image/png","lastModified":1615175521327.397,"size":764878},{"id":"4d400d1e1b4b8402e3ef8132dcfcff244940fadcab8f224857da7f487668fa7786018fb71aa4448975736b319fa6d7a1cb904456ffd46bd4f1536b791e879b7a","href":"https://static.observableusercontent.com/files/4d400d1e1b4b8402e3ef8132dcfcff244940fadcab8f224857da7f487668fa7786018fb71aa4448975736b319fa6d7a1cb904456ffd46bd4f1536b791e879b7a","name":"version1.png","type":"image/png","lastModified":1615175521246.445,"size":429354},{"id":"4c5d3c73c115ddf6f27e8527b38c14613ce74815a952bd144e18e3497e5b0b699a0d7ecb93509f3d29ad308174082d4f99625bc0a0ffe644c7e940207ffab761","href":"https://static.observableusercontent.com/files/4c5d3c73c115ddf6f27e8527b38c14613ce74815a952bd144e18e3497e5b0b699a0d7ecb93509f3d29ad308174082d4f99625bc0a0ffe644c7e940207ffab761","name":"version2.png","type":"image/png","lastModified":1615175521297.994,"size":527605},{"id":"af0b8bf04ca7a891133fdbdf58a4c084aa567505be18e8c106a8f01d23aee3e661dcd519f97f187397387bff63b9159c98b7e4d0555a965aa7868de18a6453f9","href":"https://static.observableusercontent.com/files/af0b8bf04ca7a891133fdbdf58a4c084aa567505be18e8c106a8f01d23aee3e661dcd519f97f187397387bff63b9159c98b7e4d0555a965aa7868de18a6453f9","name":"sketches1@2.png","type":"image/png","lastModified":1615175521500.248,"size":1840723},{"id":"526ee2e0de60863661ade37dde1869e9dfd717a862a544d95909a5923dd2991126b8697fa8542ad8e2de345dea87ab99ea742a11626f329350d533370d3b078a","href":"https://static.observableusercontent.com/files/526ee2e0de60863661ade37dde1869e9dfd717a862a544d95909a5923dd2991126b8697fa8542ad8e2de345dea87ab99ea742a11626f329350d533370d3b078a","name":"parks.csv","type":"text/csv","lastModified":1615004904112.82,"size":6738},{"id":"5d2abad1d5ee54f7a5360a32c52d5cb044e489f185f5a3ed7fa831bb01aa0170c2de1c8e58e5de207424fd84d2377dd53b00b7c5ad422101235e4902b3da0384","href":"https://static.observableusercontent.com/files/5d2abad1d5ee54f7a5360a32c52d5cb044e489f185f5a3ed7fa831bb01aa0170c2de1c8e58e5de207424fd84d2377dd53b00b7c5ad422101235e4902b3da0384","name":"states.json","type":"application/json","lastModified":1615004945987.006,"size":643152},{"id":"e6dfe0290d3a74d7bc20c49d56c711fc7e46a8cc033fc37a7b78c0b356ba1698e45d6bb14eafc32f62994ea047d26a6522d49f36e1636596c29bfc45fd698670","href":"https://static.observableusercontent.com/files/e6dfe0290d3a74d7bc20c49d56c711fc7e46a8cc033fc37a7b78c0b356ba1698e45d6bb14eafc32f62994ea047d26a6522d49f36e1636596c29bfc45fd698670","name":"trails.csv","type":"text/csv","lastModified":1615004910608.992,"size":923117}] 2d:{"id":"fab6a04c0cffac34","slug":"a4-interactive-visualization","title":"A4: Interactive Visualization","thumbnail":"8e90ed93deeac058c31b149ba4f50e065656fe646e03f26c2d07af62b74d9f35","access_level":"public","create_time":"$D2021-03-06T04:27:52.011Z","update_time":"$D2021-03-24T21:36:44.002Z","view_time":null,"first_public_time":"$D2021-03-24T21:45:51.931Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"bd55f8cdcb03c6ac","login":"columbiaviz-s21","name":"Columbia Data Viz Sp21","avatar_url":"https://avatars-next.observableusercontent.com/d7aca17844c982135939acf7860ef7195e5f7a382fd8f1db267359800ab85fbc","tier":"starter_2024"},"version":770,"publish_version":770,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0d1e8ac23f83ad5","login":"cheriechu","name":"Cherie Chu","avatar_url":"https://avatars-next.observableusercontent.com/dce146584632a1280925052a4830b04a9ea279eaaad0e6e71c4ac546dbdb689f","tier":null}],"members":[{"type":"individual","id":"35c6b9542ad7f9fb","login":"bonniewang4399","name":"Bonnie Wang","avatar_url":"https://avatars-next.observableusercontent.com/add0ba2eecd926810357368047d1d3ea73a4d6ac0b9133b083cbc874d84a9189","tier":null,"role":"editor"},{"type":"individual","id":"a0d1e8ac23f83ad5","login":"cheriechu","name":"Cherie Chu","avatar_url":"https://avatars-next.observableusercontent.com/dce146584632a1280925052a4830b04a9ea279eaaad0e6e71c4ac546dbdb689f","tier":null,"role":"editor"},{"type":"individual","id":"f1ee5f837462ad6c","login":"karenlin","name":"Karen Lin","avatar_url":"https://avatars-next.observableusercontent.com/c1d1695584a0d26ee3e25728ab169808f48b4319fe1cd9dcbfe6936b97f262c4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"A4: Interactive Visualization","cells":[{"id":496,"value":"md`# A4: Interactive Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"states = FileAttachment(\"states.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"trails = FileAttachment(\"trails.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"parks = FileAttachment(\"parks.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"{\n for (var i = 0; i < trails.length; i++) {\n if (trails[i].visitor_usage === \"\") {\n trails[i].visitor_usage = 0;\n }\n }\n for (var i = 0; i < parks.length; i++) {\n if (parks[i].avg_visitor_usage === \"\") {\n parks[i].avg_visitor_usage = 0;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"features = [\"Popularity\", \"Length\", \"Elevation Gain\", \"Difficulty\", \"Visitor Usage\", \"Rating\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"function dropdown(options) {\n let dd = html `