Public
Edited
May 23, 2024
{
const height = 800;
const width = 1000;
const margin ={top:50,left:50,right:50,bottom:50};
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const svg =d3.create("svg")
.attr("width",width)
.attr("height",height)
.attr('viewbox',[0,0,width,height])
.style('background',"#333333");
const wrapper = svg.append("g")
.attr("transform",`translate(${margin.left},${margin.top})`);
const projection = d3.geoMercator().fitSize([innerWidth,innerHeight],thailand);
const geoGenerator = d3.geoPath().projection(projection);
const regions = wrapper.selectAll("region").data(thailand.features);
const areas = regions.enter().append("path")
.attr("class","areas").attr("d", d=> geoGenerator(d))
.attr('opacity',0.6).attr("fill",'gray')
// .attr("transform",`translate(${innerWidth},${0})`);
// const airport = wrapper.selectAll('g')
// .data(active_airport).join('g')
// .attr('transform',`translate(${innerWidth/4},${0})`) ;
// const airport_circle = airport.append('circle').attr("r",5)
// .attr('fill','gray').attr('opacity',0.3)
// .attr('stroke','black')
// .attr("transform", function(d) {return "translate(" + projection(Object.values(d))+ ")";})
// const bar = wrapper.append('g').attr('transform',`translate(${-8},${(innerHeight/2)}`)
// .selectAll('rect').data(active_airport).join('rect')
// .attr('y',0)
//description text and annotations
// const labelAnnotations = [
// {
// id:"high-density",
// note:{
// label:" High Density Area"
// },
// color: "white",
// x:(innerWidth/2) + 180,
// y: 320,
// dx: 70,
// dy: -300,
// subject:{
// radius:40,
// radiusPadding:5
// },
// type: d3.annotationCalloutCircle
// },
// ]
// const makeAnnotation = d3_annotation.annotation()
// .type(d3_annotation.annotationCalloutCircle)
// .annotations(labelAnnotations);
// wrapper.append("g")
// .attr("class","annotation-group")
// .call(makeAnnotation);
return svg.node();
}
y_bar_scale = d3.scaleLinear().domain([]).range([0,innerHeight/2])
active_airport = FileAttachment("active_airport@1.json").json()
active_airport["VTBC"][0]
thailand = FileAttachment("thailand.json").json()
thailand.features
{for (var key in active_airport){
if (active_airport.hasOwnProperty(key)){
var temp =active_airport[key][0];
active_airport[key][0] = active_airport[key][1];
active_airport[key][1] = temp;
}
}}
Object.values(active_airport)
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.
