Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
Public
Edited
Jan 9, 2023
square_grid = (s=100, n=10, go=[0.5, 0.5], co=[0.5, 0.5]) => {
const cs = s / n;
const x = i => (i % n) * cs - (cs * n * go[0]) + (cs * co[0]);
const y = i => Math.floor(i / n) * cs - (cs * n * go[1]) + (cs * co[1]);
const grid = [...Array(n * n).keys()];
grid.forEach((v, i) => { grid[i] = {i: i, x: x(i), y: y(i), r: cs } });
return grid;
}
r1 = 3
ph_scale = d3.scaleBand().domain(['Philippines', 'Others']).range([0, height]).paddingInner(0.2)
se_scale = d3.scaleBand().domain(['Philippines', 'Malaysia', 'Indonesia', 'Thailand', 'Vietnam', 'Others']).range([0, height]).paddingInner(0.2)
// filter out low total mismanaged waste
nodesData = {
const nodesData = []
const count = {}
mismanaged_plastic1.forEach(v => {
if (v.pw_total > 1000) {
const calc_total = Math.floor(v.pw_total / 1000)
for (let i = 0; i < calc_total; i++) {
count[v.country] = (count[v.country] || 0) + 1;
if (top_countries.includes(v.country)) {
nodesData.push({...v, count: count[v.country], top_country:true})
} else {
nodesData.push({...v, count: count[v.country], top_country:false})
}
}
}
})
return nodesData
}
group_nodes = {
return nodesData1.reduce((group, product) => {
const { isSe } = product;
group[isSe] = group[isSe] ?? [];
group[isSe].push(product);
return group;
}, {});
}
group_nodes_ph = {
return nodesData1.reduce((group, product) => {
const { isPh } = product;
group[isPh] = group[isPh] ?? [];
group[isPh].push(product);
return group;
}, {});
}
nodesData2 = {
const new_list_nodes = []
const count_list = ['Philippines', 'Malaysia', 'Indonesia', 'Thailand', 'Vietnam', 'Others']
const ph_list = ['Philippines', 'Others']
count_list.forEach((country) => {
const nb_nodes = group_nodes[country].length
const nr_se = 10
const nr_ph = 10
const nc_se = Math.round(nb_nodes / nr_se)
const nc_ph = Math.round(nb_nodes / nr_ph)
group_nodes[country].forEach((val, index) => {
// ph groups
const ph_x_y = calc_grid_position(index, nc_ph, nr_ph, ph_scale.bandwidth())
// se groups
const se_x_y = calc_grid_position(index, nc_se, nr_se, se_scale.bandwidth())
new_list_nodes.push(
{...val, se_x:se_x_y.x, se_y:se_x_y.y}
)
// console.log(val)
})
// ph_x:ph_x_y.x, ph_y:ph_x_y.y,
})
['Philippines', 'Others'].forEach((country) => {
group_nodes_ph[country].forEach((val, index) => {
})
})
return new_list_nodes
}
calc_grid_position = (i, nc, nr, width_) => {
const cs = 30
const rs = 10
// 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/rs) * cs)}
}
visualization = {
// → ←
const svg = d3.create('svg').attr('viewBox', [0,0,width, 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(nodesData2).join('circle').attr('r', node_radius).attr('fill', 'whitesmoke').attr('stroke', 'black').attr('stroke-width', 0.2)
nodes.transition().duration(800).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.country)})`})
nodes.transition().delay(2000).duration(800).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.country)})`})
return svg.node()
}
projection_2 = d3.geoMercator().fitSize([innerWidth_2/2, innerHeight_2], phl_regions)
x_plastic_rivers = d3.scaleBand().domain(ph_rivers_plastic.sort((a,b) => b.lat - a.lat).map(v => v.river)).range([0, innerWidth_2/2])
yAxisRivers = g => g
.call(d3.axisLeft(y_plastic_rivers).tickFormat(d => `${d} %`).ticks(5))
.call(g => g.select('.domain').remove())
innerWidth_2 = width_2 - margin.left - margin.right
innerHeight_2 = height_2 - margin.top - margin.bottom
y_plastic_rivers = d3.scaleLinear().domain([0, 7]).range([0,300])
width_2 = 1000
height_2 = 800
projection = d3.geoEquirectangular().fitSize([innerWidth, innerHeight], mapGeoJson)
.rotate([-30,0])
node_radius = 3
width = 1200
height = 900
margin = ({top:100, bottom:50, left:50, right:50})
innerHeight = height - margin.top - margin.bottom
innerWidth = width - margin.left - margin.right
// total mismanaged waste
total_plastic = d3.sum(mismanaged_plastic.map(v => v.pw_total))
x_countries = d3.scaleBand().domain(mismanaged_plastic.filter(d => d.pw_total > 1000).sort((a,b) => a.pw_total - b.pw_total).map(v => v.country)).range([innerWidth, 50])
top_countries = {
let countries_list = mismanaged_plastic.filter(d => d.pw_total > 1000).sort((a,b) => b.pw_total - a.pw_total).slice(0, 10).map(v => v.country)
return countries_list
}
xAxisCountries = g => g
.call(d3.axisBottom(x_countries))
.call(g => g.select('.domain').remove())
.call(g => g.selectAll('.tick line').remove())
y_count = d3.scaleLinear().domain([0, 380]).range([innerHeight-75, 0])
count_sachet = parseInt(nodesData1.filter(v => v.country == "Philippines").splice(-1)[0].count * 0.52)
mapGeoJson = FileAttachment("world.geojson (2).json").json()
mismanaged_plastic = FileAttachment("mismanaged_plastic.csv").csv()
phl_regions = FileAttachment("phl_regions2.geojson").json()
ph_rivers_plastic = FileAttachment("ph_rivers_plastic.csv").csv()
all_rivers_plastic = FileAttachment("plastics-top-rivers (1).csv").csv()
all_rivers_plastic1 = {
let temp_arr = all_rivers_plastic.sort((a, b) => b["Share of global plastics emitted to ocean"] - a["Share of global plastics emitted to ocean"]).slice(0,50)
temp_arr = temp_arr.map(v => {
if (v.Entity.includes('Philippines')) {
return {...v, 'ph':1}
} else {
return {...v, 'ph': 0}
}
})
return temp_arr
}
mismanaged_plastic1 = {
const south_asian = ['Philippines', 'Malaysia', 'Indonesia', 'Thailand', 'Vietnam']
return mismanaged_plastic.map((v) => {
if (south_asian.includes(v.country)) {
if (v.country == 'Philippines') {
return {...v, isPh:'Philippines', isSe:v.country}
}
return {...v, isPh:'Others', isSe:v.country}
} else {
return {...v, isPh:'Others', isSe:'Others'}
}
})
}
new Set(mismanaged_plastic1.map(v => v.isPh))
all_rivers_plastic
d3_annotation = require("https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js")
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.
