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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.