Public
Edited
Jul 25, 2023
Insert cell
Insert cell
url = "https://docs.google.com/spreadsheets/d/1pRW3NKGAO_ZuwvX916t-06GFBrTx2y_A3YiQJbpCsn8/export?format=csv"
Insert cell
data_argentina = d3.csv(url, d3.autoType)
Insert cell
{
const width = 900
const height = 500
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
const group2 = svg.append("g")
// const projection = d3.geoNaturalEarth1()
// const projection = d3.geoEquirectangular()
const projection = d3.geoMercator()
.center([-50, -45])
.scale(840)
.rotate([0,0,0]);
const path = d3.geoPath()
.projection(projection);
const graticule = d3.geoGraticule();

group.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("path")
.attr("d", path)
.style('fill', '#bbb')
.style('stroke','none')

group.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path)
.style('fill', 'none')
.style('stroke', 'grey')

group
.selectAll("circle")
.data(data_argentina)
.enter()
.append("circle")
.attr("cx", function(d,i){
return projection([d.LONGITUD, d.LATITUD])[0]})
.attr("cy", function(d,i){return projection([d.LONGITUD, d.LATITUD])[1]})
.attr("r", function(d,i){return 0})
.attr("opacity",.5)
.attr("fill", function(d,i){return d3.rgb(d.CAPTURA,0,250)})

.attr("r", function(d,i){return d.PESCADORES/5})
.transition()
.duration(20000)
return svg.node();
}
Insert cell
nzl_4 = FileAttachment("NZL_4.json").json()
Insert cell
world = fetch("https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m.json").then(d => d.json())
Insert cell
topojson = require("topojson-client@3")
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