I'm a dataviz passionate that have been working in the field since 2009. I co-founded OneTandem (www.onetandem.com), where I help turning complex data into engaging visual narratives. PhD in Computer Science and Digital Communication
map = {
const width = w;
const height = 600;
var projection = d3.geoConicConformal();
const path = d3.geoPath().projection(projection);
var active = d3.select(null);
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
const g = svg.append("g")
.attr("transform", "translate(0,0)");
// Afegim el valor de població al topojson
cat_municipis.objects.municipis.geometries.forEach((d, i) => {
// els codis de 5 xifres han de portar un 0 al davant
let id = (d.id.toString().length == 5) ? "0"+d.id : +d.id
let poblacio_obj = dict_poblacio_municipis.get(id)
d.properties.poblacio = poblacio_obj === undefined ? -1 : poblacio_obj.poblacio;
})
var municipis = topojson.feature(cat_municipis, cat_municipis.objects.municipis);
// automatic center and scale (see http://bl.ocks.org/mbostock/4707858)
projection
.scale(1)
.translate([0, 0]);
var b = path.bounds(municipis),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection
.scale(s)
.translate(t);
g.append("path")
.datum(municipis)
.attr("class", "land")
.attr("d", path);
g.append("g")
.selectAll("path")
.data(topojson.feature(cat_municipis, cat_municipis.objects.municipis).features)
.join("path")
//.attr("fill", d => color(data.get(d.id)))
.attr("class", "municipi")
//.attr("fill", "lightgray")
.attr("fill", d => {
if (d.properties.poblacio == -1) return "gray";
else return color(d.properties.poblacio)
})
.attr("d", path)
.on("mouseover", function(d) {
d3.select(this)
.attr("fill", "red");
})
.on("mouseout", function(d) {
d3.select(this)
.attr("fill", d => {
if (d.properties.poblacio == -1) return "gray";
else return color(d.properties.poblacio)
})
})
.on("mouseover", d => console.log(d))
//.on("click", clicked);
g.append("path")
.datum(topojson.mesh(cat_municipis, cat_municipis.objects.municipis, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
idComarques.forEach(id => {
svg.append("path")
.datum(topojson.merge(cat_municipis, cat_municipis.objects.municipis.geometries.filter(function(d) { return d.properties.comarca == id; })))
.attr("class", "comarca")
//.attr("fill", "red")
.attr("stroke", "steelblue")
.style("opacity", 0.6)
.attr("d", path)
.on("click", clicked)
.on("mouseover", function() {
d3.select(this).attr("fill", "red");
})
.on("mouseout", function() {
d3.select(this).attr("fill", "black");
})
})
function clicked(d) {
if (active.node() === this) return reset();
active.classed("active", false);
active = d3.select(this).classed("active", true);
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
g.transition()
.duration(750)
.style("stroke-width", 1.5 / scale + "px")
.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}
function reset() {
active.classed("active", false);
active = d3.select(null);
g.transition()
.duration(750)
.style("stroke-width", "1.5px")
.attr("transform", "");
}
return svg.node();
}
cat_municipis.objects.municipis.geometries
idComarques = new Set(cat_municipis.objects.municipis.geometries.map(d => d.properties.comarca))
Array.from(idComarques).sort()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
