Built with blockbuilder.org
I wanted to do an example of dc.js click behavior with Vega.
All of the Vega examples that I found do shift+click for multi selection. This click behavior is far easier, and in many cases might be more intuitive.
Last active
September 1, 2017 02:55
-
-
Save timelyportfolio/d5e4bc1018d14e319e9ae2098ee5a51e to your computer and use it in GitHub Desktop.
vega font
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://unpkg.com/vega-tooltip@0.4.3/build/vega-tooltip.min.css"> | |
| <script src = "https://unpkg.com/d3"></script> | |
| <script src="https://unpkg.com/vega@3.0.2/build/vega-core.min.js"></script> | |
| <script src="https://unpkg.com/vega-lite@2.0.0-beta.15/build/vega-lite.min.js"></script> | |
| <script src="https://unpkg.com/vega-tooltip@0.4.3/build/vega-tooltip.min.js"></script> | |
| </head> | |
| <body> | |
| <div id = "example-row-vega" style = "width: 600px; height: 400px"></div> | |
| <script> | |
| var spec = { | |
| "$schema": "https://vega.github.io/schema/vega/v3.0.json", | |
| "description": "A simple bar chart with embedded data.", | |
| "autosize": "pad", | |
| "padding": 5, | |
| "style": "cell", | |
| "data": [ | |
| { | |
| "name": "source", | |
| "values": [ | |
| { | |
| "x": 40, | |
| "y": "A" | |
| }, | |
| { | |
| "x": 20, | |
| "y": "B" | |
| }, | |
| { | |
| "x": 50, | |
| "y": "C" | |
| }, | |
| { | |
| "x": 5, | |
| "y": "D" | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "selected", | |
| "on": [ | |
| {"trigger": "clicked", "toggle": "clicked"} | |
| ] | |
| } | |
| ], | |
| "signals": [ | |
| { | |
| "name": "width", | |
| "update": "600" | |
| }, | |
| { | |
| "name": "height", | |
| "update": "400" | |
| }, | |
| { | |
| "name": "clicked", "value": null, | |
| "on": [ | |
| { | |
| "events": "@marks:click", | |
| "update": "{value: datum.y}", | |
| "force": true | |
| } | |
| ] | |
| } | |
| ], | |
| "marks": [ | |
| { | |
| "name": "marks", | |
| "type": "rect", | |
| "style": [ | |
| "bar" | |
| ], | |
| "from": { | |
| "data": "source" | |
| }, | |
| "encode": { | |
| "update": { | |
| "x": { | |
| "scale": "x", | |
| "field": "x" | |
| }, | |
| "x2": { | |
| "scale": "x", | |
| "value": 0 | |
| }, | |
| "y": { | |
| "scale": "y", | |
| "field": "y" | |
| }, | |
| "height": { | |
| "scale": "y", | |
| "band": true | |
| }, | |
| "fill": [ | |
| { | |
| "test": "(!length(data('selected')) || indata('selected', 'value', datum.y))", | |
| "scale": "color", | |
| "field": "y" | |
| }, | |
| { | |
| "value": "grey" | |
| } | |
| ] | |
| } | |
| } | |
| } | |
| ], | |
| "scales": [ | |
| { | |
| "name": "x", | |
| "type": "linear", | |
| "domain": { | |
| "data": "source", | |
| "field": "x" | |
| }, | |
| "range": [ | |
| 0, | |
| { | |
| "signal": "width" | |
| } | |
| ], | |
| "round": true, | |
| "nice": true, | |
| "zero": true | |
| }, | |
| { | |
| "name": "y", | |
| "type": "band", | |
| "domain": { | |
| "data": "source", | |
| "field": "y", | |
| "sort": true | |
| }, | |
| "range": [ | |
| { | |
| "signal": "height" | |
| }, | |
| 0 | |
| ], | |
| "round": true, | |
| "paddingInner": 0.1, | |
| "paddingOuter": 0.05 | |
| }, | |
| { | |
| "name": "color", | |
| "type": "ordinal", | |
| "domain": { | |
| "data": "source", | |
| "field": "y", | |
| "sort": true | |
| }, | |
| "range": "category" | |
| } | |
| ], | |
| "axes": [ | |
| { | |
| "scale": "x", | |
| "labelOverlap": true, | |
| "orient": "bottom", | |
| "tickCount": { | |
| "signal": "ceil(width/40)" | |
| }, | |
| "title": "x in cursive font (see config)", | |
| "zindex": 1 | |
| }, | |
| { | |
| "scale": "x", | |
| "domain": false, | |
| "grid": true, | |
| "labels": false, | |
| "maxExtent": 0, | |
| "minExtent": 0, | |
| "orient": "bottom", | |
| "tickCount": { | |
| "signal": "ceil(width/40)" | |
| }, | |
| "ticks": false, | |
| "zindex": 0, | |
| "gridScale": "y" | |
| }, | |
| { | |
| "scale": "y", | |
| "labelOverlap": true, | |
| "orient": "left", | |
| "title": "y in cursive font (see config)", | |
| "zindex": 1 | |
| } | |
| ], | |
| "config": { | |
| "axis": { | |
| "domainColor": "#888", | |
| "tickColor": "#888", | |
| "labelFont": "cursive", | |
| "titleFont": "cursive" | |
| }, | |
| "axisY": { | |
| "minExtent": 30 | |
| } | |
| } | |
| } | |
| var view = new vega.View(vega.parse(spec)) | |
| .renderer('canvas') // set renderer (canvas or svg) | |
| .initialize('#example-row-vega') // initialize view within parent DOM container | |
| .hover() // enable hover encode set processing | |
| .run(); // run the dataflow and render the view | |
| view.addSignalListener('clicked', (sig, val) => {console.log(val)}); | |
| vegaTooltip.vega(view); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment