Unlisted
Edited
Jul 21, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {StackedAreaChart} from "@d3/stacked-area-chart"
Insert cell
data
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
plastic_pollutionRenamed.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
mismanaged_plastic (1).csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
MismangedContinents_finish@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
ContinentMismanagedREADY.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
ContinentsA.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
mismanged = FileAttachment("ContinentsA.csv").csv({typed:true})
Insert cell
Insert cell
filterValues = ["Asien", "Europa", "SouthAmerica", "NordAmerica", "Australien", "Africa"];

Insert cell
filterValuesLine = ["Asia", "Europe", "South America", "North America", "Australia", "Africa", "South Africa"];
Insert cell
filterdDataMismanaged = mismanged.filter(row => filterValues.includes(row.Entity));
Insert cell

filterdData = data.filter(row => filterValuesLine.includes(row.Entity));
Insert cell
units = filterdDataMismanaged.flatMap(d => d3.range(Math.round(d.Mismanaged / 10000000000)).map(() => d))
Insert cell
function unitTransform(value, rows = 5, n = 1) {
return transformFlatMap(data => {
let counter = 0;
return data.map(d =>
Array.from({ length: Math.round(d[value] / n) }, () => ({
...d,
row: counter++ % rows
}))
);
});
}
Insert cell
transformFlatMap = (f) =>
function transform(filterdDataMismanaged, facets) {
const unitFacets = [];
const unitData = [];
for (const index of facets) {
const facet = [];
for (const d of f(Array.from(index, (i) => data[i])).flat(1)) {
facet.push(unitData.push(d) - 1);
}
unitFacets.push(facet);
}
return { data: unitData, facets: unitFacets };
}
Insert cell
Insert cell
import {LineChart} from "@d3/multi-line-chart"
Insert cell
data = FileAttachment("plastic_pollutionRenamed.csv").csv({typed:true})
Insert cell
import {vegaEmbed} from "@vega/multi-series-line-chart-with-tooltip"
Insert cell
vegaEmbed({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"values": filterdData},
"width": 700,
"height": 600,
"encoding": {"x": {"field": "Year", "type": "nominal"}},
"layer": [
{
"encoding": {
"color": {"field": "Entity", "type": "nominal"},
"y": {"field": "WasteExports", "type": "quantitative"}
},
"layer": [
{"mark": "line"},
{"transform": [{"filter": {"selection": "hover"}}], "mark": "point"}
]
},
{
"transform": [{"pivot": "Entity", "value": "WasteExports", "groupby": ["Year"]}],
"mark": "rule",
"encoding": {
"opacity": {
"condition": {"value": 0.3, "selection": "hover"},
"value": 0
},
"tooltip": [
{"field": "Africa", "type": "quantitative"},
{"field": "Asia", "type": "quantitative"},
{"field": "Australia", "type": "quantitative"},
{"field": "Europe", "type": "quantitative"},
{"field": "North America", "type": "quantitative"},
{"field": "South America", "type": "quantitative"},
{"field": "South Africa", "type": "quantitative"},
]
},
"selection": {
"hover": {
"type": "single",
"fields": ["Year"],
"nearest": true,
"on": "mouseover",
"empty": "none",
"clear": "mouseout"
}
}
}
]
})
Insert cell
import {vegaDatasets} from "@vega/multi-series-line-chart-with-tooltip"
Insert cell
import {vl} from "@vega/vega-lite-api"
Insert cell
import {vegaDataViewer} from "@john-guerra/vega-data-viewer"
Insert cell
import {vegaDatasets} from "@vega/multi-series-line-chart-with-tooltip"
Insert cell
vl.vega.expressionFunction('iformat',(datum, params) => {
return ilformat(datum);
});
Insert cell
ilformat = ilocale.format("$,")
Insert cell
ilocale = d3.formatLocale({
decimal: ",",
thousands: ".",
grouping: [3],
currency: ["", "\u00a0€"],
minus: "\u2212",
percent: "\u202f%"
})
Insert cell
Insert cell
filterValuesIncome = ["Low-income countries", "Lower-middle-income countries", "Upper-middle-income countries"];
Insert cell
filterdDataScatter = data.filter(row => filterValuesIncome.includes(row.Entity));
Insert cell
Plot.plot({
marks: [
Plot.dot(filterdDataScatter, {x: "WasteImports" , y: "Entity", fill: "Entity"})
],
color: { legend: true },
marginLeft: 200
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(filterdData, {x: "WasteExports", y: "Entity", sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
]
})
Insert cell
plastic_waste_generation@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
plasticWasteGeneration = FileAttachment("plastic_waste_generation@1.csv").csv({typed:true})
Insert cell
selectedPlasticWaste = ['Australia', 'Malaysia', 'Spain', 'South Africa', 'Turkey', 'Germany'];
Insert cell
selectionPlasticWasteData = plasticWasteGeneration.filter(row => selectedPlasticWaste.includes(row.Entity));
Insert cell
Plot.plot({
marks: [
Plot.barX(selectionPlasticWasteData, {x: "PlasticWasteGeneration", y: "Entity", sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
]
})
Insert cell
import {BubbleChart} from "@d3/bubble-chart"
Insert cell
bubbleChart = BubbleChart(plasticWasteGeneration, {
label: d => [d.Entity, d.PlasticWasteGeneration].join("\n"),
value: d => d.PlasticWasteGeneration,
group: d => d.Entity,
title: d => d.Entity,
width: 1152
})
Insert cell
anotherSelection = data.filter(row => selectionYear.includes(row.Year));
Insert cell
selectionYear = "2010";
Insert cell
Insert cell
d3 = require("d3@6")
Insert cell
import {form} from "@mbostock/form-input"
Insert cell
wafflHeight = 600;
Insert cell
waffleWidth = 300
Insert cell
padding = ({x: 10, y: 40})
Insert cell
waffleSize = 160
Insert cell
filterdDataMismanaged
Insert cell
chartData = {
const data = filterdDataMismanaged;
const total = data.reduce((a, b) => a + Math.abs(b.Mismanaged), 0);
return data.map(d => ({
entity: d.Entity,
code: d.Code,
mismanaged: d.Mismanaged / total * 100
}));
}
Insert cell
waffles = {
const array = [];
if (whole) {
const max = chartData.length;
let index = 0, curr = 1,
accu = Math.round(chartData[0].mismanaged), waffle = [];
for (let y = 9; y >= 0; y--)
for (let x = 0; x < 10; x ++) {
if (curr > accu && index < max) {
let r = Math.round(chartData[++index].mismanaged);
while(r === 0 && index < max) r = Math.round(chartData[++index].mismanaged);
accu += r;
}
waffle.push({x, y, index});
curr++;
}
array.push(waffle);
}
else {
chartData.map((d, i) => {
let curr = 0, waffle = [];
for (let y = 9; y >= 0; y--)
for(let x = 0; x < 10; x ++) {
waffle.push(({x, y, index: curr < Math.round(d.mismanaged) ? i : -1}));
curr++;
}
array.push(waffle);
});
}
return array;
}
Insert cell
isRect = options.shape === "rect"
Insert cell
whole = options.style === "whole"
Insert cell
sequence = (length) => Array.apply(null, {length: length}).map((d, i) => i);
Insert cell
scale = d3.scaleBand()
.domain(sequence(10))
.range([0, waffleSize])
.padding(0.1)
Insert cell
color = d3.scaleOrdinal(d3.schemePaired)
.domain(sequence(chartData.length))
Insert cell
toCurrency = num => d3.format("$,.2f")(num)
Insert cell
drawLegend = (svg, cells) => {
const legend = svg.selectAll(".legend")
.data(chartData.map(d => d.entity))
.join("g")
.attr("opacity", 1)
.attr("transform", (d, i) => `translate(${waffleSize + 20},${i * 30})`)
.on("mouseover", highlight)
.on("mouseout", restore);

legend.append("rect")
.attr("rx", 3).attr("ry", 3)
.attr("width", 15).attr("height", 15)
.attr("fill", (d, i) => color(i));

legend.append("text")
.attr("dx", 20)
.attr("dy", 5)
.attr("alignment-baseline", "hanging")
.style("font-size", 6)
.text((d, i) => `${d} (${chartData[i].mismanaged.toFixed(1)}%)`);
function highlight(e, d, restore) {
const i = legend.nodes().indexOf(e.currentTarget);
cells.transition().duration(500)
.attr("fill", d => d.index === i ? color(d.index) : "#ccc");
}
function restore() {
cells.transition().duration(500).attr("fill", d => color(d.index))
}
}
Insert cell
Insert cell
Insert cell
Insert cell
<body>
<svg>
<circle id=blueCircle cx=50 cy=50 r=20 stroke=darkblue fill=lightblue></circle>
</svg>
</body>
Insert cell
d3.select("#blueCircle") // select the element using a css selector
.transition()
.duration(3000) // this transition will last 1500 seconds
.attr("cx", 250) // transition the cx attribute to 250
Insert cell
function expandShrink(){
d3.select("#blueCircle")
.transition()
.duration(1600)
.attr("r", 50) // increase radius to 50px
.transition()
.duration(800)
.attr("fill", "yellow") // change to yellow (why not!)
.transition()
.duration(800)
.attr("r", 20) // shrink radius back to 20px
.attr("fill","lightblue") // change back to blue
}
Insert cell
filterdDataScatter

Insert cell
svg = d3.select("#plotSVG")
Insert cell

svg.selectAll(".bubble")
.data(filterdDataScatter) // bind each element of the data array to one SVG circle
.join("circle")
.attr("class", "bubble")
.attr("cx", d => d.WasteImports) // set the x position based on the number of claps
.attr("cy", d => d.WasteExports) // set the y position based on the number of views
.attr("r", d => d.Entity) // set the radius based on the article reading time
.attr("stroke", "darkblue")
.attr("fill", d => "lightblue")
Insert cell
Insert cell
personsEnter = persons;
Insert cell
import {toggle, pin, video, key, signinNote, seriesNavigation} from "6a6d6989dd6b59c6"
Insert cell
number = {
let wasteProduction = personsEnter * 33.7;
return wasteProduction
}
Insert cell
numberId = document.querySelector("#numberText");
Insert cell
import { html } from "@observablehq/stdlib";

Insert cell

// HTML-Element erstellen
element = html`<h1>${number}</h1>`;


Insert cell
document.querySelector("#numberText").innerHTML = number.toFixed(2) + " kg"

Insert cell
plasticPerContinent = FileAttachment("plastic_waste_continents@1.csv").csv({typed:true})
Insert cell
ProductionDataPercent_continent = {
const data1 = plasticPerContinent;
const total1 = data1.reduce((a, b) => a + Math.abs(b.PlasticWaste), 0);
return data1.map(d => ({
entity: d.Continent,
plasticwasteperc: Math.round(d.PlasticWaste / total1 * 100),
plasticwaste: d.PlasticWaste
}));
}
Insert cell
bottle = FileAttachment("bottle.jpeg").image()
Insert cell
Insert cell
amountOfPlasticBottles = {
let amount = (number*100)/25;
return amount
}
Insert cell
htmlObj = {

let div = document.querySelector("#divBottles");
let obj = 0;
let bottleImg;

div.innerHTML = "";

for(let i = 0; i<amountOfPlasticBottles; i++){
let bottleImg = html`<img src="${await FileAttachment("bottle.jpeg").url()}" style="height: 20px" id="${i}"/>`
div.appendChild(bottleImg);
obj = obj + 1;
}
return obj;
}
Insert cell
document.querySelector("#amount").innerHTML = htmlObj;
Insert cell

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.
Learn more