Data Visualization Enthusiast, professor of Computer Science at Universidade Federal do Ceara, Fortaleza, Brazil.
Published
Edited
Jul 21, 2021
114 forks
1 star
buildvis = {
let view = md`${container()}`
return view
}
map = {
buildvis;
let mapInstance = L.map('mapid').setView([-3.792614,-38.515877], 12)
L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
attribution: `© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>,
Map tiles by © <a href="https://carto.com/attribution">CARTO</a>`,
maxZoom: 18
}).addTo(mapInstance)
return mapInstance
}
geojson = {
function highlightFeature(e) {
let layer = e.target;
//console.log(e.target)
layer.setStyle({
weight: 2,
color: '#AAA',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
info.update(layer.feature);
}
let geoj;
function resetHighlight(e) {
geoj.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
geoj = L.geoJson(bairros, {
style: style,
onEachFeature: onEachFeature
}).addTo(map)
return geoj;
}
legend = {
let legendControl = L.control({position: 'bottomright'});
legendControl.onAdd = function (map) {
let div = L.DomUtil.create('div', 'info legend'),
labels = [],
n = blues.length,
from, to;
for (let i = 0; i < n; i++) {
let c = blues[i]
let fromto = colorScale.invertExtent(c);
labels.push(
'<i style="background:' + blues[i] + '"></i> ' +
d3.format("d")(fromto[0]) + (d3.format("d")(fromto[1]) ? '–' + d3.format("d")(fromto[1]) : '+'));
}
div.innerHTML = labels.join('<br>')
return div
}
legendControl.addTo(map)
return legendControl
}
function container() {
return `
<main role="main" class="container">
<div class="row">
<h3> Homicídios em Fortaleza em 2012</h3>
</div>
<div id="mapid" class='row'>
</div>
<p>Dados retirados do site da <a href="http://www.sspds.ce.gov.br/">SSPDS</a></p>
</main>
`
}
blues = d3.schemeBlues[5]
colorScale = d3.scaleQuantize()
.domain([0, 70])
.range(blues)
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds())
}
info = {
// control that shows state info on hover
let infoControl = L.control()
infoControl.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
}
infoControl.update = function (feat) {
this._div.innerHTML = '<h5>Número de homicídios</h5>' + (feat ?
'<b>' + feat.properties.NOME + '</b><br />' + homicidesByName.get(feat.properties.NOME) + ' homicídios'
: 'Passe o mouse sobre um bairro');
}
infoControl.addTo(map);
return infoControl
}
homicidesByName = d3.csv("https://gist.githubusercontent.com/emanueles/bae10fc42b13886b5a00b79737f2b50d/raw/ffb35abe6d9ba0c4ce4866b827f1916748ab65ef/homicidios_2012.csv").then(function(data) {
let bairrosMap = new Map()
data.forEach(function(d) {
bairrosMap.set(d.Bairro,+d.Homicidios)
})
return bairrosMap
})
function style(feature) {
return {
weight: 1,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.6,
fillColor: colorScale(homicidesByName.get(feature.properties.NOME))
};
}
bairros = d3.json("https://gist.githubusercontent.com/emanueles/f43681762385f250d533eabb35da6dac/raw/4d4541e92fb9ce69e692a7a3c291a4a538ae6b6a/FortalezaBairros.geojson")
d3 = require("d3@5")
$ = require('jquery').then(jquery => {
window.jquery = jquery;
return require('popper@1.0.1/index.js').catch(() => jquery);
})
bootstrap = require('bootstrap')
L = require('leaflet@1.6.0')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
