Old school D3 from simpler times

All examples By author By category About

timelyportfolio

Full window Github gist

vega font

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.

<!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>

https://unpkg.com/vega@3.0.2/build/vega-core.min.js

https://unpkg.com/vega-lite@2.0.0-beta.15/build/vega-lite.min.js

https://unpkg.com/vega-tooltip@0.4.3/build/vega-tooltip.min.js