Public
Edited
Dec 16, 2022
Fork of P2 Examen
Insert cell
Insert cell
Insert cell
data = FileAttachment("world.geojson").json()
Insert cell
Insert cell
chart0 = {
const width=400, height=600;
const svg = d3.select(DOM.svg(width, height))
// Use Mercator projection
var projection = d3.geoMercator()
.fitExtent([[20, 20], [width, height]], data)

var path = d3.geoPath()
.projection(projection);
// Draw each province as a path
svg.append('g').selectAll('path')
.data(data.features)
.enter().append('path')
.attr('d', path)
// Styling
.style('stroke', '#ccc')
.style("fill", "gray");
return svg.node()
}
Insert cell
Insert cell
chart1 = {
const width=400, height=600;
const svg = d3.select(DOM.svg(width, height))
// Use Mercator projection
var projection = d3.geoMercator()
.fitExtent([[20, 20], [width, height]], data)

var path = d3.geoPath()
.projection(projection);
// Draw each province as a path
svg.append('g').selectAll('path')
.data(data.features)
.enter().append('path')
.attr('d', path)
// Styling
.style('stroke', '#ccc')
.style("fill", d => {
if (d.properties.name === "Uruguay"){
return "red"
}
if (d.properties.name === "Italy"){
return "red"
}
if (d.properties.name === "Germany"){
return "red"
}
if (d.properties.name === "Brazil"){
return "red"
}
if (d.properties.name === "England"){
return "red"
}
if (d.properties.name === "Argentina"){
return "red"
}
if (d.properties.name === "France"){
return "red"
}
if (d.properties.name === "Spain"){
return "red"
}
else {
return "gray"
}
});
return svg.node()
}
Insert cell
Insert cell
chart3 = {
const width=400, height=600;
const svg = d3.select(DOM.svg(width, height))

// console.log(data.features)

// Elementos para mostrar al ganador
const textoCiudad = svg.append("g").attr("id", "gTextoCiudad").append("text")
.style("font", "25px times")
.attr("class", "title")
.attr("text-anchor", "start")
.attr("x", 0)
.attr("y", 400)
.text("");
// Use Mercator projection
var projection = d3.geoMercator()
.fitExtent([[20, 20], [width, height]], data)

var path = d3.geoPath()
.projection(projection);
// Draw each province as a path
svg.append('g').selectAll('path')
.data(data.features)
.enter().append('path')
.attr('d', path)
// Styling
.style('stroke', 'white')
.style('fill', 'gray')
.on("mouseover",function(d) {
d3.select(this)
.style("fill", 'pink')

d3.selectAll("text")
.text(d.target.__data__.properties.name) // Mozilla Firefox y otros navegadores
// .text(d.originalTarget.__data__.properties.name) // Solo Mozilla Firefox
})
.on("mouseout",function(d){
d3.select(this)
.style("fill", 'gray')
d3.selectAll("text")
.text("")
});
return svg.node()
}
Insert cell
Insert cell
Insert cell

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.
Learn more