Commit 523f75dc authored by numeroteca's avatar numeroteca

separate js in independent file. marks selected municipio when clicked

parent 4f8d3214
//Prepare canvas size
isSmall = innerWidth < 400;
isMobile = innerWidth < 758;
var screenwidth = d3.select("#vis").node().clientWidth;
// set the dimensions and margins of the graph
// Margin convention: https://bl.ocks.org/mbostock/3019563
var margin = {top: 0, right: 0, bottom: 0, left: 0},
ratio = 0.81, // Height ratio
width = (isSmall ? screenwidth : 450) - margin.left - margin.right, // Width depending on the div.
height = width * ratio - margin.top - margin.bottom; // Height depending on the ratio
// Projection for Euskadi
var projection = d3.geo.mercator()
.scale((isSmall ? 10000 : 14500))
.center([-2.6,42.96])
.translate([width / 2, height / 2]);
var svg = d3.select("#vis").append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color","#FDFDFD")
// sets color scale
var color = d3.scale.linear()
// .domain([0,5])
.range(['#fff','#d82d37'])
// Adds hover tooltip
var tooltip = d3.select("#side")
.append("div")
.attr("class", "tooltip")
// Adds click tooltip
var tooltipclick = d3.select("#side")
.append("div")
.attr("class", "tooltipclick")
// add multiple files http://bl.ocks.org/mapsam/6090056
queue()
.defer(d3.json, 'municipios-clean_simply_topo.json')
.defer(d3.json, 'provincias-clean_simply_topo.json')
.await(makeMyMap);
function makeMyMap(error, municipios, provincias) {
// topojson creado con y simplificado con http://mapshaper.org/
if (error) return console.error(error);
// Variable con todos los datos
var subunits = topojson.feature(municipios, municipios.objects.municipios);
var provincias = topojson.feature(provincias, provincias.objects.provincias);
//calculates max and min values of n iniciativas
color.domain(d3.extent(subunits.features, function(d) {return d.properties.n_iniciativas }));
var path = d3.geo.path()
.projection(projection);
// add municipios
svg.append("path")
.datum(subunits)
.attr("d", path)
.attr("stroke", "grey");
svg.append("g").selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
.attr("fill", function(d) { return (d.properties.n_iniciativas < 1)? color(0.06) : color(d.properties.n_iniciativas); })
.attr("d", path)
// add municipios
svg.append("path")
.datum(provincias)
.attr("d", path)
.attr("stroke", "#ccc")
.attr("fill-opacity",0)
// hover shapes
svg.append("g")
.attr("class","hovers")
.selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
//.attr("class", function(d) { return "subunit z" + d.properties.zona_id; })
.attr("fill-opacity",0)
.attr("d", path)
//.on("click", displayTooltip)
.on('click',function(d) {
tooltipclick.html("<div class='table-responsive'><strong>" + d.properties.NOMBRE_TOP + ". Iniciativas: "+ d.properties.n_iniciativas + "</strong>" +
d.properties.iniciativas_div +
"</div>")
svg.selectAll('.active').attr("class","inactive");
d3.select(this).attr("class","active"); //removes .success class
})
.on("mousemove", showTooltip) // AÑADIR EVENTO SHOW TOOLTIP
.on("mouseout", hideTooltip); // OCULTAR TOOLTIP
// Función para motrar el tooltip en hover
function showTooltip(d) {
tooltip.html("<div class='table-responsive'><strong>" + d.properties.NOMBRE_TOP + ". Iniciativas: "+ d.properties.n_iniciativas + "</strong></div>").style("opacity", 1)
}
// Función para ocultar el tooltip en hover
function hideTooltip(d) {
tooltip.style("opacity", 0)
}
// Función para motrar el tooltip en hover
function displayTooltip(d) {
}
}
......@@ -20,9 +20,9 @@
stroke:black !important;
cursor:pointer;
}
h1 {
font-size:1em;
}
.active {
stroke: black;
}
p {
margin:0px;
}
......@@ -45,117 +45,6 @@
</div>
<div id="side"><h2>Iniciativas en muncipio</h2></div>
</div>
<script>
//Prepare canvas size
isSmall = innerWidth < 400;
isMobile = innerWidth < 758;
var screenwidth = d3.select("#vis").node().clientWidth;
// set the dimensions and margins of the graph
// Margin convention: https://bl.ocks.org/mbostock/3019563
var margin = {top: 0, right: 0, bottom: 0, left: 0},
ratio = 0.81, // Height ratio
width = (isSmall ? screenwidth : 450) - margin.left - margin.right, // Width depending on the div.
height = width * ratio - margin.top - margin.bottom; // Height depending on the ratio
// Projection for Euskadi
var projection = d3.geo.mercator()
.scale((isSmall ? 10000 : 14500))
.center([-2.6,42.96])
.translate([width / 2, height / 2]);
var svg = d3.select("#vis").append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color","#FDFDFD")
// sets color scale
var color = d3.scale.linear()
// .domain([0,5])
.range(['#fff','#d82d37'])
// Adds hover tooltip
var tooltip = d3.select("#side")
.append("div")
.attr("class", "tooltip")
// Adds click tooltip
var tooltipclick = d3.select("#side")
.append("div")
.attr("class", "tooltipclick")
// add multiple files http://bl.ocks.org/mapsam/6090056
queue()
.defer(d3.json, 'municipios-clean_simply_topo.json')
.defer(d3.json, 'provincias-clean_simply_topo.json')
.await(makeMyMap);
function makeMyMap(error, municipios, provincias) {
// topojson creado con y simplificado con http://mapshaper.org/
if (error) return console.error(error);
// Variable con todos los datos
var subunits = topojson.feature(municipios, municipios.objects.municipios);
var provincias = topojson.feature(provincias, provincias.objects.provincias);
//calculates max and min values of n iniciativas
color.domain(d3.extent(subunits.features, function(d) {return d.properties.n_iniciativas }));
var path = d3.geo.path()
.projection(projection);
// add municipios
svg.append("path")
.datum(subunits)
.attr("d", path)
.attr("stroke", "grey");
svg.append("g").selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
.attr("fill", function(d) { return (d.properties.n_iniciativas < 1)? color(0.06) : color(d.properties.n_iniciativas); })
.attr("d", path)
// add municipios
svg.append("path")
.datum(provincias)
.attr("d", path)
.attr("stroke", "grey")
.attr("fill-opacity",0)
// hover shapes
svg.append("g")
.attr("class","hovers")
.selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
.attr("class", function(d) { return "subunit z" + d.properties.zona_id; })
.attr("fill-opacity",0)
.attr("d", path)
.on("click", displayTooltip)
.on("mousemove", showTooltip) // AÑADIR EVENTO SHOW TOOLTIP
.on("mouseout", hideTooltip); // OCULTAR TOOLTIP
// Función para motrar el tooltip en hover
function showTooltip(d) {
tooltip.html("<div class='table-responsive'><strong>" + d.properties.NOMBRE_TOP + ". Iniciativas: "+ d.properties.n_iniciativas + "</strong></div>").style("opacity", 1)
}
// Función para ocultar el tooltip en hover
function hideTooltip(d) {
tooltip.style("opacity", 0)
}
// Función para motrar el tooltip en hover
function displayTooltip(d) {
tooltipclick.html("<div class='table-responsive'><strong>" + d.properties.NOMBRE_TOP + ". Iniciativas: "+ d.properties.n_iniciativas + "</strong>" +
d.properties.iniciativas_div +
"</div>")
}
}
</script>
<script type="text/javascript" src="dataviz.js"></script>
</body>
</html>
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