incomeGroups = {
const groupedIncome = z.groupBy(x => x.IncomeGroup, migration_join)
let array = []
for (let keyName in Object.keys(groupedIncome)) {
let currKey = Object.keys(groupedIncome)[keyName]
console.log(currKey)
let currCountry = groupedIncome[currKey]
for (const key of Object.keys(currCountry)) {
if (!isNaN(currCountry[key]['2017']) && currKey != ''){
array.push({value: currCountry[key]['2017'], Country: currCountry[key]['Country Name'], IncomeLevel: currKey})
}
}
}
return array
}
viewof view_box_plot = embed({
title:{text:"Migration Change for Different Income Class",
offset: 20},
width: 400,
data: {values: incomeGroups},
mark: {
type: "boxplot",
extent: "min-max"
},
encoding: {
y: {field: "IncomeLevel",type: "nominal"},
x: {
field: "value",
type: "quantitative",
axis: {"title": "Migration Change"}
}
}
})
viewof view_strip_plot = embed({
title:{text:"Distribution of Migration Change for Different Income Class",
offset: 20},
width: 400,
data: {values: incomeGroups},
mark: "tick",
encoding: {
"x": {field: "value", type: "quantitative", sort: "acscending",
axis:{"title":"Migration in 2017"}}
}
})
viewof bivariate_distribution = embed({
data: {values: data_univariate},
vconcat: [{
mark: "bar",
height: 60,
encoding: {
x: {
"bin": true,
field: "IMDB_Rating",
type: "quantitative",
axis: null
},
y: {
aggregate: "count",
type: "quantitative",
scale: {
domain: [0,1000]
},
title: ""
}
}
}, {
spacing: 15,
bounds: "flush",
hconcat: [{
mark: "rect",
encoding: {
x: {
bin: true,
field: "IMDB_Rating",
type: "quantitative",
axis: {"title": "IMDB Rating (binned)"}
},
y: {
"bin": true,
field: "Rotten_Tomatoes_Rating",
type: "quantitative",
axis: {"title": "Rotten Tomatoes Rating (binned)"}
},
color: {
aggregate: "count",
type: "quantitative"
}
}
}, {
mark: "bar",
width: 60,
encoding: {
y: {
bin: true,
field: "Rotten_Tomatoes_Rating",
type: "quantitative",
axis: null
},
x: {
aggregate: "count",
type: "quantitative",
scale: {
domain: [0,1000]
},
title: ""
}
}
}]
}],
config: {
range: {
heatmap: {
scheme: "greenblue"
}
},
view: {
stroke: "transparent"
}
}
})
viewof view_multi_dist_plot = embed({
repeat: {
row: ["Horsepower", "Acceleration", "Miles_per_Gallon"],
column: ["Miles_per_Gallon", "Acceleration", "Horsepower"]
},
spec: {
data: {values: cars},
mark: "point",
selection: {
brush: {
type: "interval",
resolve: "union",
on: "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
translate: "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
zoom: "wheel![event.shiftKey]"
},
grid: {
type: "interval",
resolve: "global",
bind: "scales",
translate: "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
zoom: "wheel![!event.shiftKey]"
}
},
encoding: {
x: {field: {"repeat": "column"},type: "quantitative"},
y: {field: {"repeat": "row"},type: "quantitative"},
color: {
condition: {
selection: "brush",
field: "Origin",
type: "nominal"
},
value: "grey"
}
}
}
}
)
import {migration_join} from '@cesandoval/week-3-data-management-with-zebras'
data_univariate = d3.json('https://raw.githubusercontent.com/vega/vega-datasets/master/data/movies.json')
cars = d3.json("https://raw.githubusercontent.com/vega/vega/master/docs/data/cars.json")
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.
