Published
Edited
Mar 22, 2019
1 fork
embed = require("vega-embed@3")
dfjs = require('https://bundle.run/dataframe-js@1.3.2')
df1 = dfjs.DataFrame.fromCSV(
"https://gist.githubusercontent.com/kikikkkkz/2d9ee85c5e26abdd705aab56953c9098/raw/6d673f106e83a8f40e657cdae7e0565ae1f52e23/googleplaystore.csv")
df2 = dfjs.DataFrame.fromCSV(
"https://gist.githubusercontent.com/kikikkkkz/c249bc57551af4e706e172ffd529bb80/raw/f08cf4901e024e4ddc95fab0a6e2e9eb61c20079/AppleStore.csv")
appledata = df2.replace('Book','BOOKS_AND_REFERENCE + COMICS',"prime_genre").rename('prime_genre','Catagory',"prime_genre").toCollection()
VegaLite({
data: {values: appledata},
repeat: {column: ["user_rating","price","size_bytes","sup_devices_num","lang_num"]},
spec: {
width: 100,
height: 100,
layer: [
{
selection: {brush: {type: "interval", encodings: ["x"]}},
mark: "bar",
encoding: {
y: {aggregate: "count", type: "quantitative"},
x: {field: {repeat: "column"}, bin: "true", type: "quantitative"}
}
}, {
transform: [{filter: {selection: "brush"}}],
mark: "bar",
encoding: {
y: {aggregate: "count", type: "quantitative"},
x: { field: {repeat: "column"}, bin: "true", type: "quantitative"},
color: {value: "goldenrod"}
}
}]
}
})
VegaLite({
data: {values: appledata},
vconcat: [
{
//selection: {brush: {encodings: ["x"], type: "interval"}},// selection
selection: {click: {encodings: ["color"], type: "multi"}},//selection
transform: [{filter: {selection: "brush"}}],
mark: "bar",
encoding: {
color: {
condition: {
field: "user_rating",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
x: { field: "price", type: "quantitative"},
y: {aggregate: "count", type: "quantitative"},
//size: {field: "precipitation", type: "quantitative", scale: {domain: [1, 50]}},
},
width: 800,
height: 400,
},
{
//transform: [{filter: {selection: "brush"}}],
//selection: {click: {encodings: ["color"], type: "multi"}},//selection
selection: {brush: {encodings: ["x"], type: "interval"}},// selection
encoding: {
color: {
condition: {
field: "user_rating",
title: "rating",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
y: {aggregate: "count", type: "quantitative"},
x: {field: "user_rating", type: "nominal"}
},
width: 800,
mark: "bar",
}
]
})
embed({
"$schema": "https://vega.github.io/schema/vega/v5.json",
data: {values: appledata},
vconcat: [
{
selection: {click: {encodings: ["color"], type: "multi"}},//selection
transform: [{filter: {selection: "brush"}}],
mark: "bar",
encoding: {
color: {
condition: {
field: "user_rating",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
x: { field: "price", type: "quantitative"},
y: {aggregate: "count", type: "quantitative"},
},
width: 800,
height: 400,
},
{
selection: {brush: {encodings: ["x"], type: "interval"}},// selection
encoding: {
color: {
condition: {
field: "user_rating",
title: "rating",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
y: {aggregate: "count", type: "quantitative"},
x: {field: "user_rating", type: "nominal"}
},
width: 800,
mark: "bar",
}
]
})
embed({
"$schema": "https://vega.github.io/schema/vega/v5.json",
"autosize": "pad",//{"type": "fit", "resize": true},
"padding": 5,
"width": 800,
// "user_rating","price","size_bytes","sup_devices_num","lang_num"
"signals": [
{ "name": "xField", "value": "price",
"bind": {"input": "select", "options": ["price", "size_bytes", "sup_devices_num", "lang_num"]} },
{ "name": "nullSize", "value": 4 },
{ "name": "nullGap", "update": "nullSize + 10" },
{"name": "concat_0_height", "value": 400},
{"name": "concat_1_height", "value": 200},
{"name": "unit",
"value": {},
"on": [
{"events": "mousemove", "update": "isTuple(group()) ? group() : unit"}
]},
{"name": "click", "update": "vlSelectionResolve(\"click_store\")"},
{"name": "brush", "update": "vlSelectionResolve(\"brush_store\")"}
],
"data": [
{"name": "click_store"},
{"name": "brush_store"},
{
"name": "source_0",
"url": "https://gist.githubusercontent.com/kikikkkkz/c249bc57551af4e706e172ffd529bb80/raw/f08cf4901e024e4ddc95fab0a6e2e9eb61c20079/AppleStore.csv",
"format": {"type": "csv"}
},
{
"name": "data_0",
"source": "source_0",
"transform": [
{
"type": "filter",
"expr": "!(length(data(\"brush_store\"))) || (vlSelectionTest(\"brush_store\", datum))"
},
{
"type": "aggregate",
"groupby": ["user_rating", {"signal": "xField"}],
"ops": ["count"],
"fields": [null],
"as": ["__count"]
},
{
"type": "stack",
"groupby": [{"signal": "xField"}],
"field": "__count",
"sort": {"field": ["user_rating"], "order": ["descending"]},
"as": ["__count_start", "__count_end"],
"offset": "zero"
}
]
},
{
"name": "data_1",
"source": "source_0",
"transform": [
{
"type": "aggregate",
"groupby": ["user_rating"],
"ops": ["count"],
"fields": [null],
"as": ["__count"]
}
]
}
],
"layout": {"padding": 20, "columns": 1, "bounds": "full", "align": "each"},
"marks": [
{
"type": "group",
"name": "concat_0_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "width"},
"height": {"signal": "concat_0_height"}
}
},
"signals": [
{
"name": "click_tuple",
"on": [
{
"events": [{"source": "scope", "type": "click"}],
"update": "datum && item().mark.marktype !== 'group' ? {unit: \"concat_0\", fields: click_tuple_fields, values: [(item().isVoronoi ? datum.datum : datum)[\"user_rating\"]]} : null",
"force": true
}
]
},
{
"name": "click_tuple_fields",
"value": [{"field": "user_rating", "channel": "color", "type": "E"}]
},
{
"name": "click_toggle",
"value": false,
"on": [
{
"events": [{"source": "scope", "type": "click"}],
"update": "event.shiftKey"
}
]
},
{
"name": "click_modify",
"update": "modify(\"click_store\", click_toggle ? null : click_tuple, click_toggle ? null : true, click_toggle ? click_tuple : null)"
}
],
"marks": [
{
"name": "concat_0_marks",
"type": "rect",
"style": ["bar"],
"from": {"data": "data_0"},
"encode": {
"update": {
"fill": [
{
//{"signal": "xField"}
//datum[xField]
"test": "datum[xField] === null || isNaN(datum[xField]) || datum[\"__count\"] === null || isNaN(datum[\"__count\"])",
//"test": "datum[\"size_bytes\"] === null || isNaN(datum[\"size_bytes\"]) || datum[\"__count\"] //=== null || isNaN(datum[\"__count\"])",
"value": null
},
{
"test": "!(length(data(\"click_store\"))) || (vlSelectionTest(\"click_store\", datum))",
"scale": "color",
"field": "user_rating"
},
{"value": "lightgray"}
],
"tooltip": {
"signal": "{\"user_rating\": ''+datum[\"user_rating\"], \"xField\": format(datum[xField], \"\"), \"Count of Records\": format(datum[\"__count\"], \"\")}"
},
"xc": [
{
"test": "datum[xField] === null || isNaN(datum[xField])",
//"test": "datum[\"size_bytes\"] === null || isNaN(datum[\"size_bytes\"])",
"value": 0
},
{"scale": "concat_0_x", "field": {"signal": "xField"}}
],
"width": {"value": 5},
"y": {"scale": "concat_0_y", "field": "__count_end"},
"y2": {"scale": "concat_0_y", "field": "__count_start"}
}
}
}
],
"axes": [
{
"scale": "concat_0_x",
"orient": "bottom",
"grid": false,
"title": {"signal": "xField"},
"labelFlush": true,
"labelOverlap": true,
"tickCount": {"signal": "ceil(width/40)"},
"zindex": 1
},
{
"scale": "concat_0_x",
"orient": "bottom",
"gridScale": "concat_0_y",
"grid": true,
"tickCount": {"signal": "ceil(width/40)"},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_0_y",
"orient": "left",
"grid": false,
"title": "Count of Records",
"labelOverlap": true,
"tickCount": {"signal": "ceil(concat_0_height/40)"},
"zindex": 1
},
{
"scale": "concat_0_y",
"orient": "left",
"gridScale": "concat_0_x",
"grid": true,
"tickCount": {"signal": "ceil(concat_0_height/40)"},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
}
]
},
{
"type": "group",
"name": "concat_1_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "width"},
"height": {"signal": "concat_1_height"}
}
},
"signals": [
{
"name": "brush_x",
"value": [],
"on": [
{
"events": {
"source": "scope",
"type": "mousedown",
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\""
]
},
"update": "[x(unit), x(unit)]"
},
{
"events": {
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{
"source": "scope",
"type": "mousedown",
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\""
]
},
{"source": "window", "type": "mouseup"}
]
},
"update": "[brush_x[0], clamp(x(unit), 0, width)]"
},
{"events": {"signal": "brush_scale_trigger"}, "update": "[0, 0]"},
{
"events": {"signal": "brush_translate_delta"},
"update": "clampRange(panLinear(brush_translate_anchor.extent_x, brush_translate_delta.x / span(brush_translate_anchor.extent_x)), 0, width)"
},
{
"events": {"signal": "brush_zoom_delta"},
"update": "clampRange(zoomLinear(brush_x, brush_zoom_anchor.x, brush_zoom_delta), 0, width)"
}
]
},
{
"name": "brush_user_rating",
"on": [
{
"events": {"signal": "brush_x"},
"update": "brush_x[0] === brush_x[1] ? null : invert(\"concat_1_x\", brush_x)"
}
]
},
{
"name": "brush_scale_trigger",
"update": "(!isArray(brush_user_rating) || (invert(\"concat_1_x\", brush_x)[0] === brush_user_rating[0] && invert(\"concat_1_x\", brush_x)[1] === brush_user_rating[1])) ? brush_scale_trigger : {}"
},
{
"name": "brush_tuple",
"on": [
{
"events": [{"signal": "brush_user_rating"}],
"update": "brush_user_rating ? {unit: \"concat_1\", fields: brush_tuple_fields, values: [brush_user_rating]} : null"
}
]
},
{
"name": "brush_tuple_fields",
"value": [{"field": "user_rating", "channel": "x", "type": "E"}]
},
{
"name": "brush_translate_anchor",
"value": {},
"on": [
{
"events": [
{
"source": "scope",
"type": "mousedown",
"markname": "brush_brush"
}
],
"update": "{x: x(unit), y: y(unit), extent_x: slice(brush_x)}"
}
]
},
{
"name": "brush_translate_delta",
"value": {},
"on": [
{
"events": [
{
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{
"source": "scope",
"type": "mousedown",
"markname": "brush_brush"
},
{"source": "window", "type": "mouseup"}
]
}
],
"update": "{x: brush_translate_anchor.x - x(unit), y: brush_translate_anchor.y - y(unit)}"
}
]
},
{
"name": "brush_zoom_anchor",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "brush_brush"
}
],
"update": "{x: x(unit), y: y(unit)}"
}
]
},
{
"name": "brush_zoom_delta",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "brush_brush"
}
],
"force": true,
"update": "pow(1.001, event.deltaY * pow(16, event.deltaMode))"
}
]
},
{
"name": "brush_modify",
"update": "modify(\"brush_store\", brush_tuple, true)"
}
],
"marks": [
{
"name": "brush_brush_bg",
"type": "rect",
"clip": true,
"encode": {
"enter": {
"fill": {"value": "#333"},
"fillOpacity": {"value": 0.125}
},
"update": {
"x": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[0]"
},
{"value": 0}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"value": 0
},
{"value": 0}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[1]"
},
{"value": 0}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"field": {"group": "height"}
},
{"value": 0}
]
}
}
},
{
"name": "concat_1_marks",
"type": "rect",
"style": ["bar"],
"from": {"data": "data_1"},
"encode": {
"update": {
"fill": [
{
"test": "datum[\"__count\"] === null || isNaN(datum[\"__count\"])",
"value": null
},
{
"test": "!(length(data(\"click_store\"))) || (vlSelectionTest(\"click_store\", datum))",
"scale": "color",
"field": "user_rating"
},
{"value": "lightgray"}
],
"tooltip": {
"signal": "{\"rating\": ''+datum[\"user_rating\"], \"Count of Records\": format(datum[\"__count\"], \"\"), \"user_rating\": ''+datum[\"user_rating\"]}"
},
"x": {"scale": "concat_1_x", "field": "user_rating"},
"width": {"scale": "concat_1_x", "band": true},
"y": {"scale": "concat_1_y", "field": "__count"},
"y2": {"scale": "concat_1_y", "value": 0}
}
}
},
{
"name": "brush_brush",
"type": "rect",
"clip": true,
"encode": {
"enter": {"fill": {"value": "transparent"}},
"update": {
"x": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[0]"
},
{"value": 0}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"value": 0
},
{"value": 0}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[1]"
},
{"value": 0}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"field": {"group": "height"}
},
{"value": 0}
],
"stroke": [
{"test": "brush_x[0] !== brush_x[1]", "value": "white"},
{"value": null}
]
}
}
}
],
"axes": [
{
"scale": "concat_1_x",
"orient": "bottom",
"grid": false,
"title": "user_rating",
"labelAlign": "right",
"labelAngle": 270,
"labelBaseline": "middle",
"zindex": 1
},
{
"scale": "concat_1_y",
"orient": "left",
"grid": false,
"title": "Count of Records",
"labelOverlap": true,
"tickCount": {"signal": "ceil(concat_1_height/40)"},
"zindex": 1
},
{
"scale": "concat_1_y",
"orient": "left",
"gridScale": "concat_1_x",
"grid": true,
"tickCount": {"signal": "ceil(concat_1_height/40)"},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {
"fields": [
// "field": {"signal": "xField"}
// "field": "user_rating"
{"data": "data_0", "field": "user_rating"},
{"data": "data_1", "field": "user_rating"}
],
"sort": true
},
"range": "category",
"interpolate": "hcl"
},
{
"name": "concat_0_x",
"type": "linear",
"domain": {"data": "data_0", "field": {"signal": "xField"} },
"range": [0, {"signal": "width"}],
"nice": true,
"zero": false,
"padding": 5,
"bin":true
},
{
"name": "concat_0_y",
"type": "linear",
"domain": {"data": "data_0", "fields": ["__count_start", "__count_end"]},
"range": [{"signal": "concat_0_height"}, 0],
"nice": true,
"zero": true
},
{
"name": "concat_1_x",
"type": "band",
"domain": {"data": "data_1", "field": "user_rating", "sort": true},
"range": [0, {"signal": "width"}],
"paddingInner": 0.1,
"paddingOuter": 0.05,
"bin":true
},
{
"name": "concat_1_y",
"type": "linear",
"domain": {"data": "data_1", "field": "__count"},
"range": [{"signal": "concat_1_height"}, 0],
"nice": true,
"zero": true
}
],
"legends": [
{
"title": "rating",
"fill": "color",
"gradientLength": {"signal": "clamp(concat_0_height, 64, 200)"},
"encode": {"symbols": {"update": {"shape": {"value": "square"}}}}
}
]
})
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.
