Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
Public
Edited
Dec 4, 2022
6 forks
26 stars
viewof type = Inputs.range([0, 6], {step: 1, value: 0})
population_data = phl_regions.features.map(d => parseInt(d.properties.Population))
color_scale = d3.scaleLinear()
.domain(d3.extent(population_data))
.range(['gray','blue'])
.interpolate(d3.interpolateRgb.gamma(2.2))
function create_bezier_arc(d, x_offset, y_offset) {
const x_origin = x_plastic_rivers(d.river)
const y_origin = innerHeight_2/2
const latlong = projection_2([d.long, d.lat])
return `M${x_origin},${y_origin} C${x_origin},${0} ${latlong[0]+x_offset-150},${latlong[1]+y_offset-300} ${latlong[0]+x_offset} ${latlong[1]+y_offset}`
}
visualization.morph(type)
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
button_controls = {
d3.select('#next-slide').on('click', () => {
if (type <= 6) {
set(viewof type, type+1)
}
})
d3.select('#prev-slide').on('click', () => {
if (type >= 0) {
set(viewof type, type-1)
}
})
d3.select('#reset').on('click', () => {
set(viewof type, 0)
})
}
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
}
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.
