25:["$","title",null,{"children":"One chart a day - Summarizing how to make a map with d3 and geojson | Stella Holbrook's Workspace | Observable"}] 49:T119c,{ // create svg html element const svg = d3.create('svg') .attr("viewBox", [0, 0, chart_dimensions.width, chart_dimensions.height]); // merge geojson and budget data for convenient access of income class code and income group in tooltip mergeGeoJsonAndBudgetData() const clippedWidth = chart_dimensions.width - chart_dimensions.margin * 2; const clippedHeight = chart_dimensions.height - chart_dimensions.margin * 2; const legend_title = svg.append("g") legend_title.attr("class", "legend") .style('font-size', 12) .style('font-family', 'sans-serif') .attr("transform", `translate(${centerScale(7)},50)`) .append("text") .attr("font-weight", "bold") .text("Income Class Code") const legend_group = svg.append("g") legend_group.attr("transform", `translate(${centerScale(7)},70)`) .call(legend) // initialize geoMercator const geoMercator = d3 .geoMercator() // the center uses longtitude and latitude // get Long/Lat data from google maps .center([199, 36]) .fitSize([clippedWidth, clippedHeight], geoJson); // initialize geoPath with the help of the mercator // This will be our data later const pathGen = d3.geoPath(geoMercator); // initialize zoom const zoom = d3.zoom() .scaleExtent([1, 8]) .on('zoom', zoomed); // initialize stage // stage is basically just a group appended to the main svg const stage = svg .append('g') .attr('transform', `translate(${chart_dimensions.margin},${chart_dimensions.margin})`); // initialize Hover text on the upper left const textX = 10; const textY = 10; const infoText = stage .append('g') .attr('transform', `translate(${textX},${textY})`) .append('text') .style("font", "20px sans-serif"); infoText.text('no data'); // setup onMouseHover, onMouseMove, onMouseLeave on the polugons const onMouseHover = d => { let income_class_text = d.properties.income_class; let income_group_text = d.properties.income_group; if (d.properties.income_class == undefined) { income_class_text = `No information available` income_group_text = `No information available` } stage .selectAll('.geopath') .filter(td => td.properties.ADM2_EN === d.properties.ADM2_EN) .attr('fill', 'yellow'); infoText.text(d.properties.ADM2_EN); tooltip.html(`

Province: ${d.properties.ADM2_EN}

Region: ${d.properties.ADM1_EN}

Income Code: ${income_class_text}

Income Class: ${income_group_text}

`) .style('visibility', 'visible'); }; const onMouseMove = d => { tooltip .style('top', d3.event.pageY - 10 + 'px') .style('left', d3.event.pageX + 10 + 'px'); } const onMouseLeave = d => { stage .selectAll('.geopath') .filter(td => td.properties.ADM2_EN === d.properties.ADM2_EN) .attr('fill', function(td) { if (typeof td.properties.income_class === "number"){ return colorScale(td.properties.income_class) } else{ return "white" }}); infoText.text('Hover on a province'); tooltip.html(``).style('visibility', 'hidden'); }; // initialize tEnter (polygons that composes the map) // initialize tUpdate, tExit (optional) const tEnter = enter => enter .append('path') .attr('d', pathGen) .attr('stroke', 'purple') .attr('fill', function(td) { if (typeof td.properties.income_class === "number"){ return colorScale(td.properties.income_class) } else{ return "white" }}) .classed('geopath', true) .on('mouseenter', onMouseHover) .on('mousemove', onMouseMove) .on('mouseleave', onMouseLeave); const tUpdate = null; const tExit = null; // setup stage stage .selectAll('.geopath') .data(geoJson.features) .join(tEnter, tUpdate, tExit); // call zoom svg.call(zoom); // zoomed functio nfor zoom function zoomed() { stage .selectAll('path') // To prevent stroke width from scaling .attr('transform', d3.event.transform); } return svg.node(); }4a:[{"id":"d8c09d76097e44a311f9d4a122302d7dfb49c8633ea1d0580b4ba34603b6fc881e852cceec79f0d70767c7f14d8cf25afa40025eddb9c887368d19c0bd9ffd24","href":"https://static.observableusercontent.com/files/d8c09d76097e44a311f9d4a122302d7dfb49c8633ea1d0580b4ba34603b6fc881e852cceec79f0d70767c7f14d8cf25afa40025eddb9c887368d19c0bd9ffd24","name":"Philippines_provinces@1.geojson","type":"application/geo+json","lastModified":1699331221491.248,"size":1692122},{"id":"f11d622e5c6dc5748480169393a25a8ec7b50c7262233947db5386b64fd2198ed92c51cbe708db72d0d0b1d7b8d515a9ca7ae68998ab3813c1a868c846d2dc1c","href":"https://static.observableusercontent.com/files/f11d622e5c6dc5748480169393a25a8ec7b50c7262233947db5386b64fd2198ed92c51cbe708db72d0d0b1d7b8d515a9ca7ae68998ab3813c1a868c846d2dc1c","name":"local_gov_finance_data@2.csv","type":"text/csv","lastModified":1699331221491.248,"size":190711}] 29:{"id":"968073cc765dfb21","slug":null,"title":"One chart a day - Summarizing how to make a map with d3 and geojson","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-11-07T04:27:01.491Z","update_time":"$D2023-12-07T01:51:47.353Z","view_time":null,"first_public_time":"$D2023-11-07T04:27:01.491Z","has_unpublished_edits":null,"fork":{"id":"5570430adde5f107","slug":"one-chart-a-day-summarizing-how-to-make-a-map-with-d3-and-geojs","title":"One chart a day - Summarizing how to make a map with d3 and geojson","owner":{"id":"074c7bc8d19d44f3","login":"richdayandnight","name":"Rich"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2153b76901ba6ce0","login":"stella-holbrook-ws","name":"Stella Holbrook's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a28ff56d55268b10ce00cbf7804f508962786ecbfd89a64f4403c268e8ff9e56","tier":"starter_2024","bio":"","following":false},"version":392,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"666f8f22e6c30342","login":"stella-holbrook","name":"Stella Holbrook","avatar_url":"https://avatars-next.observableusercontent.com/0322684e66d136dd7f58b84d004815dd665eea17f3fca7aa62e2ce6bb9ca20c8","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"666f8f22e6c30342","login":"stella-holbrook","name":"Stella Holbrook","avatar_url":"https://avatars-next.observableusercontent.com/0322684e66d136dd7f58b84d004815dd665eea17f3fca7aa62e2ce6bb9ca20c8","tier":null,"role":"editor"},{"type":"team","id":"2153b76901ba6ce0","login":"stella-holbrook-ws","name":"Stella Holbrook's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a28ff56d55268b10ce00cbf7804f508962786ecbfd89a64f4403c268e8ff9e56","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":"One chart a day - Summarizing how to make a map with d3 and geojson","cells":[{"id":0,"value":"md`# One chart a day - Summarizing how to make a map with d3 and geojson\n\nObjectives:\n1. Summarize making a map with d3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md `## Load geojson file`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"geoJson = await FileAttachment(\"Philippines_provinces@1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"geoJson.features.filter(function(item){\n return item.properties.income_class == undefined; \n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md `## Philippines Map\n\n- scroll up/down to zoom in/out\n- drag and drop map to pan \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md `## Load budget data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"budget_data = {\n const text = await FileAttachment(\"local_gov_finance_data@2.csv\").text();\n return d3.csvParse(text, (d) => ({\n lgu_type: d.lgu_type,\n region: d.region,\n province: d.province,\n lgu_name: d.lgu_name,\n income_classification_code: +d.income_classification_code,\n population: d.population,\n income_group: d.income_group\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"md `## Merge geojson and budget data\n\n- This is done so that the income class codes and income calss groups are easily accessible by the tooltips.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"function mergeGeoJsonAndBudgetData (){\n var income_classsification_dict = {};\n var income_group_dict = {};\n budget_data_province.map((e,i) => { income_classsification_dict[e.province]=e.income_classification_code});\n budget_data_province.map((e,i) => { income_group_dict[e.province]=e.income_group});\n console.log(income_classsification_dict);\n for (var property in geoJson.features) {\n if (geoJson.features.hasOwnProperty(property)) {\n geoJson.features[property].properties.income_class = income_classsification_dict[geoJson.features[property].properties.ADM2_EN];\n geoJson.features[property].properties.income_group = income_group_dict[geoJson.features[property].properties.ADM2_EN];\n //console.log(geoJson.features[property].properties);\n }\n}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"budget_data_province = await get_budget_data_province();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"function get_budget_data_province() {\n const budget_data_province_temp = budget_data.filter(function(item){\n return item.lgu_type == \"PROVINCE\"; \n });\n \n budget_data_province_temp.forEach(function(item){\n item.province = item.province.toLowerCase().replace(/(^\\w{1})|(\\s{1}\\w{1})/g, match => match.toUpperCase());\n item.province = item.province.replace(\"Del\", \"del\");\n console.log(item);\n });\n //console.log(budget_data_province_temp)\n return budget_data_province_temp;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"uniqueIncomeClassificationCode = [...new Set(budget_data_province.map(({ income_classification_code }) => income_classification_code))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md `## Conclusion\n\nDid I reach my objectives?\n1. ✔️ Summarize making a map with d3\n\nSome things to note:\n- [Mercator projection](https://www.sciencedirect.com/topics/earth-and-planetary-sciences/mercator-projection)\n - \"The Mercator projection is a cylindrical map projection presented by the Flemish geographer and cartographer Gerardus Mercator in 1569. This map projection is practical for nautical applications due to its ability to represent lines of constant course, known as rhumb lines, as straight segments that conserve the angles with the meridians. Although the linear scale is equal in all directions around any point, thus preserving the angles and the shapes of small objects, the Mercator projection distorts the size of objects as the latitude increases from the equator to the poles, where the scale becomes infinite\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md `---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"chart_dimensions = ({\n width: 850,\n height: 1100,\n margin: 50,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require(\"d3@v5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"color = '#69b3a2'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background-color', 'rgba(255,255,255,0.90)')\n .style('border-radius', '10px')\n .style('-webkit-border-radius', '10px')\n .style('box-shadow', '0 0 2px 0px white inset, 0 0 1px 0px black')\n .style('color', \"purple\")\n .style('font-family','sans-serif')\n .text('a simple tooltip');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":" colorScale = d3.scaleSequential([0, d3.max(budget_data_province, d => d.income_classification_code)], d3.interpolatePurples)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"legend = svg => {\n const g = svg\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-size\", 15)\n .selectAll(\"g\")\n .data([\"1\", \"2\", \"3\", \"4\", \"5\"])\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * 25}, 0)`);\n\n g.append(\"rect\")\n .attr(\"width\", 19)\n .attr(\"height\", 19)\n .attr(\"fill\", colorScale);\n\n g.append(\"text\")\n .attr(\"x\", 10)\n .attr(\"y\", -10)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"centerScale = d3.scaleLinear()\n .domain([0,10])\n .range([0, chart_dimensions.width]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"code = {\n \n let data = [\n { time: new Date(2020, 0, 1), value: 10},\n { time: new Date(2020, 0, 2), value: 20},\n { time: new Date(2020, 0, 3), value: 30},\n { time: new Date(2020, 0, 4), value: 40},\n { time: new Date(2020, 0, 5), value: 50}\n];\n\n\nlet groupedData = d3.group(data, d => d.time);}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null