Skip to content

Instantly share code, notes, and snippets.

@anilkpatro

anilkpatro/README.md

Last active August 29, 2015 14:19
Show Gist options
  • Save anilkpatro/fc71893bd8a48f3bbd59 to your computer and use it in GitHub Desktop.
Save anilkpatro/fc71893bd8a48f3bbd59 to your computer and use it in GitHub Desktop.
Download ZIP
Pan/zoom example for Vega v1.5
Raw
README.md

Simple example of adding pan/zoom interactions on chart built with vega v1.5

Raw
index.html
<html>
<head>
<title>Vega Pan/Zoom Test</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/anilkpatro/vega/master/vega.min.js"></script>
<style>
* { font-family: Helvetica Neue, Arial, sans-serif; font-size: 16px; }
body {
width: 560px;
margin: 10px auto;
}
</style>
</head>
<body>
<p><strong>Vega Pan/Zoom Test</strong></p>
<div id="view" class="view"></div>
</body>
<script type="text/javascript">
var spec =
{
"width": 560,
"height": 350,
"padding": {"left": 45, "right": 65, "top": 50, "bottom": 50},
"data": [
{
"name": "points",
"values": [{"x":0.6637748924084008,"y":0},{"x":0.5484188553850314,"y":0.03450358980217672},{"x":0.5020185263552955,"y":0.06341968840289566},{"x":0.6472019204947352,"y":0.12346036922982045},{"x":0.5422740055349533,"y":0.13923229998318315},{"x":0.542361580132391,"y":0.17622395986501554},{"x":0.5172319678655009,"y":0.20478662312351467},{"x":0.5540400939258396,"y":0.26071147856098104},{"x":0.5490470439370002,"y":0.3018411666770542},{"x":0.5684781311835868,"y":0.36076719228093795},{"x":0.5066444671421548,"y":0.36809875195739017},{"x":0.48183612733450015,"y":0.3986095106998535},{"x":0.368753317696321,"y":0.3462824145444211},{"x":0.473555317706156,"y":0.5042851937677},{"x":0.4279284301086809,"y":0.5172766128381666},{"x":0.3589884886314056,"y":0.49410526540953786},{"x":0.319101275744127,"y":0.5028231523670745},{"x":0.25797378733955306,"y":0.4692525771461689},{"x":0.2619193247917344,"y":0.5566068978227308},{"x":0.2510536220102807,"y":0.6340890677894512},{"x":0.19812217061286364,"y":0.6097573428446372},{"x":0.12535973771871445,"y":0.48824394277584426},{"x":0.1305770209988233,"y":0.6845087155507019},{"x":0.06917076516388695,"y":0.5475429865539546},{"x":0.036358567112442085,"y":0.5779028754273969},{"x":0,"y":0.6777900277636946},{"x":-0.041820816002291504,"y":0.6647228353554616},{"x":-0.06811112981971087,"y":0.5391551091084247},{"x":-0.09407296104155645,"y":0.4931477317987467},{"x":-0.14000756217517374,"y":0.5452934524179057},{"x":-0.16011329393518,"y":0.4927780488272063},{"x":-0.19422003685763659,"y":0.49054381741621944},{"x":-0.2871230811793018,"y":0.6101676065162132},{"x":-0.2644974015458848,"y":0.4811189873353528},{"x":-0.35654691647419146,"y":0.5618280406126281},{"x":-0.312423505555612,"y":0.4300140645769696},{"x":-0.38003417863813255,"y":0.45938240803197355},{"x":-0.3981673842820754,"y":0.4240051986054478},{"x":-0.3741488262708924,"y":0.351349134346618},{"x":-0.4352871879857293,"y":0.3601008790618413},{"x":-0.44896724136057237,"y":0.32619379452970343},{"x":-0.5693525709824253,"y":0.3613221286518218},{"x":-0.49625898502395954,"y":0.2728206857093839},{"x":-0.4974518224063328,"y":0.2340830592483607},{"x":-0.5968207083433835,"y":0.2362980346636414},{"x":-0.52559987125473,"y":0.17077775050814153},{"x":-0.5207302249074848,"y":0.1337007972807138},{"x":-0.5176710485762062,"y":0.09875103390909448},{"x":-0.5684269091775649,"y":0.07180901812844427},{"x":-0.5958968927020848,"y":0.0374906547218355},{"x":-0.5419224836863578,"y":6.636636348542299e-17},{"x":-0.5665988083372132,"y":-0.035647375492850214},{"x":-0.5277520506244094,"y":-0.0666705885290407},{"x":-0.652728861830516,"y":-0.12451468967668429},{"x":-0.5785658351417615,"y":-0.14855045806411282},{"x":-0.6197973910520616,"y":-0.20138438002658363},{"x":-0.5307344918912957,"y":-0.21013265057479105},{"x":-0.5605940936519508,"y":-0.2637955567311635},{"x":-0.5399456889167111,"y":-0.2968376544133923},{"x":-0.42874701569050166,"y":-0.27209112992165596},{"x":-0.44950214076040595,"y":-0.32658242169188656},{"x":-0.38802055280106346,"y":-0.3209985177930515},{"x":-0.465892354957826,"y":-0.4375020422879084},{"x":-0.4670648765433245,"y":-0.49737357593329273},{"x":-0.41263731170922363,"y":-0.4987928258876951},{"x":-0.40969027020470966,"y":-0.563890280902712},{"x":-0.3407030520740863,"y":-0.5368621051905298},{"x":-0.2949107341149531,"y":-0.5364406339058015},{"x":-0.2574780034610201,"y":-0.547168609563213},{"x":-0.2574564749256909,"y":-0.6502608282437149},{"x":-0.19828192358582222,"y":-0.6102490119395263},{"x":-0.1464641686677007,"y":-0.57044027442177},{"x":-0.10267933955608215,"y":-0.5382639479404385},{"x":-0.07964463861715536,"y":-0.6304522320683411},{"x":-0.037674711188213306,"y":-0.5988223864607323},{"x":-1.0090446057949444e-16,"y":-0.5492982999421656},{"x":0.03465956961678497,"y":-0.5508980835430648},{"x":0.08354860695379737,"y":-0.6613553235318025},{"x":0.11095588488377245,"y":-0.5816511179655969},{"x":0.14832048719837296,"y":-0.5776701577555782},{"x":0.16525977783644752,"y":-0.5086172976044745},{"x":0.2375377299930711,"y":-0.5999518213282784},{"x":0.21832972834501577,"y":-0.4639742901491859},{"x":0.27548278065641785,"y":-0.5011013177562346},{"x":0.372256162742426,"y":-0.5865818518015197},{"x":0.36105740172744627,"y":-0.4969528799899547},{"x":0.3535146527352871,"y":-0.4273258079841249},{"x":0.3858142676396901,"y":-0.41085046549039217},{"x":0.4115544255518469,"y":-0.3864753301389964},{"x":0.4536397284245915,"y":-0.37528342090423705},{"x":0.4961667873958228,"y":-0.3604862720268597},{"x":0.45263245814927144,"y":-0.28724929263637206},{"x":0.608363226776196,"y":-0.3344505141432198},{"x":0.5161201401120995,"y":-0.24286770275101685},{"x":0.46784443127649034,"y":-0.18523271410240305},{"x":0.5428233945055313,"y":-0.17637401245085244},{"x":0.6420318436718248,"y":-0.16484575942135948},{"x":0.5411818817216327,"y":-0.10323596519424315},{"x":0.5664565319711287,"y":-0.07156010160065093},{"x":0.4998964450643305,"y":-0.031450818502504654}]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"range": "width", "zero": false,
"domainMin": -1.6,
"domainMax": 1.6
},
{
"name": "y",
"type": "linear",
"range": "height", "zero": false,
"domainMin": -1,
"domainMax": 1
}
],
"axes": [
{"type": "x", "scale": "x", "grid": true, "layer": "back", "properties": {
"labels": {
"fontSize": {"value": 14}
}
}},
{"type": "y", "scale": "y", "grid": true, "layer": "back", "properties": {
"labels": {
"fontSize": {"value": 14}
}
}}
],
"marks": [
{
"type": "group",
"properties": {
"enter": {
"x": {"value": 0},
"width": {"value": 560},
"y": {"value": 0},
"height": {"value": 350},
"clip": {"value": true}
}
},
"marks": [
{
"type": "symbol",
"from": {"data": "points"},
"properties": {
"update": {
"x": {"scale": "x", "field": "data.x"},
"y": {"scale": "y", "field": "data.y"},
"fill": {"value": "steelblue"},
"size": {"value": 60}
},
"hover": {
"fill": {"value": "red"},
"size": {"value": 100}
}
}
}
]
}
]
};
vg.parse.spec(spec, function(chart) {
var view = chart({el:"#view"})
.update();
var scales = view.model().scene().items[0].scales;
var zoom = d3.behavior.zoom()
.on("zoom", function() {
view.update({props:"update"});
})
.scaleExtent([1, Infinity])
.x(scales['x'])
.y(scales['y']);
var canvas = d3.select("#view canvas");
canvas.call(zoom);
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment