Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
plastic_dataset_sorted = plastic_oceans_data_2.sort((a,b) => b.pWaste2010 - a.pWaste2010 ).slice(0,50)
width = 1600
plastic_dataset_sorted
plastic_oceans_data_2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
arc_scaler = d3.scaleBand().range([10, 195]).domain(plastic_dataset_sorted.map(x => x.place))
stem_scaler = d3.scaleSqrt().range([inner_radius,stem_x1]).domain([0, d3.extent(plastic_dataset_sorted.map(x => x.mpw_oceans_2021))[1]])
leaf_scaler = d3.scaleLinear().range([2, leaf_width]).domain(d3.extent(plastic_dataset_sorted.map(x => x.mpw_2021)))
total_pw_scaler = d3.scaleLinear().range([5, total_x]).domain(d3.extent(plastic_dataset_sorted.map(x => x.pWaste2016 )))
plastic_waste_world_sort = plastic_waste_world.sort((a,b) => b.mismanaged_pw_capita - a.mismanaged_pw_capita)
arc_step = 360 / plastic_waste_world.length
arc_scaler.step()
viewof inner_radius = Inputs.range([0, 1000], {value:228, step: 0.5, label: "Total_plastic waste max size"})
background = "whitesmoke"
petal_color = "#fc6f79"
stroke_line = '#1f1f1f'
pw_total_color = 'tomato'
text_color = 'black'
stem_scaler1 = d3.scaleSqrt().range([stem_x1, inner_radius+20]).domain(d3.extent(plastic_waste_world.map(x => x.mismanaged_pw_capita)))
import { legendCircle } from "@harrystevens/circle-legend";
legend = legendCircle()
.scale(total_pw_scaler)
.tickValues([10000000, 30000000, 50000000])
.tickFormat((d, i, e) => i === e.length - 1 ? d + " Tonnes of trash" : d)
.tickSize(2); // defaults to 5
legend2 = legendCircle()
.scale(leaf_scaler)
.tickValues([50000, 150000, 300000])
.tickFormat((d, i, e) => i === e.length - 1 ? d + " bushels of hay" : d)
.tickSize(2); // defaults to 5
xAxis = g => g
.call(d3.axisLeft(stem_scaler).ticks(4))
.call(g => g.select('.domain').remove())
// .call(g => g.select('text').remove())
// .call(g => g.selectAll('.tick line').remove())
fontName = "Roboto"
style = {
yield html`<style>
@import url('https://fonts.googleapis.com/css2?family=${fontName}&display=swap');
div, input, button {
font-family: '${fontName}', sans-serif;
}
</style>`
}
leaf_scaler.domain()
`M 0 -${inner_radius} C -${0} -${stem-p_width} -${p_width}
-${stem-p_width} -${p_width} -${stem} C -${p_width} -${stem+p_width*1.3} ${p_width} -${stem+p_width*1.3} ${p_width} -${stem} C ${p_width} -${stem-p_width} 0 -${stem-p_width} 0 -${inner_radius}
{
const svg = d3.create('svg').attr('id','svg-vis1').attr('class', 'svg-vis').attr("viewBox", [0, 0, width, height]).style('background', background)
const groups = svg.selectAll('g').data(plastic_dataset_sorted).enter().append('g').attr('transform', x => `translate(${width*0.1},${height/2}) rotate(${arc_scaler(x.place)} ${0} ${0})`)
// axis
// svg.append("g").attr("transform", `translate(${260/4}, ${50})`)
// .call(legend);
// svg.append("g").attr("transform", `translate(${260/4}, ${500})`)
// .call(legend2);
// svg
// .append("g")
// .attr("class", "axis axis--x")
// .attr(
// "transform",
// `translate(${width/2}, ${height*0.63}) rotate(170, 0, 0)`
// )
// .call(xAxis);
groups.append('path').attr('d', x => {
const stem = stem_scaler(x.mpw_oceans_2021)+1
const p_width = leaf_scaler(x.mpw_2021)+3
// const size = x.mismanaged_
return `M 0 -${inner_radius} C -${0} -${stem-p_width} -${p_width}
-${stem-p_width} -${p_width} -${stem} C -${p_width} -${stem+p_width*1.3} ${p_width} -${stem+p_width*1.3} ${p_width} -${stem} C ${p_width} -${stem-p_width} 0 -${stem-p_width} 0 -${inner_radius}`
}).style("fill",petal_color).attr('stroke', stroke_line).attr('stroke-width', 0.5).attr('opacity', 0.8)
// svg.call(t);
// svg.call(z);
// groups.append('path').attr('d', x => {
// let total_pw_len = total_pw_scaler(x.mpw_2021) ? total_pw_scaler(x.mpw_2021) : 1
// let total_len = stem_scaler(x.pWaste2016) + total_pw_len*2 + leaf_scaler(x.pWaste2016) + 20
// return `M 0 -${inner_radius} L 0 -${total_len}`
// }).attr('stroke-width', 0.7)
// .style("stroke", stroke_line)
// // .style("stroke-dasharray", ("0.4,0.4"))
// groups.append('g').attr('transform', `rotate(${-90}, 0, 0)`).append('circle')
// .attr("cx", x => stem_scaler(x.mismanaged_pw_capita) + total_pw_scaler(x.pw_total) + leaf_scaler(x.mismanaged_pw_total) + 10)
// .attr("cy", 0)
// .attr("r", x => total_pw_scaler(x.pw_total))
// .attr('stroke-width', 0.4)
// .style("fill",pw_total_color)
// .attr("opacity", 0.5)
// .style("stroke", "gray").style("stroke-dasharray", ("0.4,0.4"))
// groups.append('text').attr('transform', `rotate(${-90})`).attr('x', x => {
// let total_pw_len = total_pw_scaler(x.pw_total) ? total_pw_scaler(x.pw_total) : 1
// let total_len = stem_scaler(x.mismanaged_pw_capita) + total_pw_len*2 + leaf_scaler(x.mismanaged_pw_total) + 30
// return total_len
// }).attr('y', 3).text(x => x.Entity).style('font-size', '0.65rem').attr('text-anchor', 'start').style('font-family',"Roboto").attr('fill', text_color)
// // circle markers
// groups.append('circle').attr('transform', `rotate(${-90}, 0, 0)`)
// .attr("cx", x => stem_scaler(x.mismanaged_pw_capita))
// .attr("cy", 0)
// .attr("r", x => leaf_scaler(x.mismanaged_pw_total))
// .attr('stroke-width', 1)
// .style("fill",'black')
// .attr("opacity", 0.5)
// // .style("stroke", "gray")
// groups.append('circle').attr('transform', `rotate(${-90}, 0, 0)`)
// .attr("cx", x => stem_scaler(x.mismanaged_pw_capita) + total_pw_scaler(x.pw_total) + leaf_scaler(x.mismanaged_pw_total) + 10)
// .attr("cy", 0)
// .attr("r", 1)
// .style("fill",'black')
// .attr("opacity", 1)
// groups.append('circle').attr('transform', `rotate(${-90}, 0, 0)`)
// .attr("cx", x => stem_scaler(x.mismanaged_pw_capita))
// .attr("cy", 0)
// .attr("r", 1)
// .style("fill",'white')
// .attr("opacity", 0.6)
// groups.append('circle').attr('transform', `rotate(${-90}, 0, 0)`)
// .attr('cx', x => {
// let total_pw_len = total_pw_scaler(x.pw_total) ? total_pw_scaler(x.pw_total) : 1
// let total_len = stem_scaler(x.mismanaged_pw_capita) + total_pw_len*2 + leaf_scaler(x.mismanaged_pw_total) + 20
// return total_len
// })
// .attr("cy", 0)
// .attr("r", 1)
// .style("fill",'black')
// .attr("opacity", 1)
// svg.append("circle")
// .attr('cx', 100)
// .attr('cy', 200)
// .attr("r", 100)
// .style("fill", t.url());
// svg.append("circle")
// .attr('cx', 100)
// .attr('cy', 30) transform-origin: center;
// .attr("r", 30)
// .style("fill", z.url());
// const g = svg.append('g').attr('transform', `translate(${25}, ${25}}`)
// g.append('path').attr("transform", `translate(${25}, ${25}) rotate(20, 0, 0)`).attr('d',`M 0 0 C 0 -${stem-2} -${p_width}
// -${stem-p_width} -${p_width} -${stem} C -${p_width} -${stem+p_width*1.2} ${p_width} -${stem+p_width*1.2} ${p_width} -${stem} C ${p_width} -${stem-p_width} 0 -${stem-2} 0 0`).style("fill",'tomato')
// M 0 0 C 0 -${stem} -${p_width} -5 -2 -7 C -2 -10 2 -10 2 -7 C 2 -5 0 -2 0 0
return svg.node()
}
plastic_waste_world@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
{var svg = document.getElementById("svg-vis1");
//get svg source.
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);
//add name spaces.
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
//add xml declaration
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
//convert svg source to URI data scheme.
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
//set url value to a element's href attribute.
document.getElementById("link").href = url;
}
// {
// let width_ = width
// let height_ = height
// const svg = d3.create('svg').attr('class', 'svg-vis').attr("viewBox", [0, 0, width_, height])
// var t = textures.lines()
// .orientation("vertical")
// .size(7)
// .strokeWidth(2)
// .stroke("darkorange");
// var z = textures.lines()
// .orientation("horizontal")
// .size(7)
// .strokeWidth(2)
// .stroke('darkorange')
// svg.call(t);
// svg.call(z);
// svg.append("circle")
// .attr('cx', 100)
// .attr('cy', 200)
// .attr("r", 100)
// .style("fill", t.url());
// svg.append("circle")
// .attr('cx', 100)
// .attr('cy', 30)
// .attr("r", 30)
// .style("fill", z.url());
// const p = svg.append('path').attr("transform", `translate(${30}, ${50}) rotate(20, 0, 0)`).attr('d','M 0 0 C -2 -3 -4 -8 0 -9 C 4 -8 2 -3 0 0')
// return svg.node()
// }
textures = require('textures@1.2.0/dist/textures.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.
