A jugar con los notebooks / xaquingv

spain = {

const p = projection;

const svg = d3.create("svg")

.attr("width", width)

.attr("height", width * .9);

const data = dataByDate.get(day);

drawSymbol(svg, data, value);

tooltip(svg, '.hoverCircle', data, 'descHospitalizados');

return svg.node();

}

function drawShaded(svg, data, value){

const color = scaleColor(data, value);

const path = d3.geoPath();

svg.selectAll('path')

.data(topojson.feature(es, es.objects.autonomous_regions).features)

.join('path')

.attr("fill", d => {

const datum = data.find(dd => dd.id === d.id)[value]

return datum === null ? "#DCDCDC" : color(datum)

})

.attr("d", path.projection(projection));

//Border of the autonomous_regions

svg.append("path")

.datum(topojson.mesh(es, es.objects.autonomous_regions, (a, b) => a !== b))

.attr("fill", "none")

.attr("stroke", "white")

.attr("d", path);

//Selectable path

svg.selectAll('hoverPath')

.data(topojson.feature(es, es.objects.autonomous_regions).features)

.join('path')

.attr('class', 'hoverPath')

.attr("fill-opacity", 0)

.attr("stroke", "#000")

.attr("stroke-width", 2)

.attr("opacity", 0)

.attr("d", path);

//Border of the provinces

// svg.append("path")

// .datum(topojson.mesh(es, es.objects.provinces, (a, b) => a !== b))

// .attr("fill", "none")

// .attr("stroke", "white")

// .attr("stroke-opacity", .5)

// .attr("d", path);

}

function drawSymbol(svg, data, value){

const size = scaleSize(data, value);

const path = d3.geoPath();

const centroids = topojson

.feature(es, es.objects.autonomous_regions)

.features

.map((feature) => path.centroid(feature));

svg.selectAll('path')

.data(topojson.feature(es, es.objects.autonomous_regions).features)

.join('path')

.attr("fill", "#DCDCDC")

.attr("d", path.projection(projection));

//Border of the autonomous_regions

svg.append("path")

.datum(topojson.mesh(es, es.objects.autonomous_regions, (a, b) => a !== b))

.attr("fill", "none")

.attr("stroke", "white")

.attr("d", path);

//Circles on top of borders of autonomous_regions

svg.selectAll('circle')

.data(topojson.feature(es, es.objects.autonomous_regions).features)

.join('circle')

.attr('cx', d => {

const x = path.centroid(d)[0];

return x;

})

.attr('cy', d => {

const y = path.centroid(d)[1];

return y;

})

.attr('r', d => {

const datum = data.find(dd => dd.id === d.id)[value];

return datum === null ? 0 : size(datum);

})

.attr("fill", "#0066AA")

.attr("fill-opacity", .3)

.attr("stroke", "#0066AA");

//Selectable circles

svg.selectAll('.hoverCircle')

.data(topojson.feature(es, es.objects.autonomous_regions).features)

.join('circle')

.attr('cx', d => {

const x = path.centroid(d)[0];

return x;

})

.attr('cy', d => {

const y = path.centroid(d)[1];

return y;

})

.attr('r', d => {

const datum = data.find(dd => dd.id === d.id)[value];

return datum === null ? 0 : size(datum);

})

.attr('class', 'hoverCircle')

.attr("fill-opacity", 0)

.attr("stroke", "#000")

.attr("stroke-width", 2)

.attr("opacity", 0);

//Border of the provinces

// svg.append("path")

// .datum(topojson.mesh(es, es.objects.provinces, (a, b) => a !== b))

// .attr("fill", "none")

// .attr("stroke", "white")

// .attr("stroke-opacity", .5)

// .attr("d", path);

}

function tooltip(svg,shape,data,value) {

const tooltip = svg.append("g");

svg

.selectAll(shape)

.on("mouseover", function(d) {

const string = data.find(dd => dd.id === d.id)[value]

tooltip.call(

callout,

string

);

d3.select(this)

.attr("opacity", 1)

})

.on("mousemove", function() {

tooltip.attr(

"transform",

`translate(${d3.mouse(this)[0]},${d3.mouse(this)[1]})`

);

})

.on("mouseout", function() {

tooltip.call(callout, null);

d3.select(this)

.attr("opacity", 0)

});

}

mapaEuropa = europe

function scaleColor(data, value) {

const min = d3.min(data, d => d[value]);

const max = d3.max(data, d => d[value]);

const color = d3.scaleSequential()

.interpolator(d3.interpolateBlues)

.domain([min, max]);

return color;

}

function scaleSize(data, value) {

const min = d3.min(data, d => d[value]);

const max = d3.max(data, d => d[value]);

const color = d3.scaleSqrt()

.domain([min, max])

.range([2, 60]);

return color;

}

Purpose-built for displays of data