Public
Edited
Feb 14, 2023
Insert cell
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
import {printTable} from '@uwdata/data-utilities';
Insert cell
csvURL = FileAttachment("debt_data.csv").url()
Insert cell
data = d3.csv(csvURL)
Insert cell
csvUrl2 = FileAttachment("debt_data2.csv").url()
Insert cell
// data for each of these countries from 2018-2021
data2 = d3.csv(csvUrl2)
Insert cell
csvURL3 = FileAttachment("european_data.csv").url()
Insert cell
european_data = d3.csv(csvURL3)
Insert cell
printTable(european_data)
Insert cell
group_data = d3.group(european_data, d => d.LOCATION)
Insert cell
viewof test = Inputs.select(group_data, {multiple: true})
Insert cell
test
Insert cell
var res = [];
map.forEach(function(val, key) {
res.push({ region: key, value: val });
});
Insert cell
{
const countryGroups = vl.groupby('LOCATION')
.aggregate(vl.min('TIME').as('start'), vl.max('TIME').as('end'));

const locationChoice = vl.selectMulti('country')
.fields('LOCATION')
.sort('ascending')
.format(d => d.LOCATION)
.init([{country: 'Austria'}, {country: 'Germany'}, {country: 'Spain'}])
.bind(vl.checkbox());

locationChoice.title = 'Choose Country(s)';

return vl.markBar()
.data(european_data)
.transform(countryGroups)
.params(locationChoice)
.encode(
vl.x().fieldQ('Value').stack(null).title('Debt'),
vl.y().fieldN('LOCATION').sort('descending').title('Country'),
vl.color().fieldN('LOCATION').scale({range: ['#7fc97f', '#beaed4', '#fdc086']}).legend(null)
)
.height(500)
.width(400)
.render();
}
Insert cell
locationChoice
Insert cell
plot = {
// select a point for which to provide details-on-demand
const hover = vl.selectPoint('hover')
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.toggle(false) // disable toggle on shift-hover
.nearest(true); // select data point nearest the cursor

// predicate to test if a point is hover-selected
// return false if the selection is empty
const isHovered = hover.empty(false);
// define our base line chart of stock prices
const line = vl.markLine().encode(
vl.x().fieldT('TIME'),
vl.y().fieldQ('Value'),
vl.color().fieldN('LOCATION')
);
// shared base for new layers, filtered to hover selection
const base = line.transform(vl.filter(isHovered));

// mark properties for text label layers
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};

return vl.data(european_data)
.layer(
line,
// add a rule mark to serve as a guide line
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('TIME')),
// add circle marks for selected time points, hide unselected points
line.markCircle()
.params(hover) // use as anchor points for selection
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
// add white stroked text to provide a legible background for labels
base.markText(label, white).encode(vl.text().fieldQ('Value')),
// add text labels for stock prices
base.markText(label).encode(vl.text().fieldQ('Value'))
)
.width(800)
.height(500)
.render();
}
Insert cell
vl.markBar()
.params(
vl.param('TIME')
.value(2021)
.bind(vl.slider(1995, 2021, 1))
)
.data(european_data)
.transform(
vl.filter('datum.TIME == TIME')
)
.encode(
vl.x().fieldQ('Value').stack(null).title('Debt'),
vl.y().fieldN('LOCATION').sort('descending').title('Country'),
vl.tooltip(['LOCATION', 'Value'])
)
.height(400)
.width(300)
.render();
Insert cell
{
const yearSelect = vl.selectMulti('Value', 'LOCATION')
.fields('TIME')
.init([2021])
.bind(vl.slider(1995, 2021, 1).name("Year"))
.values([...Array(27).keys()].map(i => i + 1995));

const filteredData = vl.filter(
vl.or(
...yearSelect.value.map(year => vl.equal(year, vl.field('TIME')))
)
);

return vl.markBar()
.data(european_data)
.params(yearSelect)
.transform(filteredData)
.encode(
vl.x().fieldQ('Value').stack(null).title('Debt'),
vl.y().fieldN('LOCATION').sort('descending').title('Country')
)
.height(500)
.width(400)
.render()
}
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