Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
import {MultiSelect} from "@bumbeishvili/utils"
import {printTable} from '@uwdata/data-utilities';
csvURL = FileAttachment("debt_data.csv").url()
data = d3.csv(csvURL)
csvUrl2 = FileAttachment("debt_data2.csv").url()
// data for each of these countries from 2018-2021
data2 = d3.csv(csvUrl2)
csvURL3 = FileAttachment("european_data.csv").url()
csvURL4 = FileAttachment("european_data_cleaned.csv").url()
european_data = d3.csv(csvURL4)
printTable(european_data)
group_data = d3.group(european_data, d => d.LOCATION)
viewof selected = Inputs.table(group_data, {columns: ["0"], header: ["Countries"], width: 200})
selected
viewof selected2 = Inputs.checkbox(group_data, {value: [""]})
selected2
viewof selectedTest = Inputs.table()
//viewof selectData = Inputs.select(group_data, {width: 120,multiple: 24, label: "Choose Location(s) Shift+Click to select multiple continuous countries Command + Click to select multiple countries"});
selectData
plot = {
// create a search bar to filter the data
const countryFilter = vl
.selectSingle("Country")
.options(group_data.map(d => d[0]))
.init({ "Country": "All" })
.bind(vl.data('group_data').select('0'));
// create a layer for the plot
const plotLayer = vl
.markLine()
.encode(
vl.x().fieldT('TIME'),
vl.y().fieldQ('Value'),
vl.color().fieldN('LOCATION'),
)
.transform(
vl.filter(
// filter the data based on the selected country
vl.or(
vl.equal(countryFilter, "All"),
vl.equal(vl.field("0"), countryFilter)
)
)
);
// create the plot
vl
.data(group_data)
.layer(plotLayer)
.select(countryFilter)
.render();
}
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();
{
const yearSelect = vl.selectMulti('Value', 'LOCATION').fields('TIME').init(2021).bind(vl.slider(1995, 2021, 1).name("Year"))
return vl.markBar()
.data(european_data)
.params(yearSelect)
.encode(
vl.x().fieldQ('Value').stack(null).title('Debt'),
vl.y().fieldN('LOCATION').sort('descending').title('Country')
)
.height(500)
.width(400)
.render()
}
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.
