42:null 43:["$","title",null,{"children":"National Parks Visualized | cwf onsite | Observable"}] 49:T7eb,location_parks = { function unpack(key) { return joinedArray.map(function(row) { return row[key]; }); } const citySizeScale = d3 .scaleSqrt() .domain(d3.extent(joinedArray, d => d['Acres'])) .range([10, 50]); const citySize = joinedArray.map(d => citySizeScale(d['Acres'])); const hoverText = joinedArray.map(d => "Park: " + d['Park'] + "
State: " + d.State + "
"+"Recreation Visitors" + " "+ d['Recreation Visitors'] + '
Acres ' + d.Acres); const cityLat = unpack('Latitude'), cityLon = unpack('Longitude') ; const data = [ { type: 'scattergeo', locationmode: 'usa', lat: cityLat, lon: cityLon, hoverinfo: 'text', text: hoverText , marker: { color: joinedArray.map(d => d['Recreation Visitors']), colorscale: "Viridis", size: citySize, } } ]; var layout = { title: 'National Parks Bubble Map
'+ year_select, // showlegend: legend, mapbox: { style: "open-street-map", }, geo: { projection: { type: 'albers usa' } }, // height: 600, // width: 900, // add text as legend for size and color annotations: [ { x: 0, y: 4, xref: 'x', yref: 'y', text: 'Size : Land Area (Acres)
Color: ' + 'Number of Visitors', showarrow: false } ], // remove axes from plot xaxis: { autorange: false, showgrid: false, zeroline: false, showline: false, autotick: true, ticks: '', showticklabels: false }, yaxis: { autorange: false, showgrid: false, zeroline: false, showline: false, autotick: true, ticks: '', showticklabels: false }, margin: { l: 0, r: 0, b: 0, t: 50, pad: 0 } }; let config = {responsive: true, showLink: false} const myDiv = DOM.element("div") Plotly.newPlot(myDiv, data, layout, config); return myDiv; }4a:T5bf,stats_year = { const myDiv = DOM.element("div") ; const data = [ { type: 'bar', x: filtered .map(d => d['Park']) .map(d => d.replace('National Park', '')), y: visit_year_group .get("2019") .map(d => d['Recreation Visitors']), transforms: [ { type: 'sort', target: 'y', order: 'descending' }, ], marker: { color: 'rgba(106, 90, 205, .8)' }, name: '2019' }, { type: 'bar', x: filtered .map(d => d['Park']) .map(d => d.replace('National Park', '')), y: visit_year_group.get("2020").map(d => d['Recreation Visitors']), transforms: [ { type: 'sort', target: 'y', order: 'descending' }, ], marker: { color: 'rgba(106, 200, 100, .8)' }, name: '2020' } ]; const layout = { title: 'Total Registered Recreation Visitors
in the' + select_region, xaxis: { tickfont: { size: 10, color: 'rgb(106, 90, 205)' } }, yaxis: { title: 'Number of Visitors', color: 'rgb(106, 90, 205)' }, // barmode: 'stack' // height: height*0.5, // width: width, autosize:true, margin: { b: 175 } }; let config = {responsive: true} Plotly.newPlot(myDiv, data, layout, config); return myDiv; }4b:T781,chart = { const svg = d3v5.select(DOM.svg(width, height)) .attr("viewBox", `${-width/2} ${-height/2} ${width+100} ${height}`) .style("width", "115%") .style("height", "auto") .style("margin", "0, 0") .style("font", "12px sans-serif"); const park = null svg.append("g") .call(legend_radial); svg.append("g") .call(circle_title); svg.append("g") .selectAll("g") .data(d3v5.stack().keys(radial_data.columns.slice(1))(data)) .enter().append("g") .attr("fill", d => z(d.key)) .attr("id", d => z(d.key)) .selectAll("path") .data(d => d) .enter().append("path") .attr("d", arc) // ---- Interactivity starts here .on("mouseover", function(d,i) { d3v5.select(this) .attr("fill", "orange"); // park = i var xpos = d3v5.mouse(this)[0]; var ypos = d3v5.mouse(this)[1]; // Create the tooltip label as an SVG group with a text and a rect inside var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d,i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", "250px") .attr("height", "25px") .attr("fill", "burlywood") tgrp.append("text") .attr("x", 5) .attr("y", 14) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", "black") .text(`Park Name: ${names_radial[i]} - Count: ${d[1]-d[0]} `); }) .on("mouseout", function(d) { d3v5.select(this) .transition().duration(250) // try these .attr("fill", "rgb(0, 0, " + Math.round(d * 10) + ")"); //Remove the tooltip d3v5.select("#tooltip").remove(); }); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }4c:T5a6,{ const myDiv = html`

`; var trace1 = { x: [1, 2, 3, 4], y: [1, 1, 1, 1], mode: 'markers+text', type: 'scatter', text: ['Easy', 'Moderate', 'Hard', 'Strenuous'], textposition: 'top center', marker: { size: 20, color: ['rgba(51, 51, 255, .6)', 'rgba(0, 153, 115, .6)', 'rgba(255, 153, 51, .6)', 'rgba(255, 80, 80, .6)'] } }; const data = [trace1]; const layout = { title: { text: SelectState_trails + ' Trails', // xref: 'paper', x: 0, // y: 0 }, autosize: false, // title: 'AllTrail Review Metrics', width: 500, height: 85, // margin: { t: 50 }, // hovermode: 'closest', xaxis: { // title: 'Trail Rating Legend', showgrid: false, zeroline: false, range: [0.5, 10], autorange: false, showline: false, autotick: false, ticks: '', showticklabels: false }, yaxis: { // title: 'Number of Reviews', // type: 'log', showgrid: false, zeroline: false, range: [0.5, 1.5], autorange: false, showline: false, autotick: false, ticks: '', showticklabels: false }, margin: { l: 0, r: 0, b: 0, t: 30, pad: 0 } }; let config = {staticPlot: true, responsive: true} Plotly.newPlot(myDiv, data, layout, config); return myDiv; };4d:T5ad,all_trails_plot = { function unpack(key) { return all_trails_park.get(SelectState_trails).map(function(row) { return row[key]; }); } const citySizeScale = d3 .scaleSqrt() .domain(d3.extent(all_trails_park.get(SelectState_trails), d => d['num_reviews'])) .range([12, 30]); const citySize = all_trails_park.get(SelectState_trails).map(d => citySizeScale(d['num_reviews'])); const hoverText = all_trails_park.get(SelectState_trails).map(d => d['name'] +', Difficulty: '+d['difficulty_rating']) ; const cityLat = unpack('lat'), cityLon = unpack('lon'), rating = unpack('difficulty_rating') const data = [ { type: 'scattermapbox', lat: cityLat, lon: cityLon, hoverinfo: 'text', text: hoverText, marker: { // symbol: "danger", size: 20, color: rating.map(d => color_difficulty[d]), opacity: .6 } } ]; // const data = [trace1] var layout = { // title: SelectState_trails + ' Trails', showlegend: false, mapbox: { style: "open-street-map", center: { lat: cityLat[0], lon: cityLon[0] }, zoom: 10 }, // height: 700, // width: 1000, margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 } }; let config = {responsive: true} const myDiv = DOM.element("div"); Plotly.newPlot(myDiv, data, layout, config); return myDiv; }4e:T671,trails = { const myDiv = DOM.element("div"); const trace1 = { name: 'Number of Reviews', type: 'bar', x: park_route_filtered.map(d=>d['name']), y: park_route_filtered.map(d => d['num_reviews']), transforms: [ { type: 'sort', target: 'y', order: 'descending' } ], // base: .5, offset: 0.2, width: .4, marker: { color: 'rgba(0, 120, 140, .7)' }, // name: 'Tent' }; const trace2 = { name: 'Average Rating', type: 'bar', x: park_route_filtered.map(d=>d['name']), y: park_route_filtered.map(d => d['avg_rating']), transforms: [ { type: 'sort', target: 'y', order: 'descending' }, ], offset: -0.2, width: .4, yaxis: 'y2', marker: { color: 'rgba(159, 159, 223, .7)' }, }; const data = [trace2, trace1] const layout = { title: 'Rating and Number of Reviews', xaxis: { tickfont: { size: 10, color: 'rgb(0, 51, 51)' } }, yaxis: { title: 'Number of Reviews', color: 'rgb(0, 51, 51)' }, yaxis2: { title: 'Average Rating', // titlefont: {color: 'rgb(148, 103, 189)'}, // tickfont: {color: 'rgb(148, 103, 189)'}, overlaying: 'y', side: 'right' }, // barmode: 'group', // height: 500, // width: 900, autosize:true, margin: { b: 150 } }; let config = { staticPlot: true, responsive: true} Plotly.newPlot(myDiv, data, layout, config); return myDiv; }4f:T65a,{ const myDiv = DOM.element("div"); const level = [...new Set(all_trails_sorted.map(d=>d.difficulty_rating))] const difficulty = Object({ 1: 'Easy', 3: 'Moderate', 5: 'Hard', 7: 'Strenuous' }); const data = level.map(c => ( { x: all_trails_data.filter(d => d.difficulty_rating == c) .map(d => d.avg_rating) .map(d => d + d3.randomNormal(0, 0.05)()), y: all_trails_sorted.filter(d => d.difficulty_rating == c) .map(d => d.num_reviews), // .map(d => Math.log10(d)), name: difficulty[c], type: 'scatter', mode: 'markers', text: all_trails_data.filter(d => d.difficulty_rating == c).map(d => d.name + " " + d.area_name), // opacity: 0.8, marker: { color: color_difficulty[c], size: 10, opacity: .2 } })); const layout = { autosize: false, title: 'AllTrail Review Metrics', // width: width*0.8, // height: height*0.5, autosize:true, margin: { t: 50 }, hovermode: 'closest', xaxis: { title: 'Average Review Rating', showgrid: false, zeroline: false, range: [2.8, 5.2] }, yaxis: { title: 'Number of Reviews', // type: 'log', showgrid: false, zeroline: false, range: [-100, 1000] } }; // var layout = { // title: 'Scatterplot of Average Review vs Number of Reviews', // height: 600, // width: 900, // showlegend: true // }; let config = {responsive: true} const div = DOM.element('div'); Plotly.newPlot(myDiv, data, layout, config); return myDiv; }50:T5e4b,park_trails_test = { 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], states1); 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(states1.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) { d3v5.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(... all_trails_data.map(d => parseFloat(d.popularity))), Math.max(... all_trails_data.map(d => parseFloat(d.popularity))) ]).range([0, 1]); const len_scale = d3.scaleLinear().domain([ Math.min(... all_trails_data.map(d => parseFloat(d.length))), Math.max(... all_trails_data.map(d => parseFloat(d.length))) ]).range([0, 1]); const elev_scale = d3.scaleLinear().domain([ Math.min(... all_trails_data.map(d => parseFloat(d.elevation_gain))), Math.max(... all_trails_data.map(d => parseFloat(d.elevation_gain))) ]).range([0, 1]); const dif_scale = d3.scaleLinear().domain([ Math.min(... all_trails_data.map(d => parseFloat(d.difficulty_rating))), Math.max(... all_trails_data.map(d => parseFloat(d.difficulty_rating))) ]).range([0, 1]); const use_scale = d3.scaleLinear().domain([ Math.min(... all_trails_data.map(d => parseFloat(d.visitor_usage))), Math.max(... all_trails_data.map(d => parseFloat(d.visitor_usage))) ]).range([0, 1]); const rate_scale = d3.scaleLinear().domain([ Math.min(... all_trails_data.map(d => parseFloat(d.avg_rating))), Math.max(... all_trails_data.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); } all_trails_data.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(all_trails_data) .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(... all_trails_data.map(d => parseFloat(d.popularity))); var max_trail = Math.max(... all_trails_data.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(... all_trails_data.map(d => parseFloat(d.length))); var max_trail = Math.max(... all_trails_data.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(... all_trails_data.map(d => parseFloat(d.elevation_gain))); var max_trail = Math.max(...all_trails_data.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(... all_trails_data.map(d => parseFloat(d.difficulty_rating))); var max_trail = Math.max(... all_trails_data.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(... all_trails_data.map(d => parseFloat(d.visitor_usage))); var max_trail = Math.max(... all_trails_data.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(... all_trails_data.map(d => parseFloat(d.avg_rating))); var max_trail = Math.max(... all_trails_data.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(); }51:T1060,function legend({ color, title, tickSize = 10, // width = 900, height = 100 + tickSize, marginTop = 25, marginRight = 0, marginBottom = 15 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", '100%') .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); }52:[{"id":"fb47bfa92c9db77e6404dedb5435a23e6c8345f7c335352ce55d4cdd9083a13ec12acfa5aaa0c148b03ef62185f05b345f4322c47de20096a88bbb072ebf745f","href":"https://static.observableusercontent.com/files/fb47bfa92c9db77e6404dedb5435a23e6c8345f7c335352ce55d4cdd9083a13ec12acfa5aaa0c148b03ef62185f05b345f4322c47de20096a88bbb072ebf745f","name":"bryce.jpg","type":"image/jpeg","lastModified":1679508861170.884,"size":3542623},{"id":"526ee2e0de60863661ade37dde1869e9dfd717a862a544d95909a5923dd2991126b8697fa8542ad8e2de345dea87ab99ea742a11626f329350d533370d3b078a","href":"https://static.observableusercontent.com/files/526ee2e0de60863661ade37dde1869e9dfd717a862a544d95909a5923dd2991126b8697fa8542ad8e2de345dea87ab99ea742a11626f329350d533370d3b078a","name":"parks.csv","type":"text/csv","lastModified":1679508861170.884,"size":6738},{"id":"5d2abad1d5ee54f7a5360a32c52d5cb044e489f185f5a3ed7fa831bb01aa0170c2de1c8e58e5de207424fd84d2377dd53b00b7c5ad422101235e4902b3da0384","href":"https://static.observableusercontent.com/files/5d2abad1d5ee54f7a5360a32c52d5cb044e489f185f5a3ed7fa831bb01aa0170c2de1c8e58e5de207424fd84d2377dd53b00b7c5ad422101235e4902b3da0384","name":"states.json","type":"application/json","lastModified":1679508861170.884,"size":643152}] 47:{"id":"c70adfc502ec723a","slug":null,"title":"National Parks Visualized","thumbnail":"91f2c9209cd48d3b8eef57ab65c9ae7cd3d89b47ce550484277a9e11a549abff","access_level":"public","create_time":"$D2023-03-22T18:14:21.170Z","update_time":"$D2023-03-22T18:14:21.170Z","view_time":null,"first_public_time":"$D2023-03-22T18:14:21.170Z","has_unpublished_edits":null,"fork":{"id":"5dc0efc3d2b04c3c","slug":"national-park-visulization-project","title":"National Parks Visualized","owner":{"id":"fc9ccefd74dbbf11","login":"acp","name":"Anna Perdue"}},"stars":0,"starred":false,"owner":{"type":"team","id":"21dfa574ccca3707","login":"cwf-onsite","name":"cwf onsite","avatar_url":"https://avatars-next.observableusercontent.com/8d2a5a19622d2de6622ac64a541aad0c04bd75fa3be8a8c68455bfd820e3623d","tier":"starter_2024","bio":"","following":false},"version":4854,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f42f9da8622ad92a","login":"christianarty","name":"Christian Arty","avatar_url":"https://avatars-next.observableusercontent.com/f0b006a3e5b667ef20ef34352d8c1aec7e690f915b773dd7694cfc0f00d2abc2","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"f42f9da8622ad92a","login":"christianarty","name":"Christian Arty","avatar_url":"https://avatars-next.observableusercontent.com/f0b006a3e5b667ef20ef34352d8c1aec7e690f915b773dd7694cfc0f00d2abc2","tier":null,"role":"editor"},{"type":"team","id":"21dfa574ccca3707","login":"cwf-onsite","name":"cwf onsite","avatar_url":"https://avatars-next.observableusercontent.com/8d2a5a19622d2de6622ac64a541aad0c04bd75fa3be8a8c68455bfd820e3623d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"National Parks Visualized","cells":[{"id":0,"value":"md `# National Parks Visualized\n## Where Data Meets America's Outdoors \n__by Anna Perdue and Ryan Jones__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3727,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3820,"value":"md `\nWe __LOVE__ parks! We love them so much we decided to create useful visualizations to aid in the planning of visits to America's natural treasures - her National Parks.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3830,"value":"FileAttachment(\"bryce.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3809,"value":"md `\nWe hope to have some info for everyone!\n\n_Looking to find that hidden gem that doesn't draw the crowds of some of the more well-known parks?_\nCheck out our maps showing the size and visitation stats for the parks!\n\n_Concerned about how COVID has affected park visitation?_\nCompare 2019 and 2020 visitation stats to get an idea of which parks have drawn guests during quarantine and which have been limited.\n\n_Do you enjoy camping? Looking to car camp, glamp or go hard and backpack in-and-out?_\nFind a site for any occasion!\n\n_Feeling antsy? Need to go for a walk? How about a hike!?_\nWe have plenty of information available to find the best hike for you! \n\n_Hoping to spot some animal life?_ Checkout what types of animals are at each park to maximize your chances of seeing your fave!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3724,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"Great_Wide_Open = md `## The Great Wide Open`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"md `\nLooking to find a park with plenty of space and few people? Use the visual below to see how land area and number of visitors compare between each of the beautiful, glorious National Parks. Additionally, check out the number of registered campers as well!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"viewof year_select = radio({options:[\n {label: \"2019\", value: 2019}, \n {label: \"2020\", value: 2020}], \n value: 2019, \n title: \"Select Year\",\n description: \"Toggle between years to see how the trends changed once the COVID pandemic hit (before the pandemic - 2019, and after - 2020)\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3229,"value":"color_legend = legend({\n color: d3.scaleSequential([d3.min(joinedArray.map(d => Number(d['Recreation Visitors']))), d3.max(joinedArray.map(d => Number(d['Recreation Visitors'])))], d3.interpolateViridis),\n title: 'Number of Recreational Visitors' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3731,"value":"viewof select_region = select({\n title: \"Select Region\", \n options: [...states_group.keys()],\n value: \"West\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3747,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3742,"value":"stats_region = {\n const myDiv = DOM.element(\"div\");\n\n const data = [\n {\n type: 'bar',\n x: average_result,\n y: filtered_states,\n \n marker: {\n color: '#87bdd8'\n },\n name: 'Visitor Stats',\n orientation: \"h\", \n autosize: true\n //automargin: true\n }\n ];\n \n Plotly.newPlot(\n myDiv,\n data,\n {\n title: \"Visitor Percentage Change
from 2019 to 2020 in the \" + select_region,\n margin: { t: 50, b: 50, l: 200, r: 80 }\n },\n\n { staticPlot: true, responsive: true }\n\n );\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3715,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2582,"value":"Camping = md ` ## Camping Under the Stars... Or Glamping in Your Rig`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3695,"value":"md `\nThe National Parks have so much to offer, so much to see, so much to do!\n\nThat means you'll probably want to stay on premises overnight... and what better way than camping?\nThere are three ways to camp in the parks:\n- Backcountry camping\n- Tent camping\n- RV camping\n\nEach of these methods has their pros and cons, so having options is always nice! The visual below shows how many visitors stayed overnight in each park, for each of the three categories of camping.\n\n_Compare availability during non-pandemic (2019) and pandemic (2020) times._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3447,"value":"viewof year_select_radial = radio({options:[\n {label: \"2019\", value: 2019}, \n {label: \"2020\", value: 2020}], \n value: 2019, \n title: \"Select Year\"\n }) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2335,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3794,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"Trails = md `## Going Walkabout`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1953,"value":"md `\nHiking to one of the many amazing destinations that the Parks have to offer is one reason to strap on your boots and fill up your day-sack. But for many, the hike itself is a carthatic and extraordinary experience on its own! Hiking can be difficult, time-consuming, and even dangerous if you are not prepared. Thats why we've created a set of visualizations to help you prepare for you next adventure!\n\nSelect the state and park where you would like to hike and the map will indicate the location of each hike available, as well as the difficulty rating. Maybe you are looking for a light stroll , and therefore an _easy_ or _moderate_ hike. Maybe you want to test yourself and spend more time on the trail. Try a _hard_ or _strenuous_ hike to appease your inner Sheryl Strayed! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"viewof SelectState_alltrails = select({\n title: \"Select State\", \n options: [...all_trails_state.keys()],\n value: \"Arizona\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"viewof SelectState_trails = select({\n title: \"Select Park\", \n options: [...results_park_name.keys()].sort(d3.ascending),\n value: \"Grand Canyon National Park\"\n })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4248,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4307,"value":"md `\n Finding a hike on a map is helpful, but maybe you would prefer to identify your hikes by difficulty level, trail type, rating and number of reviews... Wow, it just so happens we have an interactive visual for you!\n\nUse the filters and resulting bar plot to find your ideal hike!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3655,"value":"viewof select_level = radio({\n title: \"Select Route Difficulty Level\", \n options: Object.keys(park_routed_difficult_Lib),\n value: \"Easy\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3660,"value":"viewof select_park_route = radio({options:[...park_route_by_difficulty.keys()], \n value: \"loop\", \n title: \"Select Park Route\"\n }) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3651,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4310,"value":"md `\n If you're like us, the inner data nerd in you is curious whether the number of reviews, the trail difficulty, or the review rating are correlated. Using the scatteplot below, try to identify a trend that may explain which trails get the best ratings!\n\n_Our thoughts: really great trails probably get really great reviews... Wow, what an insight right!? (sarcasm)_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4222,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"md `## Don't Feed, Don't Touch!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"md `\nWhat would a trip to the outdoors be without seeing the majestic creatures that live or travel through the parks on a regular basis? Use the filters and resulting donut chart to find a park that has the category of species you are looking for! This may give you the best chance of seeing that legendary, rare Tasmaniam Tiger! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1365,"value":"viewof select_region_species = select({\n title: \"Select Region\", \n options: [...states_group.keys()],\n value: \"West\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1493,"value":"viewof select_park_species = select({\n title: \"Select Park\", \n options: [...species_filtered.map(d => d.Park)].sort(d3.ascneding),\n value: \"Grand Canyon National Park\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"pie_chart_cases = {\n const myDiv = DOM.element(\"div\");\n const data = [\n {\n values: park_species_category_counts.map(d => d.category_count),\n labels: park_species_category_counts.map(d => d.species_category),\n domain: { column: 0 },\n name: 'Category',\n hoverinfo: 'label+percent+name',\n hole: .3,\n type: 'pie',\n sort: true,\n direction: 'clockwise',\n marker: {\n colors: pieColors\n }\n }\n ];\n\n var layout = {\n title: 'Proportion of Species Category at ' + select_park_species,\n autosize:true,\n annotations: [\n {\n font: {\n size: 18,\n style: 'bold'\n },\n showarrow: false,\n text: 'Category',\n x: 0.5,\n y: 0.5\n }\n ]\n };\n let config = {responsive: true}\n Plotly.newPlot(myDiv, data, layout, config);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4542,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4545,"value":"md `### Data Sources\n- https://public-nps.opendata.arcgis.com/\n- https://www.kaggle.com/planejane/national-park-trails\n- https://www.kaggle.com/nationalparkservice/park-biodiversity\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4503,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3334,"value":"md `\n## Inspiration\n_https://observablehq.com/@columbiaviz-s21/a4-interactive-visualization_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4348,"value":"md `\nWe found the below chart a few days before we submitted this assignment and found it very cool! It uses some of the same tools and techniques we learned this semester, as well as some additional ones to create a very _inspirational_ interactive visual that overlaps with the theme of this project.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4371,"value":"viewof feature = radio({\n options: [\n {label:'Popularity',value:'Popularity'},\n {label:'Length',value:'Length'},\n {label:'Elevation Gain',value:'Elevation Gain'},\n {label:'Difficulty',value:'Difficulty'},\n {label:'Visitor Usage',value:'Visitor Usage'},\n {label:'Rating',value:'Rating'}\n ],\n value: 'Popularity'\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3276,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md ` ### Top Parks Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4354,"value":"parks = FileAttachment(\"parks.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4358,"value":"states1 = FileAttachment(\"states.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"top_parks_url = 'https://raw.githubusercontent.com/AnnaPerdue/NationalParkData/main/data/parks.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"top_parks = d3.csv(top_parks_url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"top_parks_groupby = d3.group(\n top_parks,\n d => d[\"Park\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"top_parks_names = [...top_parks_groupby.keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md ` ### Vistor Statistics Data `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"visit_url_2019 = \"https://raw.githubusercontent.com/AnnaPerdue/NationalParkData/main/data/Visitation%20By%20State%20and%20By%20Park_2019.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"visit_2019 = d3.csv(visit_url_2019)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"visit_2019_clean = visit_2019.map(v => Object.assign(v, {year: \"2019\"}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"visit_2019_groupby = d3.group(\n visit_2019,\n d => d[\"Park\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"visit_2019_state = d3.group(\n visit_2019,\n d => d[\"State\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"visit_url_2020 = 'https://raw.githubusercontent.com/AnnaPerdue/NationalParkData/main/data/Visitation%20By%20State%20and%20By%20Park_2020.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"visit_2020 = d3.csv(visit_url_2020, d3.autoType())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"visit_2020_clean = visit_2020.map(v => Object.assign(v, {year: \"2020\"}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"visit_2020_groupby = d3.group(\n visit_2020,\n d => d[\"Park\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"visit_2020_state = d3.group(\n visit_2020,\n d => d[\"State\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"visit_2020_2019 =visit_2020_clean.concat(visit_2019_clean)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"visit_year_group = d3.group(\n visit_2020_2019,\n d => d[\"year\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2848,"value":"visit_year_select_year = visit_year_group.get(year_select)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2862,"value":"visit_year_select_year_group = d3.group(visit_year_select_year, d=>d['Park'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2851,"value":"function join (indexName, ...arrays) {\n const map = new Map();\n arrays.forEach((array) => {\n array.forEach((item) => {\n map.set(\n item[indexName],\n Object.assign(item, map.get(item[indexName]))\n );\n })\n })\n return [...map.values()];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2894,"value":"joinedArray = join(\"Park\", top_parks, visit_year_select_year);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md `### All trails Data `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"all_trails_url = 'https://raw.githubusercontent.com/AnnaPerdue/NationalParkData/main/data/AllTrails%20data%20-%20nationalpark.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"all_trails_data = d3.csv(all_trails_url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"all_trails_state = d3.group(\n all_trails_data,\n d => d[\"state_name\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"all_trails_park = d3.group(\n all_trails_data,\n d => d[\"area_name\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"results_park_name = d3.group(result_select_state_trails, d=>d['area_name'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"result_select_state_trails = all_trails_state.get(SelectState_alltrails)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2045,"value":"all_trails_jitter = all_trails_data.map(d => d.avg_rating)\n .map(d => d + d3.randomNormal(0, 0.05)())\n// randomData = dataSelection.map(d => d + N * d3[\"randomNormal\"]()())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2540,"value":"all_trails_sorted = sort_by_key(all_trails_data, 'difficulty_rating')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3610,"value":"park_trails = all_trails_park.get(SelectState_trails)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3615,"value":"park_difficulty = d3.group(park_trails, d => d.difficulty_rating)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3646,"value":"park_routed_difficult_Lib = Object({\n \"Easy\": \"1\",\n \"Moderate\": \"3\",\n \"Hard\": \"5\", \n \"Strenuous\": \"7\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3619,"value":"park_difficulty_filtered = park_difficulty.get(Number(park_routed_difficult_Lib[select_level]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3631,"value":"park_route_by_difficulty = d3.group(park_difficulty_filtered, d => d.route_type)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3624,"value":"park_route_difficulty= d3.group(park_difficulty_filtered, d => d.route_type).get(select_park_route)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3636,"value":"park_route_filtered = park_route_by_difficulty.get(select_park_route)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3641,"value":"park_avg_rating = d3.group(park_route_filtered, d=>d['avg_rating'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4031,"value":"features = [\"Popularity\", \"Length\", \"Elevation Gain\", \"Difficulty\", \"Visitor Usage\", \"Rating\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md `### Animal Species Data `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"animal_species_url = 'https://raw.githubusercontent.com/AnnaPerdue/NationalParkData/main/data/species.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"animal_species = d3.csv(animal_species_url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1345,"value":"species_data_grouped_by_park = d3.group(\n animal_species,\n d => d[\"Park Name\"]\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1335,"value":"park_species = species_data_grouped_by_park.get(select_park_species)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1447,"value":"species_park_name = d3.group(select_region_species, d => d['area_name'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"park_species_grouped_by_category = d3.group(park_species, d => d.Category)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"distinct_categories = [...park_species_grouped_by_category.keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"park_species_category_counts = distinct_categories.map(category => {\n const length = park_species_grouped_by_category.get(category).length;\n const counts = {\n species_category: category,\n category_count: length\n };\n return counts;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1484,"value":"species_grouped_region = states_group.get(select_region_species).map(state => state.State)\n.map(state => visit_2019_state.get(state))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1487,"value":"species_merged = [].concat.apply([], species_grouped_region)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1490,"value":"species_filtered = species_merged.filter(function(el) { return el; });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"md ` ### States` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"states_url ='https://raw.githubusercontent.com/AnnaPerdue/NationalParkData/main/data/states.csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"states = d3.csv(states_url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"regions = [...states_group.keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"states_group = d3.group(states, d => d['Region'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"merged = [].concat.apply([], states_grouped_region)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4416,"value":"visit_year_filtered = d3.group(visit_2020, d => d['State'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"states_grouped_region = states_group.get(select_region).map(d=>d.State).map(d=>visit_year_filtered.get(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"filtered = merged.filter(function(el) { return el; }); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3774,"value":"filtered_group = d3.group(filtered, d => d['State'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4207,"value":"filtered_states = [... filtered_group.keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4174,"value":"sum_filtered_group = filtered_states.map(continent => filtered_group.get(continent))\n .map(continent=>d3.sum(continent,d=>d?d['Percent Change']:0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4374,"value":"state_number_parks = filtered_states.map(state => {\n \n const length = filtered_group.get(state).length \n\n const num_parks = {\n state: state, \n num_parks: length\n }\n \n\n return num_parks;\n }).map(d=>d.num_parks)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4469,"value":"average_result = sum_filtered_group.map(function(n, i) { return n / state_number_parks[i]; });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"md `### National Park GeoJson`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"json_link = 'https://raw.githubusercontent.com/AnnaPerdue/NationalParkData/main/data/national-parks.geojson'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"geo_json = d3.json(json_link)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1678,"value":"md `### Radial Overnight Stats`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2222,"value":"radial_data = d3.csv('https://raw.githubusercontent.com/AnnaPerdue/NationalParkData/main/data/visitor_radial_clean.csv', d3.autoType, (d, _, columns) => {\n let total = 0;\n for (let i = 2; i < columns.length; ++i) total += d[columns[i]] = +d[columns[i]];\n d.total = total;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2587,"value":"data = radial_data.filter(function(elem) {\n return (elem.Year == year_select_radial)\n })\n .sort((a, b) => (b.total - a.total))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3154,"value":"names_radial = data.map(d=>d.Park)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2112,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.Park))\n .range([0, 2 * Math.PI])\n .align(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2278,"value":"y = {\n // This scale maintains area proportionality of radial bars! d3.max(transformed_data, d => d.total\n const y = d3.scaleLinear()\n .domain([0, d3.max(data.map(d => d.total))])\n //.range([innerRadius * innerRadius, outerRadius * outerRadius]);\n .range([innerRadius, outerRadius]);\n // return Object.assign(d => Math.sqrt(y(d)), y);\n return Object.assign(d => y(d), y);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3439,"value":"z = d3.scaleOrdinal()\n .domain(radial_data.columns.slice(1))\n .range([\"white\", \"rgba(0, 51, 102, .4)\", \"rgba(102, 0, 102, .4)\", \"rgba(0, 51, 0, .4)\", \"white\", \"white\", \"white\",])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2327,"value":"circle_title = g => g.append(\"g\")\n .append(\"text\")\n .text(`Overnight Camping Registrations`)\n .attr(\"font-size\", \"20px\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"transform\", `translate(-153,10)`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2131,"value":"legend_radial = g => g.append(\"g\")\n .selectAll(\"g\")\n .data(radial_data.columns.slice(2).reverse())\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(-480,${(i-22 - (radial_data.columns.length - 1) / 2) * 20})`)\n .call(g => g.append(\"rect\")\n .attr(\"width\", 18)\n .attr(\"height\", 18)\n .attr(\"fill\", z))\n .call(g => g.append(\"text\")\n .attr(\"x\", 24)\n .attr(\"y\", 9)\n .attr(\"dy\", \"0.35em\")\n .attr(\"font-size\", \"14\")\n .text(d => d))\n// legend = g => g.append(\"g\")\n// .selectAll(\"g\")\n// .data(radial_data.columns.slice(2).reverse())\n// .join(\"g\")\n// .attr(\"transform\", (d, i) => `translate(-40,${(i - (radial_data.columns.length - 1) / 2) * 20})`)\n// .call(g => g.append(\"rect\")\n// .attr(\"width\", 18)\n// .attr(\"height\", 18)\n// .attr(\"fill\", z))\n// .call(g => g.append(\"text\")\n// .attr(\"x\", 24)\n// .attr(\"y\", 9)\n// .attr(\"dy\", \"0.35em\")\n// .text(d => d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2114,"value":"innerRadius = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2803,"value":"outerRadius = Math.min(width, height) / 2\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2791,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2795,"value":"height =975","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2110,"value":"arc = d3.arc()\n .innerRadius(d => y(d[0]))\n .outerRadius(d => y(d[1]))\n .startAngle(d => x(d.data.Park))\n .endAngle(d => x(d.data.Park) + x.bandwidth())\n .padAngle(0.01)\n .padRadius(innerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2258,"value":"xAxis = g => g\n .attr(\"text-anchor\", \"middle\")\n .call(g => g.selectAll(\"g\")\n .data(data)\n .enter().append(\"g\")\n .attr(\"transform\", d => `\n rotate(${((x(d.Park) + x.bandwidth() / 2) * 180 / Math.PI - 90)})\n translate(${innerRadius},0)\n `)\n // .call(g => g.append(\"line\")\n // .attr(\"x2\", -5)\n // .attr(\"stroke\", \"#000\"))\n .call(g => g.append(\"text\")\n .attr(\"transform\", d => (x(d.Park) + x.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI) < Math.PI\n ? \"rotate(180)translate(-20,0)\"\n : \"rotate(-180)translate(-20,0)\")\n\n .attr(\"text-anchor\", \"end\")\n .text(d => d.Park)))\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2251,"value":"yAxis = g => g\n .attr(\"text-anchor\", \"middle\")\n .call(g => g.append(\"text\")\n .attr(\"y\", d => -y(y.ticks(5).pop()))\n .attr(\"dy\", \"-1em\")\n .text(\"Count\"))\n .call(g => g.selectAll(\"g\")\n .data(y.ticks(5).slice(1))\n .enter().append(\"g\")\n .attr(\"fill\", \"none\")\n // .call(g => g.append(\"circle\")\n // .attr(\"stroke\", \"#000\")\n // .attr(\"stroke-opacity\", 0.5)\n // .attr(\"r\", y))\n .call(g => g.append(\"text\")\n .attr(\"y\", d => -y(d))\n .attr(\"dy\", \"0.35em\")\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 5)\n .text(y.tickFormat(5, \"s\"))\n .clone(true)\n .attr(\"fill\", \"#000\")\n .attr(\"stroke\", \"none\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"md `### Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"pieColors = ['#e4d1d1', '#b9b0b0', '#d9ecd0', '#77a8a8', '#f0efef', '#c2d4dd', '#b0aac0', '#b2c2bf', '#c0ded9', '#3b3a30'];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3242,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3240,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3581,"value":"color_difficulty = Object({\n 1: 'rgba(51, 51, 255, 1)',\n 3: 'rgba(0, 153, 115, 1)',\n 5: 'rgba(255, 153, 51, 1)',\n 7: 'rgba(255, 80, 80, 1)'\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md `### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3116,"value":"d3v5=require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import {radio, select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2517,"value":"md `### Etcetera`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2520,"value":"function sort_by_key(array, key)\n{\n return array.sort(function(a, b)\n {\n var x = a[key]; var y = b[key];\n return ((x < y) ? -1 : ((x > y) ? 1 : 0));\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 48:"$47:body"