Skip to content

Instantly share code, notes, and snippets.

@ammark47
Last active November 1, 2018 19:10
Show Gist options
  • Save ammark47/566d2787e230ec3d8d8bc552bbc98f80 to your computer and use it in GitHub Desktop.
Save ammark47/566d2787e230ec3d8d8bc552bbc98f80 to your computer and use it in GitHub Desktop.
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data":{
"url":
"https://raw.githubusercontent.com/hvo/datasets/master/nyc_restaurants_by_cuisine.json",
"format": {"type":"json"}
},
"transform":[
{"filter":"datum._vgsid_<=25" }
],
"selection": {
"search": {
"bind": {"input": "input"},
"empty": "none",
"fields": ["term"],
"type": "single"
},
"highlight": {
"type":"single",
"on": "mouseover",
"empty":"none"
}
},
"mark": {
"type": "bar",
"stroke": "Black"
},
"encoding": {
"color": {
"condition": {"test": "indexof(lower(datum.cuisine), lower(search.term))>=0", "value": "Yellow"},
"value": "Purple"
},
"y": {
"field":"cuisine",
"type": "ordinal",
"sort": {"field":"total", "op": "argmax"}
},
"x":{
"field":"total",
"type": "quantitative"
}
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Import Vega 4 & Vega-Lite 2 (does not have to be from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
<!-- Import vega-embed -->
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var spec = "DV_Lab7.vg.json";
vegaEmbed('#vis', spec).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment