primary = '#98c0d9'
Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
Public
Edited
Jun 22
1 fork
height = width * 1.7777
neutral = '#000'
background_c = '#fff'
secondary = '#3d5b80'
exampleButton = svgDownloadButton(chart)
function svgDownloadButton(svgnode, filename = 'download.svg') {
const downloadButton = html`<a class="download" download="${filename}" href="#" style="display: flex; align-items: center;">${download_icon.outerHTML} Save ${filename}</a>`;
downloadButton.onclick = function(e) {
var url = (downloadButton.href = URL.createObjectURL(serialize(svgnode)));
setTimeout(function() {
URL.revokeObjectURL(url);
}, 50);
};
return downloadButton;
}
import { serialize, download_icon } from '@kelleyvanevert/little-things'
plastic_dataset = FileAttachment("plastic_dataset.json").json()
plastic_waste_world1.length
arc_scaler = d3.scaleBand().range([0, 360]).domain(plastic_waste_world1.map(x => x.Entity))
stem_scaler = d3.scaleSqrt().range([inner_radius,stem_x1]).domain([0, d3.extent(plastic_waste_world1.map(x => x.mismanaged_pw_capita))[1]])
leaf_scaler = d3.scaleLinear().range([2, leaf_width]).domain(d3.extent(plastic_waste_world1.map(x => x.mismanaged_pw_total)))
total_pw_scaler = d3.scaleLinear().range([5, total_x]).domain(d3.extent(plastic_waste_world1.map(x => x.pw_total )))
plastic_waste_world_sort = plastic_waste_world1.sort((a,b) => b.mismanaged_pw_capita - a.mismanaged_pw_capita)
arc_step = 360 / plastic_waste_world1.length
arc_scaler.step()
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_world1.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(8))
.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>`
}
plastic_waste_world = {
const updatedData = plastic_waste_world1.map(item => ({
...item,
mismanaged_pw_total: item.mismanaged_pw_total * 0.907
}))
return updatedData
}
{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;
}
g = {
const viz = d3.create("div")
const svg = viz.append("svg").attr("id","svg2")
.attr("width",300)
.attr("height",300)
.attr("viewBox",[0,0,300, 300])
var t = textures.lines()
.orientation("3/8")
.stroke("darkorange");
svg.call(t);
svg.append("circle")
.attr('cx', 100)
.attr('cy', 200)
.attr("r", 50)
.style("fill", t.url());
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.
