buildvis = {
let view = md`${container()}`
return view
}
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 />' + '<b>' + homicidesInFortaleza.get(feat.properties.NOME)[0] + '</b> homicídios' + `<br/><b>${homicidesInFortaleza.get(feat.properties.NOME)[1]}</b> homícidios por 100.000 habitantes.`
: 'Passe o mouse sobre um bairro');
}
infoControl.addTo(map);
return infoControl
}
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[9]
colorScale = d3.scaleQuantize()
.domain([0, 70])
.range(blues)
// colorScale = d3.scaleQuantize()
// .domain([0, d3.max(homicidesInFortaleza.values().map(ho=>ho[1]))])
// .range(blues)
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds())
}
homicidesInFortaleza = d3.csv("https://gist.githubusercontent.com/emanueles/8ee225792454a78151d0842a10642a29/raw/9984e32effa99da3cea2ec87a7c9b7b231c71d3c/fortaleza_crimes_populacao.csv").then((data) => {
let homicides = d3.map()
data.forEach((d)=> {
d.taxa = ((d.Homicidios/d.Populacao) * 100000).toFixed(2)
homicides.set(d.Bairro,new Array(+d.Homicidios, d.taxa))
})
return homicides
})
homicidesByName = d3.csv("https://gist.githubusercontent.com/emanueles/bae10fc42b13886b5a00b79737f2b50d/raw/ffb35abe6d9ba0c4ce4866b827f1916748ab65ef/homicidios_2012.csv").then(function(data) {
let bairrosMap = d3.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(homicidesInFortaleza.get(feature.properties.NOME)[1])
};
}
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')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.