I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
Plot.plot({
width: 400,
height: 300,
marginLeft: 30,
x: {
tickFormat: d3.format(""),
label: null,
ticks: 3
},
y: {
tickFormat: (d) => d.toLocaleString("de"),
grid: false,
axis: "right",
label: "Milliarden Tonnen"
},
color: {
domain: group_order,
range: color_scale
},
marks: [
Plot.areaY(carbon_emissions, {
x: "year",
y: "emissions",
fill: "group",
z: "group",
stroke: "black", // Add stroke
order: group_order,
tip: true
}),
// Use one text mark applied to a data array.
Plot.text(text_data, {
x: "x",
y: "y",
text: "text",
fontSize: 10,
textAnchor: "end",
lineAnchor: "bottom",
fill: "white"
})
]
})
text_data = [
{ x: 2019, y: 8, text: "Rest" },
{ x: 2019, y: 7, text: "Indien" },
{ x: 2019, y: 5, text: "China" },
{ x: 2019, y: 0.6, text: "USA" },
{ x: 2019, y: 1.7, text: "EU" },
{ x: 2019, y: 2.8, text: `andere\nentwickelte` },
{ x: 2019, y: 3.9, text: "Russland" }
]
carbon_emissions = FileAttachment("carbon_emissions_observable@1.csv")
.csv()
.then(function (data) {
data.forEach(function (d) {
d.emissions = +d.emissions / 1000;
d.year = +d.year;
});
return data;
})
carbon_emissions
Type Table, then Shift-Enter. Ctrl-space for more options.
group_order = [
"USA",
"Europäische Union",
"andere entwickelte Länder",
"Russland",
"China",
"Indien",
"Rest der Welt",
"internationaler Flugverkehr"
]
color_scale = [
"#4f80ff",
"#80A3FF",
"#80A3FF",
"#ff7842",
"#e84f1c",
"#ff7842",
"#ff7842",
"#ff7842",
"#ff7842",
"#ff7842"
]
style = html`
<div></div>
<style>
.box_one {
width: calc(33% - 10px);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 10px;
}
.box_two {
width: calc(33% - 22px);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
border-left: 2px dotted #c5d2dd;
}
.box_three {
width: calc(33% - 12px);
padding-left: 10px;
padding-right: 0px;
padding-top: 10px;
padding-bottom: 10px;
border-left: 2px dotted #c5d2dd;
}
@media (max-width: 900px) {
.box_one, .box_two, .box_three {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
border-top: 0px dotted #c5d2dd;
border-bottom: 2px dotted #c5d2dd;
border-left: 0px dotted #c5d2dd;
border-right: 0px dotted #c5d2dd;
}
}
.legend {
bottom: 3px;
position: relative;
margin-right: 5px;
width: 20px;
height: 1px;
background-color: #0f151a;
display: inline-block;"
}
.link {
color: #4f80ff;
}
.box {
display: flex;
flex-wrap: wrap;
}
.tooltip {
fill: #fff;
}
.tooltip_text {
color: #000;
}
.mode {
color: #0f151a;
background-color: #ffffff;
}
@font-face {
font-family: Source Serif Pro;
src: url(https://static.rndtech.de/share/rnd/jchrist/SourceSerifPro-Regular.ttf);
}
@font-face {
font-display: swap;
font-family: 'DIN Next LT Pro';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterRegular';
font-style: normal;
font-weight: 400;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterMedium';
font-style: normal;
font-weight: 500;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterBold';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.ttf) format("truetype")
}
h2 {
color: rgb(15, 21, 26);
font-family: "DIN Next LT Pro", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0px 0px 0px 0px;
}
.title {
color: rgb(15, 21, 26);
font-family: "DIN Next LT Pro", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0px 0px 0px 0px;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: rgb(41, 56, 69);
}
.credits {
font-size: 12px;
color: #99AFC2;
font-family: InterRegular, sans-serif;
font-weight: 400;
position: relative;
}
body {
display: block;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
svg {
background-color: white !important;
color: #0f151a !important;
}
.tooltip {
fill: #fff;
}
.tooltip_text {
color: #000;
}
g:not([font-size], [font-weight]) text {
font-size: 12px;
line-height: 125%;
font-weight: 400;
font-family: InterRegular;
color: #0f151a;
background-color: #ffffff;
}
@media (prefers-color-scheme: dark) {
.legend {
bottom: 3px;
position: relative;
margin-right: 5px;
width: 20px;
height: 1px;
background-color: #ffffff;
display: inline-block;"
}
.tooltip {
fill: #293845;
opacity: .85;
}
.tooltip_text {
color: #fff;
}
.mode {
color: #ffffff;
background-color: #293845;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
}
g:not([font-size], [font-weight]) text {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
svg {
background-color: #293845 !important;
color: white !important;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
}
g:not([font-size], [font-weight]) text {
font-size: 12px;
line-height: 125%;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
}
</style>`
function entity(character) {
return `&#${character.charCodeAt(0).toString()};`;
}
function swatches({
color,
columns = null,
format = (x) => x,
swatchSize = 15,
swatchWidth = swatchSize,
swatchHeight = swatchSize,
marginLeft = 0
}) {
const id = DOM.uid().id;
if (columns !== null)
return html`<div style="display: flex; align-items: center; margin-left: ${+marginLeft}px; font: 10px sans-serif;">
<style>
.${id}-item {
break-inside: avoid;
display: flex;
align-items: center;
padding-bottom: 1px;
}
.${id}-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - ${+swatchWidth}px - 0.5em);
}
.${id}-swatch {
width: ${+swatchWidth}px;
height: ${+swatchHeight}px;
margin: 0 0.5em 0 0;
}
</style>
<div style="width: 100%; columns: ${columns};">${color
.domain()
.map((value) => {
const label = format(value);
return html`<div class="${id}-item">
<div class="${id}-swatch" style="background:${color(value)};"></div>
<div class="${id}-label" title="${label.replace(
/["&]/g,
entity
)}">${document.createTextNode(label)}</div>
</div>`;
})}
</div>
</div>`;
return html`<div style="display: flex; align-items: center; min-height: 33px; margin-left: ${+marginLeft}px; font: 10px sans-serif;">
<style>
.${id} {
display: inline-flex;
align-items: center;
margin-right: 1em;
font-size: 12px;
line-height: 125%;
font-weight: 400;
font-family: InterRegular;
width: 100%;
}
.${id}::before {
content: "";
width: ${+swatchWidth}px;
height: ${+swatchHeight}px;
margin-right: 0.5em;
background: var(--color);
}
</style>
<div>${color
.domain()
.map(
(value) =>
html`<span class="${id}" style="--color: ${color(
value
)}">${document.createTextNode(format(value))}</span>`
)}</div>`;
}
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.
