2d:null 2e:["$","title",null,{"children":"Mapa-base Fortaleza | Alexandre R. Cajazeira Ramos | Observable"}] 33:T1954, chart = { let width = SVGwidth; var active = d3.select(null); var svg = d3.select( DOM.svg(width, height) ).attr("width",width) .attr("height",height) ; const projection = d3.geoMercator() .fitSize([width, height*0.8], bairrosFortaleza); const path = d3.geoPath() .projection(projection); const zoom = d3.zoom() .scaleExtent([1, 15]) .translateExtent([[-(2 * width), -(1.5 * height)], [2 * width, 1.5 * height]]) .on("zoom", zoomed) // .on("wheel", null) ; const bar = svg.append("rect") .attr("width", width) .attr("height", height) .attr("opacity", 0.1) .attr('stroke', 'red') .on("click", reset) var g = svg.append("g") .style("stroke-width", "1.5px") .attr("transform", "translate(0,"+(height*0.1)+")"); const bairros = g.append("g") .attr("fill", "#005ce6") .attr("cursor", "pointer") .selectAll("path") .data(bairrosFortaleza.features) .join("path") .attr("class", "bairro") .attr("id", function(d){return "e"+d.properties.GID}) .attr("stroke-width", 0.8) .attr("opacity", 1) .attr("stroke", 'black') .attr("fillOpacity", 0.6) .attr("fill", d => d.properties.NOME == selected_bairro? selectcolor:bgcolor) .on("click", clicked) // .on("mouseenter", mouseenter) // .on("mouseleave", mouseleave) .attr("d", path) .append("title") .text(d => `${d.properties.NOME}`); const tooltip = svg.append("g"); svg .selectAll(".bairro") .on("touchmove mousemove", function(event, d) { if(TooltipControl){ const [tx, ty] = d3.pointer(event, this); tooltip.call(callout,`${d.properties.NOME}`); tooltip.attr("transform", `translate(${tx}, ${ty+(height*0.1)})`); } d3.select(this) .attr("weight", 2) .attr("color", 'black') .attr("fillOpacity", 0.8) .attr("fill", selectcolor) .raise(); }) .on("touchend mouseleave", function() { tooltip.call(callout, null); d3.select(this) .attr("weight", 1) .attr("opacity", 1) .attr("color", 'white') .attr("fillOpacity", 0.6) .attr("fill", d => d.properties.NOME == selected_bairro? selectcolor:bgcolor) .lower(); }); // svg.selectAll("g") // .on("wheel.zoom", null) // .on("mousewheel.zoom", null) // .on("mousemove.zoom", null) // .on("DOMMouseScroll.zoom", null) // ; // svg // .on("wheel.zoom", null) // .on("mousewheel.zoom", null) // .on("mousemove.zoom", null) // .on("DOMMouseScroll.zoom", null) // ; // Funções: function clicked(event, d) { const thisPath = d3.select(this); thisPath.attr("fill", 'red'); const [[x0, y0], [x1, y1]] = path.bounds(d); event.stopPropagation(); svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(Math.min(8, 0.8 / Math.max((x1 - x0) / width, (y1 - y0) / height))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.pointer(event, svg.node()) ); } function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } function reset() { bairros.transition().style("fill", null); svg.transition().duration(1500).call( zoom.transform, d3.zoomIdentity.translate(0, height*0.1), d3.zoomTransform(svg.node()).invert([width / 2, (height) / 2]) ); } if(ZoomControl){ svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([-2, 10]) .on("zoom", zoomed)); function zoomed({transform}) { g.attr("transform", transform); } } function goAt() { const [[x0, y0], [x1, y1]] = path.bounds(bairro); svg.transition().duration(1500).call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(Math.min(8, 0.8 / Math.max((x1 - x0) / width, (y1 - y0) / height))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), ); } if(WheelZoom){ svg .call(zoom) .on("wheel.zoom", null) // .on('touchmove.zoom', event => { // console.log("oi1"); // const t = d3.pointers(event, this); // console.log(t); // // if (d3.event.touches.length === 1) { // // d3.event.stopPropagation(); // // // i've also tried d3.event.preventDefault() but it doesn't do anything // // } // return this.update(event); // }) } function circles() { // const sizeScale = d3.scaleSqrt() // .domain([0, d3.max(countyGeo, d => d.properties.population)]) // .range([0, 25]); d3.selectAll('.bairro') .transition() .duration(5000) .attrTween('d', function(d, i) { // console.log(spreadMunicipalities.filter(d=> d.id == d.id)[0]); const [dx,dy] = spreadMunicipalities.filter(t=> t.id == d.id)[0].properties.center; if(!path(d)) return return flubber.toCircle(path(d), dx, dy + height * 0.1, 10, {maxSegmentLength: 2}); }) // .attrTween("d", function(d) { // const bairro = d3.select(this).data()[0], // shape = path(bairro), // [[x0, y0], [x1, y1]] = path.bounds(bairro); // const interpolator = flubber.toCircle(shape,(x0 + x1) / 2, (y0 + y1) / 2, 10, {maxSegmentLength: 2}) // return interpolator // }); } function shapes() { d3.selectAll('.bairro') .transition() .duration(5000) .attrTween("d", function(d) { const bairro = d3.select(this).data()[0], shape = path(bairro), [[x0, y0], [x1, y1]] = path.bounds(bairro); // const newPath = path(bairro1) const interpolator = flubber.fromCircle((x0 + x1) / 2, (y0 + y1) / 2, 10, shape, {maxSegmentLength: 2}) // .interpolate(bairro, newPath); return interpolator }); } // return svg.node(); return Object.assign(svg.node(), { zoomIn: () => svg.transition().call(zoom.scaleBy, 2), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.5), zoomReset: reset, zoomAt: goAt, toCircles: circles, toShape: shapes }); } 34:[{"id":"12ec5c44925ee29839f6adf4e053447761d9dd5c91611161094ddb3c572b3ae0a6549e49af4e9cadfaa75c6a9d40f105cfd9590eb7b0faefe4f1560476f7a568","href":"https://static.observableusercontent.com/files/12ec5c44925ee29839f6adf4e053447761d9dd5c91611161094ddb3c572b3ae0a6549e49af4e9cadfaa75c6a9d40f105cfd9590eb7b0faefe4f1560476f7a568","name":"bairrosFortaleza.json","type":"application/json","lastModified":1635769388158.151,"size":1921743}] 31:{"id":"cf1ece16d9cfb807","slug":"mapa-base-fortaleza","title":"Mapa-base Fortaleza","thumbnail":"d7d3c7b81d2e5708a32cb27057d5ecd7a8ed4d7d94a0ffddd04d674eb0123a4a","access_level":"public","create_time":"$D2021-11-01T10:56:53.316Z","update_time":"$D2021-12-14T18:26:47.361Z","view_time":null,"first_public_time":"$D2021-11-17T14:32:30.416Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8e753d8464d231a8","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/24092c234c1e156d4478bb8314522bb1b37a8ec8ee43d8a161f6931e7d8e6bed","tier":"starter_2024"},"version":1453,"publish_version":1453,"role":null,"authored":false,"authors":[{"type":"individual","id":"273de8807df2d5cc","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/b3a734ec21bf9f0bb7a0ecaacac5767f34267e9be1b061f79faf1fb9146aa44d","tier":null}],"members":[{"type":"individual","id":"273de8807df2d5cc","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/b3a734ec21bf9f0bb7a0ecaacac5767f34267e9be1b061f79faf1fb9146aa44d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Mapa-base Fortaleza","cells":[{"id":0,"value":"md`# Mapa-base Fortaleza `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"viewof selected_bairro = autoSelect({\n options: bairrosFortaleza.features.map(d => d.properties.NOME),\n placeholder: \"Selecione um Bairro . . .\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"Buttons = {\n \n const form = html`\n \n \n`;\n form.circle.onclick = () => chart.toCircles(); \n form.shape.onclick = () => chart.toShape();\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"zoomButtons = {\n \n const form = html`\n \n \n`;\n form.in.onclick = () => chart.zoomIn();\n form.out.onclick = () => chart.zoomOut();\n form.reset.onclick = () => chart.zoomReset();\n bairro? form.goAt.onclick = () => chart.zoomAt():'' \n \n\n const form2 = html`

Ative o Controle de Zoom para os botões

`\n return ZoomControl?form:form2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"viewof WheelZoom = checkbox({\n title: \"WheelZoom\",\n // description: \"Clique para permitir o Zoom no mapa\",\n options: [{ value: \"True\", label: \"Rolagem do mouse\" }],\n value: \"True\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"viewof ZoomControl = checkbox({\n title: \"Controle de Zoom\",\n // description: \"Clique para permitir o Zoom no mapa\",\n options: [{ value: \"True\", label: \"Zoom\" }],\n value: \"True\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"viewof TooltipControl = checkbox({\n title: \"Tooltip\",\n // description: \"Clique para permitir o Zoom no mapa\",\n options: [{ value: \"True\", label: \"Render tooltip\" }],\n value: \"True\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"viewof bgcolor = Inputs.color({label: \"BG Color\", value: \"#99d594\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"viewof selectcolor = Inputs.color({label: \"Select Color\", value: \"#fc8d59\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"viewof height = Inputs.range([100, 2000], {value: 400, step: 1, label: \"Height\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"viewof SVGwidth = Inputs.range([100, 2000], {value: width, step: 1, label: \"Width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"// d3.select('svg')\n// // .on(\"wheel.zoom\", null)\n// // .on(\"mousewheel.zoom\", null)\n// // .on(\"mousemove.zoom\", null)\n// .on(\"DOMMouseScroll.zoom\", null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"log","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"bairro = bairrosFortaleza.features.filter(d => d.properties.NOME == selected_bairro)[0] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"Data: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1410,"value":"municipalities = {\n\n const projection = d3.geoMercator()\n .fitSize([width, height*0.8], bairrosFortaleza);\n\n return bairrosFortaleza.features.map(municipality => {\n const id = municipality.id;\n const population = 100;\n\n return {\n ...municipality,\n properties: {\n id,\n population,\n centroid: projection(turf.centroid(municipality.geometry).geometry.coordinates),\n radius: 10,\n color: municipality.properties.color\n }\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1434,"value":"nodePadding = 0.1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"spreadMunicipalities = {\n \n const data = municipalities.map(({ properties: { centroid, radius } }) => ({ centroid, radius }));\n \n const simulation = d3.forceSimulation(data)\n .force(\"cx\", d3.forceX().x(d => width / 2).strength(0.02))\n .force(\"cy\", d3.forceY().y(d => height / 2).strength(0.02))\n .force(\"x\", d3.forceX().x(d => d.centroid[0]).strength(0.3))\n .force(\"y\", d3.forceY().y(d => d.centroid[1]).strength(0.3))\n .force(\"charge\", d3.forceManyBody().strength(-1))\n .force(\"collide\", d3.forceCollide().radius(d => d.radius + nodePadding).strength(1))\n .stop()\n\n let i = 0; \n while (simulation.alpha() > 0.01 && i < 200) {\n simulation.tick(); \n i++;\n }\n\n return municipalities.map((municipality, i) => {\n return {\n ...municipality,\n properties: {\n ...municipality.properties,\n center: [data[i].x, data[i].y]\n }\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"bairrosFortaleza = FileAttachment(\"bairrosFortaleza.json\").json()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1400,"value":"Imports: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":695,"value":"import {autoSelect} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"import {callout} from \"@cronaline/mexico-with-mercator-projection-and-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"import {log} from '@sorig/console-log-without-leaving-your-notebook'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"flubber = require('flubber@0.4.2');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1414,"value":"turf = require(\"@turf/turf@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"style = {\n \n const vertical = false;\n const code = html`\n \n`\n return code\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"