Commit 61b64663 authored by guglielmo's avatar guglielmo

d3-opmap-thematizer class isolated; example adjusted accordingly

parent dc031939
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -37,45 +37,119 @@
</div>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://unpkg.com/d3-scale-chromatic@1"></script>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/d3-tip.js"></script>
<script src="https://unpkg.com/d3@4" charset="utf-8"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://unpkg.com/d3-scale-chromatic@1"></script>
<script src="https://unpkg.com/d3-tip"></script>
<script src="js/canvas-toBlob.js"></script>
<script src="js/FileSaver.min.js"></script>
<script src="js/geostats.min.js"></script>
<script src="js/d3-opmap-thematizer.js"></script>
<script>
// parameters that define the behavior of the dashboard
// width and height in pixels
var width = 800,
height = 600;
<script type="application/javascript">
// if provincial limits are shown at the beginning
// a button allows to show/hide the limits at runtime
var limits_shown = 1;
/**
* configuration options for the MapThematizer singleton
* all data and methods referencing implementation details
**/
var MapThematizerConfig = {
width: 1024, height: 768,
limits_path: "/data/limits/limits.topo.json",
indicator_path: "/data/indicators/demografia-dettagli-comunali-2015-reddito_medio-comuni.csv",
layer: "comuni",
data: {
title: "Reddito medio pro capite su base comunale per il 2015",
notes: "Dati in migliaia di €",
source: "MEF",
maxDomain: 34,
minDomain: 5
},
indicatorMultiplier: "0.001",
legendText: "Reddito medio pro-capite 2015 (migliaia di €)",
getFeatures: function (limits, layer) {
if (layer === 'province') {
features = [
topojson.feature(limits, limits.objects.regioni),
topojson.feature(limits, limits.objects.province)
];
} else {
features = [
topojson.feature(limits, limits.objects.province),
topojson.feature(limits, limits.objects.comuni)
];
}
return features;
},
populateIndicatorById: function(layer, indicator, multiplier){
indicatorById = {};
indicator.forEach(function (d) {
// Create property for each ID,
// give it value from indicator
// adjust metropolitan area codes in province layer
id_territorio = +d.id_territorio;
if (layer === 'province' && id_territorio > 200) {
id_territorio -= 200;
}
indicatorById[id_territorio] = (
+d.indicatore * multiplier
);
});
return indicatorById;
},
colorize: function(d, layer, color, indicatorById){
if (layer === 'province') {
return color(indicatorById[+d.properties.code_pro]);
} else {
return color(indicatorById[d.properties.code_com]);
}
},
tooltip: function(limits, d, layer, indicatorById) {
var v = 0;
if (layer === 'province') {
v = indicatorById[+d.properties.code_pro];
return (
"Provincia: " + d.properties.name_pro + "<br/>" +
"Valore: " + parseFloat(
Math.round(v * 100) / 100
).toFixed(2)
);
} else {
v = indicatorById[+d.properties.code_com];
return (
"Comune: " + d.properties.name_com + " (" +
_provinceAcrById(limits, d.properties.code_pro) +
") <br/>" +
"Valore: " + parseFloat(
Math.round(v * 100) / 100
).toFixed(2)
);
}
}
};
// stroke-width for the provinces (in pixels)
var provStrokeWidth = 0.3;
// Title, description, source
var dataTitle = "Asili nido 2014";
var dataDescription = "Descrizione del dato";
var dataSource = "ISTAT";
var legendText = "% utenti su posti";
/**
* create dict with province names
* in order to retrieve acronyms in tooltip
**/
_provinceAcrById = function(limits, id){
var geometries = limits.objects.province.geometries;
for (var i in geometries){
var d = geometries[i];
if (id === d.properties.code_pro) {
return d.properties.acr_pro;
}
}
};
// indicator Multiplier, can take values of 1 or 100
// to handle different percentage types
var indicatorMultiplier = 100.;
// dataset name
// the {dataset}.csv file must live in the data directory
var dataset = "nido_perc_utenti_su_posti_2014";
// activate MapThematizer
$(document).ready(function(){
OPMapThematizer.init( MapThematizerConfig );
});
</script>
<script src="js/d3-locations-dashboard.js"></script>
</body>
</html>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
/* Project specific Javascript goes here. */
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment