embed({
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"repeat": {
"column": ["NA_Sales", "EU_Sales","JP_Sales"],
"row": ["Global_Sales"]
},
"spec": {
"data": {"url": "https://gist.githubusercontent.com/bpricop/1f0d546766c5ea43e9f2add38c94d2d2/raw/290e312c0a1fb42d168c348526285b84e02a2136/all_aggregated%2520videogame%2520and%2520internet%2520dataset.csv"},
"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",
"axis": {"minExtent": 30}
},
"color": {
"condition": {
"selection": "brush",
"field": "Genre",
"type": "nominal"
},
"value": "grey"
}
}
}
}
)
vegalite({
data: {
"url": "https://gist.githubusercontent.com/bpricop/eb957963b5499141dc27175445284c8d/raw/471a45f2a8ebeb9e783a026b23a66a0c3d3328df/all_aggregated_tidy%2520FINAL.csv"},
vconcat: [
{
mark: "area",
width: 480,
encoding: {
x: {
field: "Year_of_Release",
type: "temporal",
scale: {domain: {selection: "brush"}},
axis: {title: "Year of Release"}
},
y: { aggregate: "sum",field: "Sales", type: "quantitative"}}
}, {
height: 60,
width: 480,
mark: "area",
selection: {
brush: {type: "interval", encodings: ["x"]}
},
encoding: {
x: {
field: "Year_of_Release",
type: "temporal",
},
y: {
aggregate: "sum",field: "Sales", type: "quantitative",
axis: {tickCount: 2, gride: false}
}
}
}]
})
vegalite({
data: {url:"https://gist.githubusercontent.com/bpricop/eb957963b5499141dc27175445284c8d/raw/471a45f2a8ebeb9e783a026b23a66a0c3d3328df/all_aggregated_tidy%2520FINAL.csv"},
vconcat: [
{
mark: "point",
encoding: {
// "x": {"field": {"repeat": "column"}, "type": "quantitative"},
x: {timeUnit: "year", field: "Year_of_Release", type: "temporal"},
y: {field: "Internet Usage", type: "quantitative"},
color: {
condition: {
field: "Genre",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
size: {field: "Internet Usage", type: "quantitative", scale: {domain: [1, 50]}},
},
"transform": [
{"filter": {"field": "Region", "oneOf": ["EU"]}}
],
width: 350,
height: 250,
selection: {brush: {encodings: ["x"], type: "interval"}}
},
{
mark: "point",
encoding: {
// "x": {"field": {"repeat": "column"}, "type": "quantitative"},
x: {timeUnit: "year", field: "Year_of_Release", type: "temporal"},
y: {field: "Internet Usage", type: "quantitative"},
color: {
condition: {
field: "Genre",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
size: {field: "Internet Usage", type: "quantitative", scale: {domain: [1, 50]}},
},
"transform": [
{"filter": {"field": "Region", "oneOf": ["JP"]}}
],
width: 350,
height: 250,
selection: {brush: {encodings: ["x"], type: "interval"}}
},
{
mark: "point",
encoding: {
// "x": {"field": {"repeat": "column"}, "type": "quantitative"},
x: {timeUnit: "year", field: "Year_of_Release", type: "temporal"},
y: {field: "Internet Usage", type: "quantitative"},
color: {
condition: {
field: "Genre",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
size: {field: "Internet Usage", type: "quantitative", scale: {domain: [1, 50]}},
},
"transform": [
{"filter": {"field": "Region", "oneOf": ["NA"]}}
],
width: 350,
height: 250,
selection: {brush: {encodings: ["x"], type: "interval"}}
},
{
mark: "point",
encoding: {
// "x": {"field": {"repeat": "column"}, "type": "quantitative"},
x: {timeUnit: "year", field: "Year_of_Release", type: "temporal"},
y: {field: "Internet Usage", type: "quantitative"},
color: {
condition: {
field: "Genre",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
size: {field: "Internet Usage", type: "quantitative", scale: {domain: [1, 50]}},
},
"transform": [
{"filter": {"field": "Region", "oneOf": ["NA"]}}
],
width: 350,
height: 250,
selection: {brush: {encodings: ["x"], type: "interval"}}
},
{
encoding: {
color: {
condition: {
field: "Genre",
title: "Genre",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
x: {aggregate: "count", type: "quantitative"},
y: {field: "Genre", type: "nominal"}
},
width: 800,
mark: "bar",
selection: {click: {encodings: ["color"], type: "multi"}},
transform: [{filter: {selection: "brush"}}]
},
{
encoding: {
color: {
condition: {
field: "Region",
title: "Region",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
x: {aggregate: "count", type: "quantitative"},
y: {field: "Region", type: "nominal"}
},
width: 800,
mark: "bar",
selection: {click: {encodings: ["color"], type: "multi"}},
transform: [{filter: {selection: "brush"}}]
}
]
})
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.
