In [1]:
from matplotlib import pyplot as plt
from IPython.display import display, HTML, Javascript
from jinja2 import Template
In [2]:
def inline_html(stuff):
"""
Embeds the HTML source of the dc charts directly into the IPython notebook.
This method will not work if the dc charts depends on any files(json data).
Also this uses the HTML5 srcdoc attribute, which may not be supported in
all browsers.
"""
return HTML('''
<iframe srcdoc="{srcdoc}"
style="width: 500px; height: 300px; border: none"></iframe>
'''.format(srcdoc=stuff.replace('"', '"')))
In [5]:
with open('../data/br-states.json') as f:
br_states = f.read()
In [6]:
html_template = Template("""
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css"
/>
<script
src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"
></script>
</head>
<body>
<div id="map" style="height:350px;"></div>
<script>
var map = L.map('map');
map.setView([-16, -50.528742], 3);
// create the tile layer with correct attribution
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(
osmUrl, {minZoom: 1, maxZoom: 12, attribution: osmAttrib}
);
function onEachFeature(feature, layer) {
//bind click
layer.on({
click: function(){
l_name = feature.properties.nome;
rid = regionIds[l_name];
geojson_layer.eachLayer(function (_layer) {
_rid = regionIds[_layer.feature.properties.nome];
if (_rid == rid) {
_layer.setStyle({weight: 2});
_layer.setStyle({color: '#333333'});
_layer.bringToFront();
} else {
_layer.setStyle({weight: 1});
_layer.setStyle({color: '#333333'});
}
});
}
});
}
br_states = {{br_states}};
var colorRegion = {
1: '#1C287E',
2: '#74AD1B',
3: '#E4F4FA',
4: '#ff9900',
};
var regionIds = {
'Acre': 1,
'Alagoas': 2,
'Amapá': 1,
'Amazonas': 1,
'Bahia': 2,
'Ceará': 2,
'Distrito Federal': 3,
'Espírito Santo': 2,
'Goiás': 3,
'Maranhão': 3,
'Mato Grosso': 3,
'Mato Grosso do Sul': 3,
'Minas Gerais': 4,
'Paraná': 4,
'Paraíba': 2,
'Pará': 1,
'Pernambuco': 2,
'Piauí': 3,
'Rio de Janeiro': 2,
'Rio Grande do Norte': 2,
'Rio Grande do Sul': 4,
'Rondônia': 1,
'Roraima': 1,
'Santa Catarina': 4,
'Sergipe': 2,
'São Paulo': 4,
'Tocantins': 3
};
var geojson_layer = L.geoJson(br_states, {
onEachFeature: onEachFeature,
style: function(feature) {
l_name = feature.properties.nome;
style_properties= {
fillColor: colorRegion[regionIds[l_name]],
color: '#333333',
fillOpacity: 0.5,
weight: 1,
};
return style_properties;
}
});
geojson_layer.addTo(map);
osm.addTo(map);
</script>
</body>
</html>
""")
In [7]:
# push data to notebook
# display(df_alert.keys())
inline_html(html_template.render(
br_states=br_states
))
Out[7]: