Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
Public
Edited
Jun 3, 2023
1 fork
2 stars
visualization = {
// → ←
const svg = d3.create('svg').attr('viewBox', [0,0,width, height]).attr('width', width).attr('height', height).style('background', "#333333")
const wrapper = svg.append('g').attr("transform", `translate(${margin.left},${margin.top})`)
// d3.select('.annotations-class').transition().duration(1000).attr('opacity', 1)
// areas.transition().duration(200).attr('opacity', 0)
const nodes = wrapper.selectAll('circle').data(nodesData).join('circle').attr('r',2).attr('fill', d=> {
if (d.Entity == 'Philippines') {
return 'red'
} else {
return 'white'
}
}).attr('stroke', 'black').attr('stroke-width', 0.2)
nodes.transition().duration((d, i) => Math.random() * i *3).ease(d3.easeLinear).attr('cx', (d) => d.ph_x).attr('cy', (d) => d.ph_y).attr('transform', function(d) {
return `translate(${0},${ph_scale(d.isPh)})`})
nodes.transition().delay(2000).duration((d, i) => Math.random() * i * 10).ease(d3.easeLinear).attr('cx', (d) => d.se_x).attr('cy', (d) => d.se_y).attr('transform', function(d) {
return `translate(${0},${se_scale(d.isSe)})`})
return svg.node()
}
plastic_dataset = FileAttachment("plastic_dataset.json").json()
categories_asia = ['Philippines', 'Malaysia', 'Indonesia', 'Thailand', 'Vietnam']
categories_ph = ['Philippines', 'Others']
plastic_dataset1 = {
return plastic_dataset.map((v) => {
if (categories_asia.includes(v.Entity)) {
if (v.Entity == 'Philippines') {
return {...v, isPh:'Philippines', isSe:v.Entity}
}
return {...v, isPh:'Others', isSe:v.Entity}
} else {
return {...v, isPh:'Others', isSe:'Others'}
}
})
}
calc_grid_position = (i, nc, nr, width_) => {
const cs = 4
const rs = 4
// Math.floor(i / n) * cs - (cs * n * go[1]) + (cs * co[1]);
// const x = i => (i % n) * cs - (cs * n * go[0]) + (cs * co[0]);
// return {x: (Math.floor(i/nr) * cs), x: rs * (i % nr)}
return {y: rs * (i % nr) , x: (Math.floor(i/nr) * cs)}
}
// filter out low total mismanaged waste
nodesData = {
const nodesData = []
const count = {}
const ph_counter = {};
const sea_counter = {};
plastic_dataset1.forEach(v => {
if (v.mismanaged_pw_total > 1000) {
const calc_total = Math.floor(v.mismanaged_pw_total / 1000)
for (let i = 0; i < calc_total; i++) {
count[v.Entity] = (count[v.Entity] || 0) + 1;
ph_counter[v.isPh] = (ph_counter[v.isPh] || 0) + 1;
sea_counter[v.isSe] = (sea_counter[v.isSe] || 0) + 1;
nodesData.push({...v, ph_id:ph_counter[v.isPh], se_id:sea_counter[v.isSe],count: count[v.Entity], top_country:true})
}
}
})
// assign grid locations
return nodesData.map((val, index) => {
// get ph xy grid GeolocationCoordinates
const ph_coord = calc_grid_position(val.ph_id-1, Math.round(val.ph_id/10), 10, ph_scale.bandwidth())
const sea_coord = calc_grid_position(val.se_id-1, Math.round(val.se_id/10), 10, se_scale.bandwidth())
return {...val, ph_x: ph_coord["x"], ph_y: ph_coord['y'], se_x: sea_coord["x"], se_y: sea_coord['y']}
})
}
ph_scale.bandwidth()
nodesData.filter(v => v.isPh == 'Others')
height = 500
width = 600
ph_scale = d3.scaleBand().domain(categories_ph).range([0, height]).paddingInner(0).paddingOuter(0.9)
nodesData
margin = ({top:50, bottom:50, left: 50, right:50})
ph_scale('Others')
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.
