Skip to content

Instantly share code, notes, and snippets.

@dsaffo

dsaffo/index.html

Last active July 29, 2020 19:30
Show Gist options
  • Save dsaffo/758affe2311e14bdadb1a5f9474ce0db to your computer and use it in GitHub Desktop.
Save dsaffo/758affe2311e14bdadb1a5f9474ce0db to your computer and use it in GitHub Desktop.
Download ZIP
Vega X VisConnect: Multi Series Line Chart with Tooltip
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://unpkg.com/peerjs@1.0.4/dist/peerjs.min.js"></script>
<script src="https://unpkg.com/visconnect@1.1.2/visconnect-bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega@5.13.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.14.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.10.0"></script>
</head>
<body collaberation="live">
<div id="vis"></div>
<script type="text/javascript">
var vlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Drag the sliders to highlight points.",
"data": {"url": "data/cars.json"},
"transform": [{"calculate": "year(datum.Year)", "as": "Year"}],
"layer": [{
"selection": {
"CylYr": {
"type": "single", "fields": ["Cylinders", "Year"],
"init": {"Cylinders": 4, "Year": 1977},
"bind": {
"Cylinders": {"input": "range", "min": 3, "max": 8, "step": 1},
"Year": {"input": "range", "min": 1969, "max": 1981, "step": 1}
}
}
},
"mark": "circle",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {
"condition": {"selection": "CylYr", "field": "Origin", "type": "nominal"},
"value": "grey"
}
}
}, {
"transform": [{"filter": {"selection": "CylYr"}}],
"mark": "circle",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {"field": "Origin", "type": "nominal"},
"size": {"value": 100}
}
}]
}
vegaEmbed('#vis', vlSpec);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment