The avatar for @kentarotakahira
cocomil
Data Scientist based on Tokyo. Here I'm experimenting and exploring interesting dataset and viz tools.
Published
Edited
May 10, 2022
Fork of Blog4
Insert cell
# Blog
Insert cell
embed = require("vega-embed@6")
Insert cell
Insert cell
viewof view2 = embed({
$schema: "https://vega.github.io/schema/vega/v5.json",
background: "white",
padding: 5,
width: 600,
height: 250,
title: { text: "Bump Chart for Stock Prices", frame: "group" },
style: "cell",
data: [
{
name: "data-82d7765032af062f0a969bce3fb9d0f7",
values: [
{ date: "2000-01-31T00:00:00", symbol: "AAPL", price: 25.94 },
{ date: "2000-01-31T00:00:00", symbol: "AMZN", price: 64.56 },
{ date: "2000-01-31T00:00:00", symbol: "IBM", price: 100.52 },
{ date: "2000-01-31T00:00:00", symbol: "MSFT", price: 39.81 },
{
date: "2000-07-31T00:00:00",
symbol: "AAPL",
price: 27.703333333333333
},
{
date: "2000-07-31T00:00:00",
symbol: "AMZN",
price: 50.96666666666667
},
{ date: "2000-07-31T00:00:00", symbol: "IBM", price: 98.925 },
{
date: "2000-07-31T00:00:00",
symbol: "MSFT",
price: 32.38833333333333
},
{
date: "2001-01-31T00:00:00",
symbol: "AAPL",
price: 13.271666666666668
},
{ date: "2001-01-31T00:00:00", symbol: "AMZN", price: 29.02 },
{
date: "2001-01-31T00:00:00",
symbol: "IBM",
price: 94.94333333333333
},
{
date: "2001-01-31T00:00:00",
symbol: "MSFT",
price: 24.463333333333335
},
{
date: "2001-07-31T00:00:00",
symbol: "AAPL",
price: 10.648333333333333
},
{ date: "2001-07-31T00:00:00", symbol: "AMZN", price: 13.255 },
{
date: "2001-07-31T00:00:00",
symbol: "IBM",
price: 96.39166666666667
},
{
date: "2001-07-31T00:00:00",
symbol: "MSFT",
price: 26.430000000000003
},
{
date: "2002-01-31T00:00:00",
symbol: "AAPL",
price: 9.961666666666666
},
{
date: "2002-01-31T00:00:00",
symbol: "AMZN",
price: 9.703333333333333
},
{
date: "2002-01-31T00:00:00",
symbol: "IBM",
price: 97.00833333333333
},
{
date: "2002-01-31T00:00:00",
symbol: "MSFT",
price: 24.445000000000004
},
{ date: "2002-07-31T00:00:00", symbol: "AAPL", price: 10.495 },
{
date: "2002-07-31T00:00:00",
symbol: "AMZN",
price: 15.670000000000002
},
{
date: "2002-07-31T00:00:00",
symbol: "IBM",
price: 76.82166666666667
},
{
date: "2002-07-31T00:00:00",
symbol: "MSFT",
price: 22.000000000000004
},
{
date: "2003-01-31T00:00:00",
symbol: "AAPL",
price: 7.458333333333332
},
{
date: "2003-01-31T00:00:00",
symbol: "AMZN",
price: 19.05333333333333
},
{
date: "2003-01-31T00:00:00",
symbol: "IBM",
price: 69.04166666666667
},
{
date: "2003-01-31T00:00:00",
symbol: "MSFT",
price: 20.551666666666666
},
{
date: "2003-07-31T00:00:00",
symbol: "AAPL",
price: 8.456666666666667
},
{
date: "2003-07-31T00:00:00",
symbol: "AMZN",
price: 31.763333333333332
},
{
date: "2003-07-31T00:00:00",
symbol: "IBM",
price: 75.05833333333334
},
{ date: "2003-07-31T00:00:00", symbol: "MSFT", price: 20.425 },
{
date: "2004-01-31T00:00:00",
symbol: "AAPL",
price: 10.921666666666667
},
{
date: "2004-01-31T00:00:00",
symbol: "AMZN",
price: 51.028333333333336
},
{
date: "2004-01-31T00:00:00",
symbol: "IBM",
price: 82.86333333333333
},
{
date: "2004-01-31T00:00:00",
symbol: "MSFT",
price: 22.00666666666667
},
{ date: "2004-07-31T00:00:00", symbol: "AAPL", price: 14.14 },
{ date: "2004-07-31T00:00:00", symbol: "AMZN", price: 45.285 },
{
date: "2004-07-31T00:00:00",
symbol: "IBM",
price: 82.85333333333334
},
{ date: "2004-07-31T00:00:00", symbol: "MSFT", price: 22.005 },
{
date: "2005-01-31T00:00:00",
symbol: "AAPL",
price: 27.834999999999997
},
{
date: "2005-01-31T00:00:00",
symbol: "AMZN",
price: 40.053333333333335
},
{ date: "2005-01-31T00:00:00", symbol: "GOOG", price: 165.5 },
{ date: "2005-01-31T00:00:00", symbol: "IBM", price: 84.14 },
{ date: "2005-01-31T00:00:00", symbol: "MSFT", price: 23.58 },
{
date: "2005-07-31T00:00:00",
symbol: "AAPL",
price: 40.30166666666667
},
{
date: "2005-07-31T00:00:00",
symbol: "AMZN",
price: 35.92666666666667
},
{ date: "2005-07-31T00:00:00", symbol: "GOOG", price: 241.28 },
{
date: "2005-07-31T00:00:00",
symbol: "IBM",
price: 76.30833333333334
},
{
date: "2005-07-31T00:00:00",
symbol: "MSFT",
price: 23.176666666666666
},
{
date: "2006-01-31T00:00:00",
symbol: "AAPL",
price: 62.218333333333334
},
{ date: "2006-01-31T00:00:00", symbol: "AMZN", price: 44.715 },
{
date: "2006-01-31T00:00:00",
symbol: "GOOG",
price: 371.1716666666666
},
{
date: "2006-01-31T00:00:00",
symbol: "IBM",
price: 76.93666666666667
},
{
date: "2006-01-31T00:00:00",
symbol: "MSFT",
price: 24.853333333333335
},
{
date: "2006-07-31T00:00:00",
symbol: "AAPL",
price: 64.43333333333332
},
{
date: "2006-07-31T00:00:00",
symbol: "AMZN",
price: 34.89333333333334
},
{ date: "2006-07-31T00:00:00", symbol: "GOOG", price: 391.385 },
{
date: "2006-07-31T00:00:00",
symbol: "IBM",
price: 74.86666666666666
},
{
date: "2006-07-31T00:00:00",
symbol: "MSFT",
price: 23.066666666666666
},
{
date: "2007-01-31T00:00:00",
symbol: "AAPL",
price: 81.35666666666667
},
{
date: "2007-01-31T00:00:00",
symbol: "AMZN",
price: 36.41833333333333
},
{
date: "2007-01-31T00:00:00",
symbol: "GOOG",
price: 450.60166666666663
},
{
date: "2007-01-31T00:00:00",
symbol: "IBM",
price: 85.55166666666666
},
{
date: "2007-01-31T00:00:00",
symbol: "MSFT",
price: 26.938333333333333
},
{
date: "2007-07-31T00:00:00",
symbol: "AAPL",
price: 108.71833333333332
},
{
date: "2007-07-31T00:00:00",
symbol: "AMZN",
price: 59.39166666666666
},
{
date: "2007-07-31T00:00:00",
symbol: "GOOG",
price: 484.9333333333334
},
{
date: "2007-07-31T00:00:00",
symbol: "IBM",
price: 96.96500000000002
},
{ date: "2007-07-31T00:00:00", symbol: "MSFT", price: 27.64 },
{
date: "2008-01-31T00:00:00",
symbol: "AAPL",
price: 166.26000000000002
},
{ date: "2008-01-31T00:00:00", symbol: "AMZN", price: 87.185 },
{
date: "2008-01-31T00:00:00",
symbol: "GOOG",
price: 623.0500000000001
},
{
date: "2008-01-31T00:00:00",
symbol: "IBM",
price: 107.08166666666666
},
{
date: "2008-01-31T00:00:00",
symbol: "MSFT",
price: 31.271666666666665
},
{
date: "2008-07-31T00:00:00",
symbol: "AAPL",
price: 159.6016666666667
},
{
date: "2008-07-31T00:00:00",
symbol: "AMZN",
price: 74.28166666666665
},
{
date: "2008-07-31T00:00:00",
symbol: "GOOG",
price: 511.98499999999996
},
{
date: "2008-07-31T00:00:00",
symbol: "IBM",
price: 116.70333333333333
},
{ date: "2008-07-31T00:00:00", symbol: "MSFT", price: 26.515 },
{
date: "2009-01-31T00:00:00",
symbol: "AAPL",
price: 109.82166666666666
},
{
date: "2009-01-31T00:00:00",
symbol: "AMZN",
price: 60.60166666666666
},
{
date: "2009-01-31T00:00:00",
symbol: "GOOG",
price: 360.38500000000005
},
{
date: "2009-01-31T00:00:00",
symbol: "IBM",
price: 95.53166666666668
},
{ date: "2009-01-31T00:00:00", symbol: "MSFT", price: 21.485 },
{
date: "2009-07-31T00:00:00",
symbol: "AAPL",
price: 126.98166666666667
},
{
date: "2009-07-31T00:00:00",
symbol: "AMZN",
price: 77.69333333333333
},
{
date: "2009-07-31T00:00:00",
symbol: "GOOG",
price: 393.9816666666666
},
{
date: "2009-07-31T00:00:00",
symbol: "IBM",
price: 101.81666666666666
},
{
date: "2009-07-31T00:00:00",
symbol: "MSFT",
price: 20.138333333333335
},
{
date: "2010-01-31T00:00:00",
symbol: "AAPL",
price: 190.79333333333332
},
{
date: "2010-01-31T00:00:00",
symbol: "AMZN",
price: 114.86666666666666
},
{ date: "2010-01-31T00:00:00", symbol: "GOOG", price: 537.76 },
{
date: "2010-01-31T00:00:00",
symbol: "IBM",
price: 122.17500000000001
},
{ date: "2010-01-31T00:00:00", symbol: "MSFT", price: 27.51 },
{ date: "2010-07-31T00:00:00", symbol: "AAPL", price: 213.82 },
{ date: "2010-07-31T00:00:00", symbol: "AMZN", price: 123.61 },
{ date: "2010-07-31T00:00:00", symbol: "GOOG", price: 543.495 },
{
date: "2010-07-31T00:00:00",
symbol: "IBM",
price: 126.35499999999999
},
{ date: "2010-07-31T00:00:00", symbol: "MSFT", price: 28.735 }
]
},
{
name: "data_0",
source: "data-82d7765032af062f0a969bce3fb9d0f7",
transform: [
{ type: "formula", expr: 'toDate(datum["date"])', as: "date" },
{
type: "window",
params: [null],
as: ["rank"],
ops: ["rank"],
fields: [""],
sort: { field: ["price"], order: ["descending"] },
groupby: ["date"]
},
{
field: "date",
type: "timeunit",
units: ["year", "month"],
as: ["yearmonth_date", "yearmonth_date_end"]
}
]
}
],
marks: [
{
name: "layer_0_layer_0_pathgroup",
type: "group",
from: {
facet: {
name: "faceted_path_layer_0_layer_0_main",
data: "data_0",
groupby: ["symbol"]
}
},
encode: {
update: {
width: { field: { group: "width" } },
height: { field: { group: "height" } }
}
},
marks: [
{
name: "layer_0_layer_0_marks",
type: "line",
style: ["line"],
sort: { field: 'datum["yearmonth_date"]' },
from: { data: "faceted_path_layer_0_layer_0_main" },
encode: {
update: {
stroke: { scale: "color", field: "symbol" },
description: {
signal:
'"symbol: " + (isValid(datum["symbol"]) ? datum["symbol"] : ""+datum["symbol"]) + "; date: " + (timeFormat(datum["yearmonth_date"], timeUnitSpecifier(["year","month"], {"year-month":"%b %Y ","year-month-date":"%b %d, %Y "}))) + "; rank: " + (isValid(datum["rank"]) ? datum["rank"] : ""+datum["rank"])'
},
x: { scale: "x", field: "yearmonth_date" },
y: { scale: "layer_0_y", field: "rank" }
}
}
}
]
},
{
name: "layer_0_layer_1_marks",
type: "symbol",
style: ["point"],
from: { data: "data_0" },
encode: {
update: {
opacity: { value: 1 },
fill: { scale: "color", field: "symbol" },
ariaRoleDescription: { value: "point" },
description: {
signal:
'"symbol: " + (isValid(datum["symbol"]) ? datum["symbol"] : ""+datum["symbol"]) + "; date: " + (timeFormat(datum["yearmonth_date"], timeUnitSpecifier(["year","month"], {"year-month":"%b %Y ","year-month-date":"%b %d, %Y "}))) + "; rank: " + (isValid(datum["rank"]) ? datum["rank"] : ""+datum["rank"])'
},
x: { scale: "x", field: "yearmonth_date" },
y: { scale: "layer_0_y", field: "rank" }
}
}
},
{
name: "layer_1_layer_0_pathgroup",
type: "group",
from: {
facet: {
name: "faceted_path_layer_1_layer_0_main",
data: "data_0",
groupby: ["symbol"]
}
},
encode: {
update: {
width: { field: { group: "width" } },
height: { field: { group: "height" } }
}
},
marks: [
{
name: "layer_1_layer_0_marks",
type: "line",
style: ["line"],
sort: { field: 'datum["yearmonth_date"]' },
from: { data: "faceted_path_layer_1_layer_0_main" },
encode: {
update: {
stroke: { scale: "color", field: "symbol" },
description: {
signal:
'"symbol: " + (isValid(datum["symbol"]) ? datum["symbol"] : ""+datum["symbol"]) + "; date: " + (timeFormat(datum["yearmonth_date"], timeUnitSpecifier(["year","month"], {"year-month":"%b %Y ","year-month-date":"%b %d, %Y "}))) + "; rank: " + (isValid(datum["rank"]) ? datum["rank"] : ""+datum["rank"])'
},
x: { scale: "x", field: "yearmonth_date" },
y: { scale: "layer_1_y", field: "rank" }
}
}
}
]
},
{
name: "layer_1_layer_1_marks",
type: "symbol",
style: ["point"],
from: { data: "data_0" },
encode: {
update: {
opacity: { value: 1 },
fill: { scale: "color", field: "symbol" },
ariaRoleDescription: { value: "point" },
description: {
signal:
'"symbol: " + (isValid(datum["symbol"]) ? datum["symbol"] : ""+datum["symbol"]) + "; date: " + (timeFormat(datum["yearmonth_date"], timeUnitSpecifier(["year","month"], {"year-month":"%b %Y ","year-month-date":"%b %d, %Y "}))) + "; rank: " + (isValid(datum["rank"]) ? datum["rank"] : ""+datum["rank"])'
},
x: { scale: "x", field: "yearmonth_date" },
y: { scale: "layer_1_y", field: "rank" }
}
}
}
],
scales: [
{
name: "x",
type: "point",
domain: { data: "data_0", field: "yearmonth_date", sort: true },
range: [0, { signal: "width" }],
padding: 0.5
},
{
name: "color",
type: "ordinal",
domain: { data: "data_0", field: "symbol", sort: true },
range: "category"
},
{
name: "layer_0_y",
type: "point",
domain: { data: "data_0", field: "rank", sort: true },
range: [0, { signal: "height" }],
padding: 0.5
},
{
name: "layer_1_y",
type: "point",
domain: { data: "data_0", field: "rank", sort: true },
range: [0, { signal: "height" }],
padding: 0.5
}
],
axes: [
{
scale: "x",
orient: "bottom",
grid: false,
title: "date",
format: {
signal:
'timeUnitSpecifier(["year","month"], {"year-month":"%b %Y ","year-month-date":"%b %d, %Y "})'
},
formatType: "time",
labelOverlap: true,
zindex: 0
},
{
scale: "layer_0_y",
orient: "left",
grid: false,
encode: {
labels: {
update: {
text: {
signal:
"datum.label == 1 ? \n'IBM': datum.label == 2 ? \n'AMZN': datum.label == 3 ?\n'MSFT': datum.label == 4 ?\n'AAPL' : \n''"
}
}
}
},
zindex: 0
},
{
scale: "layer_1_y",
orient: "right",
grid: false,
encode: {
labels: {
update: {
text: {
signal:
"datum.label == 1 ? \n'GOOG': datum.label == 2 ? \n'AAPL': datum.label == 3 ?\n'IBM': datum.label == 4 ?\n'AMZN' : \n'MSFT'"
}
}
}
},
zindex: 0
}
],
legends: [
{
stroke: "color",
symbolType: "circle",
title: "symbol",
fill: "color",
encode: { symbols: { update: { opacity: { value: 1 } } } }
}
]
})
Insert cell

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.
Learn more