Software Developer, Guardium Guy, Dad
Public
Edited
Sep 13, 2023
vega({
$schema: "https://vega.github.io/schema/vega-lite/v4.json",
height: 500,
width: 700,
title: {
text: [`Port Throughput - Canada and Select Countries`],
subtitle: ["Years: 2010-2021", `UNCTAD STAT`],
subtitleColor: "f4f4f4"
},
data: {
values: us_contportthroughput_selectcountries
},
mark: { type: "line", tooltip: true },
encoding: {
y: {
field: "Container Units",
type: "quantitative",
axis: { grid: false }
//sort: "-Tonnes Built"
},
x: {
field: "Year",
type: "nominal",
axis: { grid: false }
},
color: {
field: "Country",
type: "nominal",
sort: "-y"
}
}
})
// load the Vega-Embed library
vegaThemes = require("vega-themes@2.14.0")
// load the Vega-Embed library
vegaEmbed = require("vega-embed@6")
html`<link href="https://cdn.jsdelivr.net/npm/@carbon/charts@1.0.4/styles.css" rel="stylesheet" />`
html`<link href="https://cdn.jsdelivr.net/npm/carbon-components@10.56.0/css/carbon-components.css " rel="stylesheet" />`
us_contportthroughput_selectcountries
shipbuildingTonnesbuiltpercountryTop10pluscanada
us_contportthroughput_selectcountries.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
shipbuilding-tonnesbuiltpercountry-top10plusCanada@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
