25:["$","title",null,{"children":"Intro to Maps in D3 | Ethan K | Observable"}] 4b:T6d1,{ const width = 512; const height = 512; const svg = d3.create("svg").attr("width", width).attr("height", height); // Try changing the projection of the map. // You can see a full list of projections here: // https://github.com/d3/d3-geo-projection // Examples are d3.geoMercator, d3.geoAlbers const projection = d3.geoAlbersUsa(); projection.fitSize([width, height], usStates); // projection maps from world coordinates to svg coordinates // projection([lon, lat]) returns an [x, y] const path = d3.geoPath().projection(projection); svg .selectAll("path") .data(usStates.features) .enter() .append("path") .attr("fill", "none") .attr("stroke", "#333") .attr("d", path); const rScale = d3 .scaleLinear() .domain(d3.extent(usCities, (d) => Math.sqrt(d.population))) .range([1, 20]); // Try to place usCities on the map. // You can compute the position of each city using projeciton([d.lon, d.lat]), which returns an [x, y] array. svg .selectAll("circle") .data(usCities) .enter() .append("circle") // Fill in the cx and cy so that the cities end up in the right position. .attr("cx", (d) => projection([d.lon, d.lat])[0]) .attr("cy", (d) => { return projection([d.lon, d.lat])[1]; }) // Update the radius based on the population .attr("r", (d) => rScale(Math.sqrt(d.population))) .style("fill", "yellow") .style("stroke", "gray") .style("stroke-width", 0.25) .style("opacity", 0.75); // Bonus: add a tooltip to the cities. // Tefer to the Interaction to Event Handlers Notebook for an example of how to do this. // https://observablehq.com/@kerzner/intro-to-event-handlers return svg.node(); }4c:T842,{ // In this part, you'll create a choropleth based on the agriculture productivity of each state. // Width and height const w = 500; const h = 300; // Define map projection const projection = d3 .geoAlbersUsa() .translate([w / 2, h / 2]) .scale([500]); // Define path generator const path = d3.geoPath().projection(projection); // Define quantize scale to sort data values into buckets of color // You can experiment with other colormaps here as well. const color = d3 .scaleQuantize() .range([ "rgb(237,248,233)", "rgb(186,228,179)", "rgb(116,196,118)", "rgb(49,163,84)", "rgb(0,109,44)" ]); //Colors derived from ColorBrewer, by Cynthia Brewer, and included in //https://github.com/d3/d3-scale-chromatic // Set up the color.domain([ d3.min(usAgProductivity, (d) => d.value), d3.max(usAgProductivity, (d) => d.value) ]); // Merge the ag. data and GeoJSON // Loop through once for each ag. data value for (let i = 0; i < usAgProductivity.length; i++) { //Grab state name const dataState = usAgProductivity[i].state; //Grab data value, and convert from string to float const dataValue = usAgProductivity[i].value; //Find the corresponding state inside the GeoJSON for (let j = 0; j < usStates.features.length; j++) { const jsonState = usStates.features[j].properties.name; if (dataState == jsonState) { //Copy the data value into the JSON usStates.features[j].properties.value = dataValue; //Stop looking through the JSON break; } } } //Create SVG element const svg = d3.create("svg").attr("width", w).attr("height", h); //Bind data and create one path per GeoJSON feature // Fill in the "fill" function below to compute the color of each state using the // color function defined above. // The "d" bound to each state is the svg .selectAll("path") .data(usStates.features) .enter() .append("path") .attr("d", path) .style("fill", (d) => color(d.properties.value)); return svg.node(); }4d:Tbbf,{ const width = 600; const height = 600; const svg = d3.create("svg").attr("width", width).attr("height", height); // Use a hex bin map of each state from here: https://github.com/donmeltz/US-States---Hexbins // Note: the data area already projected. const projection = d3 .geoIdentity() .reflectY(true) .fitSize([width, height], usHex); // Define quantize scale to sort data values into buckets of color // You can experiment with other colormaps here as well. const color = d3 .scaleQuantize() .range([ "rgb(237,248,233)", "rgb(186,228,179)", "rgb(116,196,118)", "rgb(49,163,84)", "rgb(0,109,44)" ]); //Colors derived from ColorBrewer, by Cynthia Brewer, and included in //https://github.com/d3/d3-scale-chromatic // Set up the color.domain([ d3.min(usAgProductivity, (d) => d.value), d3.max(usAgProductivity, (d) => d.value) ]); const path = d3.geoPath().projection(projection); // Merge the ag. data and GeoJSON // Loop through once for each ag. data value for (let i = 0; i < usAgProductivity.length; i++) { //Grab state name const dataState = usAgProductivity[i].state; //Grab data value, and convert from string to float const dataValue = usAgProductivity[i].value; //Find the corresponding state inside the GeoJSON for (let j = 0; j < usHex.features.length; j++) { const jsonState = usHex.features[j].properties.Name; if (dataState == jsonState) { //Copy the data value into the JSON usHex.features[j].properties.value = dataValue; //Stop looking through the JSON break; } } } const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white"); // nodes // .on("mousemove", (event, d) => { // // Keep the tooltip aligned with the mouse as we move it. // tooltip // .style("top", event.clientY - 10 + "px") // .style("left", event.clientX + 10 + "px"); // }) // .on("mouseout", (event, d) => { // // As the mouse leaves, we want to remove the tooltip // tooltip.style("visibility", "hidden"); // }); svg .selectAll("path") .data(usHex.features) .enter() .append("path") .attr("stroke", "steelblue") .attr("fill", (d) => color(d.properties.value)) .attr("d", path) .on("mouseover", (event, d) => { // When the mouse enters a circle, draw the tooltip. d3.select(event.target).style("stroke-width", "2px"); tooltip.style("visibility", "visible"); tooltip.html( `

${d.properties.Name}
${d.properties.value}

` ); }) .on("mousemove", (event, d) => { // Keep the tooltip aligned with the mouse as we move it. tooltip .style("top", event.clientY - 10 + "px") .style("left", event.clientX + 10 + "px"); }); return svg.node(); }4e:[{"id":"52cfd0b4d94a48bb19a6ce4bfa710cfe6c436e20e3e2c23d104d51c7f43845e347703cc2f63055f535366ab41941fdfa6ca998155292cab6ab94dbe55c530f9d","href":"https://static.observableusercontent.com/files/52cfd0b4d94a48bb19a6ce4bfa710cfe6c436e20e3e2c23d104d51c7f43845e347703cc2f63055f535366ab41941fdfa6ca998155292cab6ab94dbe55c530f9d","name":"us-ag-productivity.csv","type":"text/csv","lastModified":1667499922635.578,"size":853},{"id":"89955a29c0f33d6e73d1ea66e9409c79567c04a455665436a5d244d1b7bd0e223cafda477f68cb7413fffed02acd2956f7e094e8abda81bc1a681ace0317b85c","href":"https://static.observableusercontent.com/files/89955a29c0f33d6e73d1ea66e9409c79567c04a455665436a5d244d1b7bd0e223cafda477f68cb7413fffed02acd2956f7e094e8abda81bc1a681ace0317b85c","name":"us-states.json","type":"application/json","lastModified":1667499922655.242,"size":87834},{"id":"0e1ff3dbc843991b590208c6e303c48af2fa78ed5b776785fd94d6390a8c14bae0c9501759f9297d7c951a6cb7c6fd3915921e9c04fbb90d7a18fa772624a6c4","href":"https://static.observableusercontent.com/files/0e1ff3dbc843991b590208c6e303c48af2fa78ed5b776785fd94d6390a8c14bae0c9501759f9297d7c951a6cb7c6fd3915921e9c04fbb90d7a18fa772624a6c4","name":"us-cities.csv","type":"text/csv","lastModified":1667499922650.481,"size":2132},{"id":"c30dbd52b12fbf3477e1ea60e01f6db750c4a0b284cbc466a4e8633a5c97b243a3bea240d7225e2343a452efa706589b3b7b3bded1bac64efae3b1514f28ce63","href":"https://static.observableusercontent.com/files/c30dbd52b12fbf3477e1ea60e01f6db750c4a0b284cbc466a4e8633a5c97b243a3bea240d7225e2343a452efa706589b3b7b3bded1bac64efae3b1514f28ce63","name":"hex.geojson","type":"application/geo+json","lastModified":1667505361352.048,"size":37994}] 47:{"id":"2a7e5317c7bca87e","slug":"intro-to-maps-in-d3","title":"Intro to Maps in D3","thumbnail":"192976a59f6cd60cfbce5cfd187346cd236598ce57110782fa9bb6ff7b7dd20e","access_level":"public","create_time":"$D2022-11-03T18:23:49.439Z","update_time":"$D2022-11-03T21:36:43.651Z","view_time":null,"first_public_time":"$D2022-11-03T20:04:24.146Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e6524ee95f0d6383","login":"kerzner","name":"Ethan K","avatar_url":"https://avatars-next.observableusercontent.com/870078d733d5f4d5e720a7ffca160e749ce6d67498b297ac1aa7987ae0d90166","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":234,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"57dee57289581a9b","login":"kerzner","name":"Ethan K","avatar_url":"https://avatars-next.observableusercontent.com/870078d733d5f4d5e720a7ffca160e749ce6d67498b297ac1aa7987ae0d90166","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"57dee57289581a9b","login":"kerzner","name":"Ethan K","avatar_url":"https://avatars-next.observableusercontent.com/870078d733d5f4d5e720a7ffca160e749ce6d67498b297ac1aa7987ae0d90166","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Intro to Maps in D3","cells":[{"id":0,"value":"# Intro to Maps in D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"usStates = FileAttachment(\"us-states.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"usStates.features[0].geometry.coordinates[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"*** Part 1 *** - Get familiar with projections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"{\n const width = 512;\n const height = 512;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n // Try changing the projection of the map.\n // You can see a full list of projections here:\n // https://github.com/d3/d3-geo-projection\n // Examples are d3.geoMercator, d3.geoAlbers\n const projection = d3.geoAlbersUsa();\n projection.fitSize([width, height], usStates);\n\n const path = d3.geoPath().projection(projection);\n\n svg\n .selectAll(\"path\")\n .data(usStates.features)\n .enter()\n .append(\"path\")\n .attr(\"fill\", (d, i) => (d.properties.name[0] == \"V\" ? \"red\" : \"none\"))\n .attr(\"stroke\", \"#333\")\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"*** Part 2 *** - Render cities on the map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"usCities = FileAttachment(\"us-cities.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"*** Part 3 *** - attach data to the GeoJSON. Upload a screenshot to Blackboard when you're done with it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"usAgProductivity = FileAttachment(\"us-ag-productivity.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"** Part 4 ** - color this hex map using the same data from above","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"usHex = FileAttachment(\"hex.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null