founder BUDOTS MEDIA, PHILIPPINES TRAVEL COMPANY
SA = (await fetch("https://raw.githubusercontent.com/mkrbu50/sa-geojson/main/sa.geojson")).json()
chart1 = {
const width=500, height=500;
const svg = d3.select(DOM.svg(width, height))
// Use Mercator projection
var projection = d3.geoMercator()
// Powerfull stuff! I didnt know where exactly my dataset was located projection-wise,
// but .fitExtent() allows you to fit your dataset within a specified canvas
.fitExtent([[0,0],[width, height]], SA);
var path = d3.geoPath()
.projection(projection);
// Draw each province as a path
svg.append('g').selectAll('path')
.data(SA.features)
.enter().append('path')
.attr('d', path)
// Styling
.style('fill', 'white')
.style('stroke', 'green')
return svg.node()
}
chart2 = {
const width=500, height=500;
const svg = d3.select(DOM.svg(width, height))
// Use Mercator projection
var projection = d3.geoMercator() .scale(1350).translate([-815,830]);
// Powerfull stuff! I didnt know where exactly my dataset was located projection-wise,
// but .fitExtent() allows you to fit your dataset within a specified canvas
//.fitExtent([[0,0],[width, height]], SA);
var path = d3.geoPath()
.projection(projection);
// Draw each province as a path
svg.append('g').selectAll('path')
.data(SA.features)
.enter().append('path')
.attr('d', path)
// Styling
.style('fill', 'white')
.style('stroke', 'green')
return svg.node()
}
SAProvinces = await FileAttachment("SaudiArabia_Lower@7.geojson").json();
chart3 = {
const width=600, height=500;
const svg = d3.select(DOM.svg(width, height))
// Use Mercator projection
var projection = d3.geoMercator()
// Powerfull stuff! I didnt know where exactly my dataset was located projection-wise,
// but .fitExtent() allows you to fit your dataset within a specified canvas
.fitExtent([[0,0],[width, height]], SAProvinces);
var path = d3.geoPath()
.projection(projection);
// Draw each province as a path
svg.append('g').selectAll('path')
.data(SAProvinces.features)
.enter().append('path')
.attr('d', path)
// Styling
.style('fill', 'white')
.style('stroke', 'grey')
return svg.node()
}
provinces=["TabukProvince",
"AlJoufProvince",
"NorthernBordersProvince",
"EasternProvince",
"NajranProvince",
"JazanProvince",
"Farasan",
"AseerProvince",
"AlBa7aProvince",
"MakkaAlMukarramahProvince",
"AlMadinahAlMunawwarahProvince",
"Ha5elProvince",
"QaseemProvince",
"RiyadhProvince",
];
//provinces[0];
graphic = {
const text = await FileAttachment("SaudiArabia_Lower@1.svg").text();
const document = (new DOMParser).parseFromString(text, "image/svg+xml");
const svg = d3.select(document.documentElement).remove();
svg.attr("width", "970px");
svg.attr("height", "800px");
for(var i=0; i<15; i++)
{
var path = svg.selectAll("g[id='"+provinces[i]+"'] path, g[id='"+provinces[i]+"'] polygon");
path.attr("fill", d3.interpolateRainbow( i*(1/14)));
}
return svg.node();
}
g={
var text="";
for(var i=0; i<14; i++)
{
text += i*(1/13) + '\n'
}
return text;
}
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.
