29:null 2a:["$","title",null,{"children":"Map | chelseazheng | Observable"}] 2f:T698,buttons = { // var button2015 = "

"; // var button2016 = "

"; // var button2017 = "

"; const buttons = html`

Choose years:

` // function update() { // } //bind querySelector var startYear = 2015; var endYear = 2017; var ss = title.innerHTML; console.log(ss); // for (var i = startYear; i <= endYear; i++) { // buttons.querySelector("#y" + i).onclick = () => { // var ss = title.innerHTML; // ss = ss.split(" ").slice(0,-1).join(" "); // title.innerHTML = ss + " " + i; // } // } // buttons.querySelector("#y2015").onclick = () => { // var ss = title.innerHTML; // ss = ss.split(" ").slice(0,-1).join(" "); // title.innerHTML = ss + " 2015"; // } // buttons.querySelector("#y2016").onclick = () => { // var ss = title.innerHTML; // ss= ss.split(" ").slice(0,-1).join(" "); // title.innerHTML = ss + " 2016";} // buttons.querySelector("#y2017").onclick = () => { // var ss = title.innerHTML; // ss= ss.split(" ").slice(0,-1).join(" "); // title.innerHTML = ss + " 2017";} return buttons; } 30:T747,map = { let container = DOM.element('div',{style: `width:${width}px; height:${width / 1.6}px`}); yield container; let map = L.map(container).setView([37.8, -96], 4); let osmLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 5, id: 'mapbox.light', accessToken: 'pk.eyJ1IjoibWFyZ2FyZXR3dyIsImEiOiJjam9ieGlucTUwZjdxM3JwYmxub2tiZ3AwIn0.cwdLeCUHIJb56gMxced16w' }).addTo(map); //Color layer createColorLayer(data2015).addTo(map); //Attach info to the map info.addTo(map); //Once attached to the map, the style of info can be specified info._div.style["background"] = "rgba(255,255,255,0.8)"; info._div.style["padding"] = "6px 8px"; info._div.style["font"] = "14px/16px Arial, Helvetica, sans-serif"; info._div.style["box-shadow"] = "0 0 15px rgba(0,0,0,0.2)"; info._div.style["border-radius"] = "5px"; //Attach legend to the map for visualization legend.addTo(map); //Specify style for legend legend._container.style["line-height"] = "18px"; legend._container.style["color"] = "#555"; legend._container.style["background"] = "rgba(255,255,255,0.8)"; legend._container.style["padding"] = "6px 8px"; legend._container.style["box-shadow"] = "0 0 15px rgba(0,0,0,0.2)"; legend._container.style["border-radius"] = "5px"; // Adding layer group to map var clickableStates = createClickableStates(data2015, map); clickableStates.addTo(map); // // Animation layer // var animationLayer = createAnimationLayer(map, data2015); // animationLayer.addTo(map); }31:T48b,createAnimation = (map, data) => { var geojson; //Interaction 1 function highlightFeature(e){ var state = e.target; state.setStyle({ weight: 5, color :'#666', dashArray:' ', fillOpacity: 0.7 }); //For a few specific browsers if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { state.bringToFront(); } //At the same time, update the number displayed in the infobox info.update(state.feature.properties); } //Interaction2 function resetHighlight(e){ geojson.resetStyle(e.target); info.update(); } //Interaction3 function zoomToFeature(e){ map.fitBounds(e.target.getBounds()); } //Set up all interactions function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } // Deploy all interaction to each data geojson = L.geoJson(data, { style: style, onEachFeature: onEachFeature }).addTo(map); // geojson = L.geoJson(data, { // style: style, // onEachFeature: onEachFeature // }); return geojson; }32:T4bf,createClickableStates = (data, map) => { // var statesIn2015 = ["Utah", "Georgia", "South Dakota", "Oregon", "Vermont"]; var markers = [] for (var i = 0; i < data.features.length; i++) { var state = data.features[i]; var latlngs = L.GeoJSON.coordsToLatLngs(state.geometry.coordinates[0]); markers.push(new L.Polygon(latlngs, { fillColor: getColor(state.properties.scores), weight : 2, opacity: 1, color: 'white', dashArray: '3', fillOpacity:1, props: state.properties//customized property })); } // Creating the feature group var clickableStates = L.featureGroup(markers); var customOptions = { // 'minHeight': '500', //Does not exist for popup 'minWidth': '500', 'className' : 'custom'}; //Helper functions //Interaction3 // function zoomToLayer(e){ // map.fitBounds(e.target.getBounds()); // } clickableStates.eachLayer(function (layer) { onEachLayer(layer); }); function onEachLayer(layer) { layer.bindPopup('Hello, I am ' + layer.options.props.name, customOptions); // layer.on({ // click: zoomToLayer // }); } return clickableStates; }33:[] 2d:{"id":"3858e99756a3f3bf","slug":"map","title":"Map","thumbnail":"241b9716f20ae8d3d728287c93a4603e1f20db2bce1b5f70dcf9f9f682785038","access_level":"public","create_time":"$D2018-11-18T16:30:24.512Z","update_time":"$D2018-11-21T01:18:52.347Z","view_time":null,"first_public_time":"$D2018-11-19T05:15:15.071Z","has_unpublished_edits":null,"fork":{"id":"653a66d2cf5378ec","slug":"map","title":"Map","owner":{"id":"1f125dcf5d7b852a","login":"margretwg","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a58271605509b10","login":"chelseazheng","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f15fc04e8237503e617c357f1b6a8df22deee595a9c819a5b9a3e92a309cda","tier":"starter_2024"},"version":597,"publish_version":597,"role":null,"authored":false,"authors":[{"type":"individual","id":"d1f5405816f2519b","login":"chelseazheng","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f15fc04e8237503e617c357f1b6a8df22deee595a9c819a5b9a3e92a309cda","tier":null}],"members":[{"type":"individual","id":"d1f5405816f2519b","login":"chelseazheng","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f15fc04e8237503e617c357f1b6a8df22deee595a9c819a5b9a3e92a309cda","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Map","cells":[{"id":0,"value":"md`# Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"title = html`

Topic: Air Pollution Year: 2008

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"createColorLayer = data => {\n return L.geoJson(data,{style:style});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"info = {\n var info = L.control();\n \n info.onAdd = function (map) { //- dynamic\n this._div = L.DomUtil.create('div', 'info'); // create a div with a class \"info\" , this = info\n this.update();\n return this._div;\n };\n\n // method that we will use to update the control based on feature properties passed\n info.update = function (props) {\n this._div.innerHTML = '

US Search trends scores

' + (props ?\n '' + props.name + '
' + props.scores\n : 'Hover over a state');\n };\n \n return info;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"legend = {\n var legend = L.control({position:\"bottomright\"});\n legend.onAdd = function(map) {\n var div = L.DomUtil.create('div','info legend'); //class info && legend\n var grades = [0,40,55,70,85];\n\n //Loop for decorating each legend in HTML - static\n for (var i = 0; i < grades.length; i ++){\n var eachLegend = ' ' + grades[i] + \n (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');\n div.innerHTML += eachLegend;\n }\n\n return div;\n };\n \n return legend;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"getColor = d => {\n return d > 85 ? '#800026' :\n d > 70 ? '#BD0026' :\n d > 55 ? '#E31A1C' :\n d > 40 ? '#FD8D3C':\n '#FFEDA0';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"style = feature=>{\n return {\n fillColor: getColor(feature.properties.scores),\n weight : 2,\n opacity:1,\n color: 'white',\n dashArray: '3',\n fillOpacity:0.5\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"statesdata = await d3.json(\"https://gist.githubusercontent.com/MargretWG/a83d99fed942c4d1cab8b2d58ee36756/raw/6829b536fe896e212ccbec602bbb37640329a8bb/processed_state_data.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"data2015 = {\n \n var statesIn2015 = [\"Utah\", \"Georgia\", \"South Dakota\", \"Oregon\", \"Vermont\"];\n var data = JSON.parse(JSON.stringify(statesdata)); //clone JSON object $statesdata\n var features = data.features;\n \n for (var i = 0; i < features.length;) {\n //Remove elements whose names are not in statesIn2015 array \n if (!statesIn2015.includes(features[i].properties.name))\n features.splice(i, 1);\n else\n i++;\n }\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 2e:"$2d:body"