Published
Edited
Oct 19, 2021
Insert cell
# Data from GoogleSheets
Insert cell
The path has to have the following structure, just by replacing the DOC_ID with the appropriate number.
https://docs.google.com/spreadsheets/d/DOC_ID/export?format=csv
Insert cell
url = "https://docs.google.com/spreadsheets/d/1grSUBQwGEis_D-QtDe25JnK6jEBBAkdynxTdATAr91s/export?format=csv"
Insert cell
data = d3.csv(url, d3.autoType)
Insert cell
{
const width = 900
const height = 400
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")

group
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.animal * 80 - 100)
.attr("cy", 200)
.attr("r", d => Math.log(d.value) * 3)
.style("opacity", 1)
.attr("fill", function(d,i){
return d3.rgb(10,225-i*20,255-i*20);
})
return svg.node();
}
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