Public
Edited
Nov 21, 2022
1 fork
1 star
import {fromColumns, printTable} from '@uwdata/data-utilities'
import {aq, op} from "@uwdata/arquero"
import {graphic} from "@d3/margin-convention"
gapminder2 = FileAttachment("gapminder@2.json").json()
// extract the 10 most populous countries in 2005
listData = gapminder2
.filter(d => d.year === 2005)
.sort((a, b) => b.pop - a.pop)
.slice(0, 10)
list = {
const fmt = d3.format(',');
const ol = d3.create('ol');
ol.selectAll('li') // selects all 'li' elements (which may or may not exist!)
.data(listData) // provides the backing data
.join('li') // joins data with the selection, creating 'li' elements as needed
.attr('class', 'country') // set CSS class to 'country'
.text(d => `${d.country}: ${fmt(d.pop)}`) // add formatted text to 'li' elements
return ol.node(); // return the DOM element node of the 'ol' element
}
randomColor = () => `#${Math.floor(Math.random()*16777215).toString(16)}`
// Run this cell to recolor just the first item in the list above.
// If you are curious rhe randomColor() function was imported as a utility at the end of this document.
d3.selectAll('li.country').style('color', randomColor()), null
// create a simple bar chart
{
const container = d3.create('div');
// Add code here to generate the bar chart within the container.
// Use 'div' elements for each bar.
// Make sure you set some text to each div in order to make sure the bars appear.
// The 'barData' variable holds the data to visualize as a set
// of objects with 'key' and 'value' properties.
return container.node();
}
// compute average life expectancy per region ('cluster')
// output values as 'key' (cluster) and 'value' (life_expect)
barData = aq.from(gapminder2)
.filter(d => d.year === 2005)
.groupby('cluster')
.rollup({ mean: d => op.floor(op.mean(d.life_expect)) })
.orderby('cluster')
.select({ cluster: 'key', mean: 'value' })
.objects()
xscale = d3.scaleLinear()
.domain([0, d3.max(barData, d => d.value)])
.range([0, width])
{
const container = d3.create('div');
container.selectAll('div')
.data(barData)
.join('div')
.style('background', 'steelblue')
.style('border', '1px solid white')
.style('font-size', 'small')
.style('color', 'white')
.style('text-align', 'right')
.style('padding', '3px')
.style('width', d => `${xscale(d.value)}px`) // <-- Use xscale instead of a magic number
.text(d => d.value);
return container.node();
}
color = d3.scaleOrdinal(d3.schemePastel2).domain(barData.map(d => d.key));
// Default color schemes are here: https://github.com/d3/d3-scale-chromatic#categorical
// Try another one!
{
const container = d3.create('div');
container.selectAll('div')
.data(barData)
.join('div')
.style('background', d => color(d.key))
.style('border', '1px solid white')
.style('font-size', 'small')
.style('color', 'white')
.style('text-align', 'right')
.style('padding', '3px')
.style('width', d => `${xscale(d.value)}px`)
.text(d => d.value);
return container.node();
}
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.
