Skip to content

Instantly share code, notes, and snippets.

@shusson

shusson/gist:98035347cec9313cfae6dd7ed62b403b

Last active August 11, 2017 02:41
Show Gist options
  • Save shusson/98035347cec9313cfae6dd7ed62b403b to your computer and use it in GitHub Desktop.
Save shusson/98035347cec9313cfae6dd7ed62b403b to your computer and use it in GitHub Desktop.
Download ZIP
Vega Lollipop Chart with highlight
Raw
gistfile1.txt
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 1000,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [{"start":64037358,"AF":0.00043706293},{"start":64037368,"AF":0.00043706293},{"start":64037407,"AF":0.0030594405},{"start":64037531,"AF":0.00043706293},{"start":64037572,"AF":0.00043706293},{"start":64037596,"AF":0.00043706293},{"start":64037602,"AF":0.0039335666},{"start":64037627,"AF":0.00043706293},{"start":64037850,"AF":0.00043706293},{"start":64038109,"AF":0.007867133},{"start":64038328,"AF":0.012237762},{"start":64038344,"AF":0.012237762},{"start":64038344,"AF":0.00043706293},{"start":64038363,"AF":0.012237762},{"start":64038363,"AF":0.00043706293},{"start":64038405,"AF":0.025786713},{"start":64038405,"AF":0.04589161},{"start":64038420,"AF":0.04501748},{"start":64038421,"AF":0.00087412586},{"start":64038425,"AF":0.04501748},{"start":64038426,"AF":0.00087412586},{"start":64038859,"AF":0.00087412586},{"start":64038860,"AF":0.00043706293},{"start":64038860,"AF":0.01048951},{"start":64038945,"AF":0.00043706293},{"start":64039079,"AF":0.00043706293},{"start":64039112,"AF":0.00087412586},{"start":64039175,"AF":0.17176573},{"start":64039205,"AF":0.00043706293},{"start":64039230,"AF":0.00043706293},{"start":64039326,"AF":0.00043706293},{"start":64039350,"AF":0.00043706293},{"start":64039451,"AF":0.00043706293},{"start":64039505,"AF":0.00043706293},{"start":64039556,"AF":0.0030594405},{"start":64039588,"AF":0.00043706293},{"start":64039589,"AF":0.039772727},{"start":64039621,"AF":0.00043706293},{"start":64039726,"AF":0.00043706293},{"start":64039775,"AF":0.00043706293},{"start":64039776,"AF":0.00043706293},{"start":64039781,"AF":0.00043706293},{"start":64039787,"AF":0.00043706293},{"start":64039792,"AF":0.1923077},{"start":64039792,"AF":0.056818184},{"start":64039936,"AF":0.0013111888},{"start":64039998,"AF":0.013986014},{"start":64040054,"AF":0.00043706293},{"start":64040072,"AF":0.00043706293},{"start":64040170,"AF":0.0013111888},{"start":64040309,"AF":0.00043706293},{"start":64040338,"AF":0.00043706293},{"start":64040578,"AF":0.00043706293},{"start":64040639,"AF":0.00087412586},{"start":64040717,"AF":0.00043706293},{"start":64040807,"AF":0.00043706293},{"start":64040808,"AF":0.027972028},{"start":64040831,"AF":0.0043706293},{"start":64040846,"AF":0.00043706293},{"start":64041000,"AF":0.00043706293},{"start":64041049,"AF":0.009178322},{"start":64041246,"AF":0.00087412586},{"start":64041783,"AF":0.0039335666},{"start":64041784,"AF":0.00043706293},{"start":64041790,"AF":0.018356644},{"start":64041815,"AF":0.00043706293},{"start":64041817,"AF":0.15996504},{"start":64041862,"AF":0.04938811},{"start":64041862,"AF":0.05332168},{"start":64041960,"AF":0.00043706293},{"start":64041983,"AF":0.0013111888},{"start":64041997,"AF":0.00043706293},{"start":64042076,"AF":0.0026223776},{"start":64042090,"AF":0.00043706293},{"start":64042136,"AF":0.9995629},{"start":64042163,"AF":0.00043706293},{"start":64042241,"AF":0.00043706293},{"start":64042287,"AF":0.00043706293},{"start":64042293,"AF":0.017045455},{"start":64042293,"AF":0.015734266},{"start":64042357,"AF":0.0013111888},{"start":64042494,"AF":0.00043706293},{"start":64042510,"AF":0.00043706293},{"start":64042516,"AF":0.00087412586},{"start":64042766,"AF":0.00043706293},{"start":64042801,"AF":0.0056818184},{"start":64042858,"AF":0.00043706293},{"start":64042950,"AF":0.00043706293},{"start":64042997,"AF":0.21853147},{"start":64043162,"AF":0.00043706293},{"start":64043331,"AF":0.0013111888},{"start":64043487,"AF":0.00043706293},{"start":64043515,"AF":0.031031469},{"start":64043749,"AF":0.00043706293},{"start":64043749,"AF":0.00043706293},{"start":64043749,"AF":0.30812937},{"start":64043749,"AF":0.3068182},{"start":64043764,"AF":0.00043706293},{"start":64043768,"AF":0.00043706293},{"start":64043771,"AF":0.59047204},{"start":64043771,"AF":0.0026223776},{"start":64043771,"AF":0.28627622},{"start":64043771,"AF":0.012674825},{"start":64043771,"AF":0.0043706293},{"start":64043771,"AF":0.0026223776},{"start":64043779,"AF":0.0013111888},{"start":64043779,"AF":0.08041958},{"start":64043787,"AF":0.08085664},{"start":64043787,"AF":0.0017482517},{"start":64043788,"AF":0.018793706},{"start":64043805,"AF":0.034527972},{"start":64043805,"AF":0.10576923},{"start":64043942,"AF":0.00043706293},{"start":64044010,"AF":0.00043706293},{"start":64044284,"AF":0.30375874},{"start":64044329,"AF":0.00043706293},{"start":64044440,"AF":0.00043706293},{"start":64044441,"AF":0.00043706293},{"start":64044480,"AF":0.0013111888},{"start":64044492,"AF":0.00043706293},{"start":64044564,"AF":0.0017482517},{"start":64044574,"AF":0.00087412586},{"start":64044629,"AF":0.0030594405},{"start":64044675,"AF":0.00043706293},{"start":64044689,"AF":0.00043706293},{"start":64044743,"AF":0.00043706293},{"start":64044779,"AF":0.00043706293},{"start":64044902,"AF":0.00043706293},{"start":64044929,"AF":0.05332168},{"start":64045043,"AF":0.0039335666},{"start":64045460,"AF":0.30375874},{"start":64045558,"AF":0.00087412586},{"start":64045629,"AF":0.00043706293},{"start":64045638,"AF":0.00043706293},{"start":64045847,"AF":0.00043706293},{"start":64045943,"AF":0.00043706293},{"start":64045963,"AF":0.0017482517},{"start":64046029,"AF":0.5257867},{"start":64046151,"AF":0.00087412586},{"start":64046315,"AF":0.0039335666},{"start":64046320,"AF":0.00043706293},{"start":64046362,"AF":0.00043706293},{"start":64046471,"AF":0.016171329},{"start":64046641,"AF":0.4645979},{"start":64046872,"AF":0.0030594405},{"start":64046885,"AF":0.3041958},{"start":64046942,"AF":0.0013111888},{"start":64046956,"AF":0.00043706293},{"start":64047063,"AF":0.00087412586},{"start":64047152,"AF":0.9995629},{"start":64047235,"AF":0.40253496},{"start":64047235,"AF":0.09134615},{"start":64047235,"AF":0.01048951},{"start":64047235,"AF":0.30026224},{"start":64047235,"AF":0.017482517},{"start":64047345,"AF":0.00087412586},{"start":64047516,"AF":0.0013111888},{"start":64047518,"AF":0.00043706293},{"start":64047556,"AF":0.15034965},{"start":64047572,"AF":0.0013111888},{"start":64047585,"AF":0.00087412586},{"start":64047586,"AF":0.0013111888},{"start":64047594,"AF":0.024038462},{"start":64047600,"AF":0.0048076925},{"start":64047605,"AF":0.013548951},{"start":64047653,"AF":0.013986014},{"start":64047708,"AF":0.00087412586},{"start":64047725,"AF":0.00043706293},{"start":64047805,"AF":0.7701049},{"start":64047805,"AF":0.016608391},{"start":64047805,"AF":0.00043706293},{"start":64047831,"AF":0.017045455},{"start":64047886,"AF":0.00043706293},{"start":64047924,"AF":0.010926574},{"start":64048025,"AF":0.9934441},{"start":64048074,"AF":0.00043706293},{"start":64048172,"AF":0.00043706293},{"start":64048219,"AF":0.00043706293},{"start":64048297,"AF":0.00087412586},{"start":64048432,"AF":0.00043706293},{"start":64048448,"AF":0.00087412586},{"start":64048466,"AF":0.031031469},{"start":64048584,"AF":0.0026223776},{"start":64048589,"AF":0.00043706293},{"start":64048630,"AF":0.00087412586},{"start":64048659,"AF":0.00043706293},{"start":64048730,"AF":0.00087412586},{"start":64048821,"AF":0.00087412586},{"start":64048912,"AF":0.84134614},{"start":64048940,"AF":0.0034965035},{"start":64049021,"AF":0.15515734},{"start":64049123,"AF":0.00043706293},{"start":64049170,"AF":0.00043706293},{"start":64049279,"AF":0.00043706293},{"start":64049394,"AF":0.00043706293},{"start":64049432,"AF":0.00043706293},{"start":64049433,"AF":0.0013111888},{"start":64049481,"AF":0.00043706293},{"start":64049517,"AF":0.00043706293},{"start":64049682,"AF":0.0039335666},{"start":64049699,"AF":0.00043706293},{"start":64049716,"AF":0.00043706293},{"start":64049722,"AF":0.00043706293},{"start":64049744,"AF":0.00043706293},{"start":64049919,"AF":0.00043706293},{"start":64050181,"AF":0.00043706293},{"start":64050354,"AF":0.12194056},{"start":64050354,"AF":0.01048951},{"start":64050354,"AF":0.1520979},{"start":64050436,"AF":0.00043706293},{"start":64050440,"AF":0.00043706293},{"start":64050448,"AF":0.00043706293},{"start":64050457,"AF":0.00043706293},{"start":64050460,"AF":0.00043706293},{"start":64050460,"AF":0.00087412586},{"start":64050616,"AF":0.00043706293},{"start":64051052,"AF":0.00043706293},{"start":64051071,"AF":0.0030594405},{"start":64051250,"AF":0.0021853147},{"start":64051267,"AF":0.04458042},{"start":64051267,"AF":0.005244755},{"start":64051823,"AF":0.03758741},{"start":64051853,"AF":0.0013111888},{"start":64051865,"AF":0.00043706293},{"start":64052035,"AF":0.00043706293},{"start":64052086,"AF":0.00043706293},{"start":64052163,"AF":0.00043706293},{"start":64052164,"AF":0.00043706293},{"start":64052173,"AF":0.00043706293}]
}
],
"signals": [
{
"name": "active",
"value": {},
"on": [
{"events": {"type": "mouseover", "markName": "pin"}, "update": "datum"},
{"events": {"type": "mouseout", "markName": "pin"}, "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "linear",
"domain": [64037302, 64052176],
"range": "width",
"padding": 0.05,
"round": true,
"zero": false
},
{
"name": "yscale",
"domain": {"data": "table", "field": "AF"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [{
"name": "pin",
"type": "group",
"from": {"data": "table"},
"marks": [{
"name": "nodes",
"type": "symbol",
"from": {"data": "table"},
"encode": {
"enter": {
"fill": {"value": "#ccc"},
"x": {"scale": "xscale", "field": "start"},
"y": {"scale": "yscale", "field": "AF"}
},
"update": {
"size": [
{"test": "datum === active", "value": 170},
{"value": 100}
],
"fill": [
{"test": "datum === active", "value": "blue"},
{"value": "#ccc"}
]
},
"hover": {
}
}
},
{
"name": "stem",
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"fill": {"value": "#ccc"},
"x": {"scale": "xscale", "field": "start"},
"y": {"scale": "yscale", "field": "AF"},
"y2": {"scale": "yscale", "value": 0},
"stroke": {"value": "#ccc"}
},
"update": {
"stroke": [
{"test": "datum === active", "value": "blue"},
{"value": "#ccc"}
],
"strokeWidth": [
{"test": "datum === active", "value": 3},
{"value": 2}
]
},
"hover": {
}
}
}]
}]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment