32:Tc80,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, renderData.width, renderData.height]) //.attr("preserveAspectRatio", "xMinYMin"); const group1 = svg.append("g") group1.append("text") .attr("font-weight", "bold") .text("Population") group1.attr("class", "legend_auto") .style('font-size', 12) .style('font-family', 'sans-serif') .attr("transform", "translate(10,20)") .call(legend_svg) svg.selectAll('.label') .attr("transform", "translate(20, 13)") const margin_top_legend = 70; const margin_right_legend = 250; svg.select(".legend_auto") .attr("transform", `translate(${centerScale(9)},${margin_top_legend})`) console.log(centerScale(8)) const clippedWidth = renderData.width - renderData.margin * 2; const clippedHeight = renderData.height - renderData.margin * 2; const geoMercator = d3 .geoMercator() // the center uses longtitude and latitude // get Long/Lat data from google maps .center([128, 36]) .fitSize([clippedWidth, clippedHeight], geoJson); const pathGen = d3.geoPath(geoMercator); const stage = svg .append('g') .attr('transform', `translate(${renderData.margin},${renderData.margin})`); 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'); const onMouseHover = d => { stage .selectAll('.geopath') .filter(td => td.properties.ADM1_EN === d.properties.ADM1_EN) .transition() .duration(250) .attr('fill', "rgba(255,69,0,0.5)") .style('transform-origin', "center center") .style('transform', "scale(1.02)") .style("mix-blend-mode", "darken"); infoText.text(d.properties.ADM1_EN); tooltip.html(`

Region: ${d.properties.ADM1_EN}

Population: ${population_format(d.properties.population)}

`) .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.ADM1_EN === d.properties.ADM1_EN) .transition() .duration(250) .attr('fill', td => colorScale(td.properties.population)) .style('transform-origin', "center center") .style('transform', "scale(1)") .attr('stroke-width' , 1); infoText.text('Hover on a region'); tooltip.html(``).style('visibility', 'hidden'); }; const tEnter = enter => enter .append('path') .attr('d', pathGen) .attr('stroke', 'white') .attr('fill', td => colorScale(td.properties.population)) .classed('geopath', true) .on('mouseenter', onMouseHover) .on('mousemove', onMouseMove) .on('mouseleave', onMouseLeave); const tUpdate = null; const tExit = null; stage .selectAll('.geopath') .data(geoJson.features) .join(tEnter, tUpdate, tExit); return svg.node(); }33:T13bf,chart2 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, renderData.width, renderData.height]) //.attr("preserveAspectRatio", "xMinYMin"); const group1 = svg.append("g") group1.attr("class", "legend_auto") .style('font-size', 12) .style('font-family', 'sans-serif') .attr("transform", "translate(10,20)") .call(legend_svg) group1.append("text") .attr("font-weight", "bold") .text("Population") svg.selectAll('.label') .attr("transform", "translate(20, 13)") const circle = d3.symbol().type(d3.symbolCircle); const symbolScale = d3.scaleOrdinal() .domain(['SM Supermall',]) .range([ "blue"] ); const legendCircle = d3Legend .legendColor() .shape("path", d3.symbol().type(d3.symbolCircle).size(25)()) //.shape("circle") .scale(symbolScale) .shapePadding(15) .labelOffset(5) .labels(["SM Supermalls"]); svg.append("g") .attr("class", "legend_circle") .style('font-size', 12) .style('font-family', 'sans-serif') .attr("transform", "translate(10,20)") .call(legendCircle) const margin_top_legend = 70; const margin_right_legend = 250; svg.select(".legend_auto") .attr("transform", `translate(${centerScale(8)},${margin_top_legend})`) svg.select(".legend_circle") .attr("transform", `translate(${centerScale(8)},${margin_top_legend+220})`) const clippedWidth = renderData.width - renderData.margin * 2; const clippedHeight = renderData.height - renderData.margin * 2; const geoMercator = d3 .geoMercator() // the center uses longtitude and latitude // get Long/Lat data from google maps .center([118, 11.6]) .fitSize([clippedWidth, clippedHeight], geoJson); const pathGen = d3.geoPath(geoMercator); const stage = svg .append('g') .attr('transform', `translate(${renderData.margin},${renderData.margin})`); 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'); const onMouseHover = d => { stage .selectAll('.geopath') .filter(td => td.properties.ADM1_EN === d.properties.ADM1_EN) .transition() .duration(250) .attr('fill', "rgba(255,69,0,0.5)") .style('transform-origin', "center center") .style('transform', "scale(1.02)") .style("mix-blend-mode", "darken"); infoText.text(d.properties.ADM1_EN); tooltip.html(`

Region: ${d.properties.ADM1_EN}

Population: ${population_format(d.properties.population)}

${d.mall_name} is located at ${d.province}

` ) .style('visibility', 'visible') .style('color', 'blue'); }) .on('mousemove', function () { tooltip .style('top', d3.event.pageY - 10 + 'px') .style('left', d3.event.pageX + 10 + 'px'); }) .on('mouseout', function () { tooltip.html(``).style('visibility', 'hidden') .style('color', "rgba(200, 69, 0, 1)"); }); console.log(svg.selectAll(".malls")) svg.selectAll(".malls") .attr('transform', `translate(${renderData.margin},${renderData.margin})`); return svg.node(); }34:[{"id":"af84e18408a77f83c4f30a41ccdbcfbc20f8ea1af776bffbd4c499674d2d80b8089c7474de6e5996b7e2dc9ed3bc945fcdcb1ab0f163adaec1ecdea8e5ec5e18","href":"https://static.observableusercontent.com/files/af84e18408a77f83c4f30a41ccdbcfbc20f8ea1af776bffbd4c499674d2d80b8089c7474de6e5996b7e2dc9ed3bc945fcdcb1ab0f163adaec1ecdea8e5ec5e18","name":"philippines-region.json","type":"application/json","lastModified":1593959483547.556,"size":602350},{"id":"6553226dc589d66f1add9942356fbd661ada16e185c5cb2745073b971b5b3c24b88bbbf176d4aea75683f26fa7bd680fd52279c4cb49d9b3a8620d09bbc558e6","href":"https://static.observableusercontent.com/files/6553226dc589d66f1add9942356fbd661ada16e185c5cb2745073b971b5b3c24b88bbbf176d4aea75683f26fa7bd680fd52279c4cb49d9b3a8620d09bbc558e6","name":"philippine_region_population@4.csv","type":"text/csv","lastModified":1593959483547.556,"size":430},{"id":"01f239ea4de9590c7b5d0f012bd8e26c75aa6ca68819e0f72cb311bc32988a534fc64adef2566aa16240197302583417d3402e4fc8eae2206b761e120ea249f5","href":"https://static.observableusercontent.com/files/01f239ea4de9590c7b5d0f012bd8e26c75aa6ca68819e0f72cb311bc32988a534fc64adef2566aa16240197302583417d3402e4fc8eae2206b761e120ea249f5","name":"sm.csv","type":"text/csv","lastModified":1593962663895.317,"size":3922}] 30:{"title":"One chart a day - Plotting SM Supermalls on the Philippines Map","cells":[{"id":0,"value":"md `# One chart a day - Plotting SM Supermalls on the Philippines Map\n\nThis is a continuation of [this notebook](https://observablehq.com/@richdayandnight/one-chart-a-day-philippines-map-w-population)\n\nObjectives:\n1. Make map responsive\n2. Try to plot circles on top of map\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"md `## Load GeoJson\n\n[Philippines Geojson source](https://github.com/faeldon/philippines-json-maps/blob/master/geojson/regions/lowres/regions.0.001.json)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"geoJson = await FileAttachment(\"philippines-region.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":577,"value":"md `## Create Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"md `# 2015 Population Data of the Philippines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"md `## Trial - plotting malls\n\nPlotted SM Supermall on the Philippines map (data scraped by me)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"mall_data = {\n const text = await FileAttachment(\"sm.csv\").text();\n return d3.csvParse(text, ({mall_name, latitude, longitude, province}) => ({\n mall_name: mall_name,\n latitude: +latitude,\n longitude: +longitude,\n province: province,\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"md `## SM Supermalls on the Philippines Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"md `## Conclusion\n\nDid I reach my objectives?\n1. ✔️ Make map responsive\n2. ✔️ Try to plot circles on top of map\n\n\nSome things to note:\n- For the responsiveness of the map to work, I had to change \n\\`\\`\\`\nconst svg = d3\n .create('svg')\n .attr('width', renderData.width)\n .attr('height', renderData.height);\n\\`\\`\\`\n\nto\n\n\\`\\`\\`\nconst svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, renderData.width, renderData.height])\n\\`\\`\\`\n- When I first plotted the circles/bubbles on the map, the circles aren't plotted properly. They're around M pixels above the correct y coordinate and N pixels left of the correct x coordinated. I manually shifted/translated all the circles using the code below\n\\`\\`\\`\nsvg.selectAll(\".malls\")\n .attr('transform', \\`translate(\\${renderData.margin},\\${renderData.margin})\\`);\n\\`\\`\\`\n- Need to find a way to zoom in and out of map, for the next one chart a day submission.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md `---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@v5\", \"d3-hexbin@0.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"d3Legend = require(\"d3-svg-legend\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"colorScale = d3.scaleSequential([0, d3.max(loaded_data, d => d.population)], d3.interpolateYlOrRd)","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"height = 500;","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"topojson = require(\"topojson-server@3\", \"topojson-client@3\", \"topojson-simplify@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"color = '#69b3a2'","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"population_format = d3.format(\".2s\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"renderData = ({\n width: 750,\n height: 1000,\n margin: 50,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"centerScale = d3.scaleLinear()\n .domain([0,10])\n .range([0, renderData.width]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'tooltip')\n \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', \"rgba(200, 69, 0, 1)\")\n .style('font-family','sans-serif')\n .text('a simple tooltip');","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"loaded_data = {\n const text = await FileAttachment(\"philippine_region_population@4.csv\").text();\n return d3.csvParse(text, ({Location, Population}) => ({\n location: Location,\n population: +Population\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"legend_svg = {\n const svg = d3.select(DOM.svg(500, 500))\n \n const scale = d3.scaleOrdinal()\n .domain([\"Bike\", \"Run\", \"Walk\"])\n .range([\"#8242a8\", \"#ff1493\", \"#FFCE1E\"]);\n \n var sequentialScale = d3.scaleSequential(d3.interpolateYlOrRd)\n .domain([0,d3.max(loaded_data, d => d.population)]);\n\nsvg.append(\"g\")\n .attr(\"class\", \"legendSequential\")\n .attr(\"transform\", \"translate(20,20)\");\n\nvar legendSequential = d3Legend.legendColor()\n .shapeHeight(15)\n .shapePadding(20)\n .orient(\"vertical\")\n .labelOffset(20)\n .cells(10)\n .labelFormat(population_format)\n .scale(sequentialScale) \n \n const group = d3.create(\"g\")\n .append(\"text\")\n .text(\"Hello\")\n\n return legendSequential\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"{\n var country_population_dict = {};\n loaded_data.map((e,i) => { country_population_dict[e.location]=e.population});\n //console.log(country_population_dict[\"Region I\"]);\n for (var property in geoJson.features) {\n if (geoJson.features.hasOwnProperty(property)) {\n geoJson.features[property].properties.population = country_population_dict[geoJson.features[property].properties.ADM1_EN];\n //console.log(geoJson.features[property].properties);\n }\n}\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}