Published
Edited
Mar 6, 2019
d3 = require("d3-fetch@1")
vegalite = require("@observablehq/vega-lite@0.1")
/* declarative programming */
z = require('https://bundle.run/zebras@0.0.11')
myData = [ {"data": 5}, {"data": 3}, {"data": 8}, {"data": 1} ]
// each obj in vegalite is a Javascript specification
vegalite(
{
data: {
values: myData
},
mark: "tick",
encoding: {
x: {
field: "data",
type: "quantitative"
},
y: {
field: "data",
type: "quantitative"
}
}
}
)
aruba = [
{time: "1962-01-01", value: -4323},
{time: "1967-01-01", value: -4275},
{time: "1972-01-01", value: -3537},
{time: "1977-01-01", value: -5470},
{time: "1982-01-01", value: -1921},
{time: "1987-01-01", value: -5194},
{time: "1992-01-01", value: 14218},
{time: "1997-01-01", value: 6926},
{time: "2002-01-01", value: 6263},
{time: "2007-01-01", value: -441},
{time: "2012-01-01", value: 1253},
{time: "2017-01-01", value: 1004},
]
vegalite({
data: {values: aruba},
mark: "point",
encoding: {
x: {field: "time", type: "temporal"}, //vegalite is especially helpful for parsing type: "temporal"
y: {field: "value", type: "quantitative"}
}
}
)
vegalite({
data: {values: aruba},
mark: "point",
encoding: {
x: {field: "value", type: "quantitative"}
}
})
vegalite({
data: {values: aruba},
mark: "point",
encoding: {
//vegalite is especially helpful for parsing type: "temporal"--can group to year, month, etc
x: {timeUnit: "year", field: "time", type: "temporal"}, // identify the x field, in our case is year;
y: {field: "value", type: "quantitative"} // identify the y field, in our case is the migration amount for that year;
}
})
vegalite({
data: {values: aruba},
mark: "line", //try "bar" !
encoding: {
x: {timeUnit: "year", field: "time", type: "temporal"},
y: {field: "value", type: "quantitative"},
}
})
import {migrationParsed} from "@cesandoval/week-3-data-management-with-zebras"
descending_2017 = z.sortByCol('2017', 'des', migrationParsed)
top10_2017 = descending_2017.slice(0,10)
vegalite({
data: {values: top10_2017},
mark: "bar",
encoding: {
x: {bin: false, field: "Country Name", type: "nominal"},
y: {field: "2017", type: "quantitative"}
}
})
vegalite({
data: {values: top10_2017},
mark: "bar",
encoding: {
x: {bin: false, field: "Country Name", type: "nominal", sort:'*'},
y: {field: "2017", type: "quantitative"}
}
})
vegalite({
data: {values: z.sortByCol("2017", "des", migrationParsed).slice(0,20)},
mark: 'bar',
encoding: {
y: {field: "2017", type: "quantitative"},
x: {field: "Country Name", type: "ordinal", sort: "*"}
}
})
australia = {
let australia = []
for (const key of Object.keys(descending_2017[0])) {
if (!isNaN(descending_2017[0][key])){
australia.push({year: key, value: descending_2017[0][key]})
}
}
return australia
}
vegalite({
data: {values: australia},
mark: "point",
encoding: {
x: {timeUnit: "year", field: "year", type: "temporal"},
y: {field: "value", type: "quantitative"}
}
})
vegalite({
title: "Migration Change of Aruba", // insert our title;
data: {values: aruba},
mark: "line",
encoding: {
x: {timeUnit: "year", field: "time", type: "temporal"},
y: {field: "value", type: "quantitative"}
}
})
vegalite({
title: "Migration Change of Aruba",
data: {values: aruba},
mark: "line",
encoding: {
x: {timeUnit: "year", field: "time", type: "temporal",
"axis": {"title": "Year (from 1962 to 2017)",
"offset": 10}}, // this allows us to change the property of axis
y: {field: "value", type: "quantitative",
"axis": {"title": "Number of People",
"offset": 10}} // this allows us to change the property of axis
}
})
top3 = {
let array = []
for (let i in descending_2017.slice(0,3)) {
let currCountry = descending_2017.slice(0,3)[i]
for (const key of Object.keys(currCountry)) {
console.log(currCountry)
if (!isNaN(currCountry[key])){
array.push({year: key, value: currCountry[key], Country: currCountry['Country Name']})
}
}
}
return array
}
vegalite({
title: {
text : "Top 3 Countries with Largest Migration"
},
data: {values: top3},
mark: "line",
encoding: {
x: {
timeUnit: "year",
field: "year",
type: "temporal",
axis: {"title": "Time(year)"}
},
"y": {
field: "value",
type: "quantitative",
axis: {"title": "Migration"}
},
"row": {
field: "Country",
type: "nominal"} // try to modify the "row" argument as "column" and see what's happening?
}
})
vegalite({
title: "Top 10 Migration Countries",
data: {values: top10_2017},
mark: "bar",
encoding: {
x: {bin: false, field: "Country Name", type: "nominal", sort:"*"},// sort argument allows you to reorganize the chart.
y: {field: "2017", type: "quantitative"},
color: {field: "Country Name", type: "nominal"}
}
})
embed = require("vega-embed@3")
viewof view = embed({
title: "Top 10 Migration Countries",
data: {values: top10_2017},
mark: "bar",
encoding: {
x: {bin: false, field: "Country Name", type: "nominal", sort:"*"},// sort argument allows you to reorganize the chart.
y: {field: "2017", type: "quantitative"},
color: {field: "Country Name", type: "nominal"}
}
})
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.
