Commit 3db4bf3c authored by numeroteca's avatar numeroteca

add responsiveness (can select size of map according to screensize), add...

add responsiveness (can select size of map according to screensize), add gitignore, add muncipio with 3 iniciativas
parent 73b3470e
......@@ -26,14 +26,12 @@
p {
margin:0px;
}
#main {
width:500px;
float: left;
#main, #vis {
width:100%;
}
#side {
}
#content {
width:900px;
}
.tooltip {
color:grey;
......@@ -42,15 +40,32 @@
</head>
<body>
<div id="content">
<div id="main"></div>
<div id="main">
<div id="vis"></div>
</div>
<div id="side"><h2>Iniciativas en muncipio</h2></div>
</div>
<script>
// basado en https://bost.ocks.org/mike/map/
var width = 500,
height = 400;
//Prepare canvas size
isSmall = innerWidth < 400;
isMobile = innerWidth < 758;
var svg = d3.select("#main").append("svg")
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")
......@@ -70,81 +85,76 @@
.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 }));
// Projection for Euskadi
var projection = d3.geo.mercator()
.scale(12000)
.center([-2.6,42.9])
.translate([width / 2, height / 2]);
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); })
// 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)
// add municipios
svg.append("path")
.datum(provincias)
.attr("d", path)
.on("click", displayTooltip)
.on("mousemove", showTooltip) // AÑADIR EVENTO SHOW TOOLTIP
.on("mouseout", hideTooltip); // OCULTAR TOOLTIP
.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 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>")
}
}
// 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>
</body>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
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