The avatar for @mbrownshoes
Mathew Brown
Published
Edited
May 11, 2022
Importers
9 stars
12
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
top5 = ["Palau", "Panama", "Marshall Islands", "Singapore", "Liberia"]
Insert cell
Insert cell
multiples = brokenByCountryandYear
Insert cell
// bars = Plot.plot({
// height: 160,
// width,
// x: {
// label: null,
// domain: [
// "Panama",
// "St. Kitts and Nevis",
// "Liberia",
// "Togo",
// "Comoros",
// "Singapore",

// "Hong Kong",
// "South Korea",
// "Palau",

// "Marshall Is."
// ]
// },
// y: {
// label: "↑ Last Voyage flags",
// grid: true
// },
// color: {
// domain: ["highlight", "normal"],
// range: ["#93003a", "#dd4c65"]
// },
// marks: [
// Plot.barY(
// barData,
// Plot.groupX(
// { y: "count" },
// {
// x: "flag",
// fill: (d) => (highlight.includes(d.flag) ? "highlight" : "normal")
// }
// )
// ),
// Plot.ruleY([0])
// ]
// })

Insert cell
cecilieMap
Insert cell
Insert cell
Plot.plot({
y: {
percent: true
},
marks: [Plot.barY(byWeightSumm, { x: "year", y: "total", fill: "foc" })]
})
Insert cell
byWeightSumm
Insert cell
// data used for heat map
sData = FileAttachment("sData.json").json()
Insert cell
retirement_date = "2015-01" // all ships retired after this date
Insert cell
start_animation_date = "2014-11"
Insert cell
highlight = ["Comoros", "Palau"]
Insert cell
colorScale = ["#9e0142", "rgb(225, 87, 89)"]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
callAnnotations = d3.select("g.annotation-group").call(makeMyAnnotations)
Insert cell
makeMyAnnotations = {
chart;
return d3_svg_annotation
.annotation()
.type(d3_svg_annotation.annotationCalloutElbow) //annotationCalloutCircle
.accessors({
x: d => projection(d.coord)[0] + d.shiftBy[0],
y: d => projection(d.coord)[1] + d.shiftBy[1]
})
.editMode(false)
.annotations(annotations);
}
Insert cell
annotationTextColor = "#dc143c"
Insert cell
import { color } from "@jashkenas/inputs"
Insert cell
mutable debug = 1
Insert cell
// debug[0].date
Insert cell
update = chart.update(currData)
Insert cell
currData = chartData.filter(d => +new Date(d.date) === +new Date(currentDate))
Insert cell
chartData
Insert cell
Insert cell
Insert cell
dismantledCount = T.tidy(dismanteled, T.groupBy("COUNTRY", T.count("COUNTRY")))
Insert cell
dismanteled = dismantled2019.concat(dismantled2020).map((d) => {
if (d.COUNTRY === "China " || d.COUNTRY === "China ") {
d.COUNTRY = "China";
}
return d;
})
Insert cell
dismanteled
Insert cell
dismantled2020 = FileAttachment("2020 List of all ships dismantled@1.csv").csv()
Insert cell
dismantled2019 = FileAttachment(
"2019-List-of-all-ships-dismantled-all-over-the-world (1).csv"
).csv({
typed: true
})
Insert cell
deadweight = FileAttachment("Deadweight (3).csv").csv({ typed: true })
Insert cell
Insert cell
byWeight = {
return T.tidy(
deadweight,
T.pivotLonger({
cols: ["-Country", "-SHIP TYPE"],
namesTo: ["year"],
valuesTo: ["val"]
}),
T.filter((d) => d["SHIP TYPE"] === "Container ships")
).map((d) => {
d.val = d.val === ".." ? 0 : d.val;
d.Country = d.Country.trim();
d.year = d.year.slice(1);
// console.log(d.Country);
Broad_flags_of_convenience.includes(d.Country)
? (d.foc = "foc")
: (d.foc = "other");
return d;
});
}
Insert cell
Inputs.table
Insert cell
[
...new Set(
byWeight
.filter((d) => d.foc === "foc" && d.year === "1980")
.map((d) => d.Country)
)
]
Insert cell
byWeightSumm = T.tidy(
byWeight,

T.groupBy(["year", "foc"], [T.summarize({ total: T.sum("val") })]),
T.mutate({ date: (d) => new Date(d.year) })
)
Insert cell
T = require("@tidyjs/tidy@2.4.2/dist/umd/tidy.min.js")
Insert cell
Insert cell
world.features.find(d => d.properties.name === "Zimbabwe")
Insert cell
Insert cell
// shipsEndDate.filter(d => d.year === 2018)
Insert cell
barColors = ["#add2da", "#1f5e70"]
Insert cell
ITF_flags_of_convenience = [
"Antigua and Barbuda",
"Bahamas",
"Barbados",
"Belize",
"Bermuda",
"Bolivia",
"Cambodia",
"Cayman Islands",
"Comoros",
"Curacao",
"Cyprus",
"Equatorial Guinea",
"Faroe Islands",
"French International Ship Registry (FIS)",
"German International Ship Registry (GIS)",
"Georgia",
"Gibraltar",
"Honduras",
"Jamaica",
"Lebanon",
"Liberia",
"Malta",
"Madeira",
"Marshall Islands",
"Mauritius",
"Moldova",
"Mongolia",
"Myanmar",
"North Korea",
"Panama",
"Sao Tome and Principe",
"St Vincent",
"Sri Lanka",
"Tonga",
"Vanuatu"
]
Insert cell
[
...new Set(byWeight.filter((d) => d.foc === "other").map((d) => d.Country))
].filter((d) => d.includes("Guinea"))
Insert cell
[...new Set(byWeight.filter((d) => d.foc === "foc").map((d) => d.Country))]
Insert cell
Insert cell
shipsEndDate = FileAttachment("filledDates.json").json()
Insert cell
// shipsEndDate = FileAttachment("dates90-10.json").json()
Insert cell
Insert cell
Insert cell
// chartData.filter(d => +new Date(d.date) === +new Date(currentDate))
Insert cell
forceX = d => {

return projection(d.feature.centroid)[0];
}
Insert cell
forceY = d => {
return projection(d.feature.centroid)[1]
}
Insert cell
// plotData = chartData.filter(d => +new Date(d.date) === +new Date(currentDate))
Insert cell
// simulation.nodes()
Insert cell
Insert cell
height = width * 0.49
Insert cell
Insert cell
path = d3.geoPath(projection);
Insert cell
projection = d3.geoEqualEarth()
.rotate([-10, 0, 0])
.fitSize([width, height], { type: "Sphere" });
Insert cell
Insert cell
import { cecilieMap } from "e4970ee26ad6ff38"
Insert cell
import { viewof mapDismanteled } from "25c507d48522c13a"
Insert cell
d3 = require("d3@6", "d3-array@2", "d3-force@2", "d3-geo@1", "d3-scale@3", "d3-selection@1")
Insert cell
import { Plot } from "@observablehq/plot"
Insert cell
import { chart as sankey } from '7b52aad50642c28c'
Insert cell
_ = require("lodash")
Insert cell
import { brokenByCountryandYear } from 'f2028122b8903c76'
Insert cell
import { Scrubber } from "@mbostock/scrubber"
Insert cell
topojson = require("topojson-client@3");
Insert cell
import { legend as leg, swatches } from "c6baa6befbd5e04a"
Insert cell
import { legendCircle } from "@harrystevens/circle-legend";
Insert cell
// import { swatches } from "@d3/color-legend"
Insert cell
import { toc } from "@harrystevens/toc";
Insert cell
d3_svg_annotation = require("d3-svg-annotation")
Insert cell
Insert cell
r = d3
.scaleSqrt()
.domain([0, 1379302771])
.range([0, Math.sqrt(width * height) / 10])
Insert cell
Insert cell
// Find the centroid of the largest polygon
centroid = (feature) => {
const geometry = feature.geometry;
if (geometry.type === "Polygon"){
return d3.geoCentroid(feature);
}
else {
let largestPolygon = {}, largestArea = 0;
geometry.coordinates.forEach(coordinates => {
const polygon = { type: "Polygon", coordinates },
area = d3.geoArea(polygon);
if (area > largestArea) {
largestPolygon = polygon;
largestArea = area;
}
});
return d3.geoCentroid(largestPolygon);
}
}
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