The avatar for @didoesdigital
Di
Data Viz Engineer. Author of Practical UI Patterns for Design Systems. Creator of Typey Type for Stenographers.
Published
Journal: Getting Started with Data Viz
Edited
May 31, 2020
Fork of 30 May 2020: Data Tables
•
1 fork
2 stars
2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// fetch(`https://en.wikipedia.org/w/api.php?format=json&origin=*&action=parse&prop=text&page=List_of_Oceanian_countries_by_area&section=0`).then(response => response.json())
Insert cell
Insert cell
Insert cell
Insert cell
oceania_text.parse.text["*"]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
table_styles = html`<style>

table {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border-collapse: collapse;
display: block;
overflow: auto;
white-space: nowrap;
width:${width}px;
min-width:${width}px
}

th, tr:last-child {
background: #F6F6F6;
}


th:nth-child(3),
th:nth-child(4)
{
text-align: right;
}


td:nth-child(3),
td:nth-child(4)
{
font-family: "Pragmata Pro", "Overpass Mono", Consolas, "Courier New", Courier, monospace;
}

td, th {
border: 1px solid #ECECEF;
text-align: left;
padding: 8px;
}

td:first-of-type {
font-weight: 600;
}

</style>
`
Insert cell
Insert cell
Insert cell
oceania_table.querySelector("tbody tr").cloneNode(true)
Insert cell
Insert cell
oceania_table.querySelector("tr:not(:first-child)").cloneNode(true)
Insert cell
Insert cell
rows = oceania_table.querySelectorAll("tr:not(:first-child):not(:last-child)")
Insert cell
Insert cell
countries = Array.from(rows, r => r.querySelector("td:nth-child(2)").textContent.trim())
Insert cell
Insert cell
areas = Array.from(rows, r => +r.querySelector("td:nth-child(3)").textContent.trim().replace(/,/g, ""))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {vl} from '@didoesdigital/vega-lite-api-vega-lite-v4'
Insert cell
d3 = require("d3@5")
Insert cell

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