vega-lite theme by timelyportfolio

Built with blockbuilder.org

It seems that vega-embed will not work with some vega-lite config that is offered with vl.compile(spec, {config}). For instance, the default mark color ‘#4c78a8’ cannot be overridden with

vegaEmbed(el, vega-lite spec, {config: {mark: {fill: "#aaa"}}})

We can make it work by manually compiling with vl.compile(spec, {config}) before vega-embed. Or we can also add the config in the vega-lite spec.

forked from timelyportfolio‘s block: vega font

index.html

<!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/build/vega-core.js"></script>
  <script src="https://unpkg.com/vega-lite/build/vega-lite.js"></script>
  <script src="https://unpkg.com/vega-embed/build/vega-embed.js"></script>
  <script src=""></script>
</head>

<body>
  <pre>
It seems that vega-embed will not work with some vega-lite config
that is offered with vl.compile(spec, {config}).  For instance, the default
mark color '#4c78a8' cannot be overridden with

vegaEmbed(el, vega-lite spec, {config: {mark: {fill: "#aaa"}}})

We can make it work by manually compiling with vl.compile(spec, {config}) 
before vega-embed.  Or we can also add the config in the vega-lite spec.


  </pre>
  <div style="display:flex;">
    <div style="width: 33%;">
      <h3>manual vl.compile(spec, {config: theme})</h3>
      <div id = "example-row-vega" style = "width: 100%; height: 400px"></div>
    </div>
    <div style="width: 33%;">
      <h3>vega-embed with manually compiled vl spec</h3>
    <div id = "example-vega-embed" style = "width: 100%; height: 400px;"></div>
    </div>
    <div style="width: 33%;">
      <h3>vega-embed with vl spec</h3>
      <div id = "example-vl-vega-embed" style = "width: 100%; height: 400px;"></div>
    </div>
  </div>
  <script>

    var spec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
      "description": "A simple bar chart with embedded data.",
      "data": {
        "values": [
          {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
          {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
          {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
        ]
      },
      "mark": "bar",
      "encoding": {
        "x": {"field": "a", "type": "ordinal"},
        "y": {"field": "b", "type": "quantitative"}
      }
    }
    
    // experiment with vega-themes
    var markColor = '#3e5c69';
    var theme = {
      background: '#fff',

      mark: {fill: markColor},

      axis: {
        domainWidth: 0.5,
        gridDefault: true,
        tickPadding: 2,
        tickWidth: 0.5,
        titleFontWeight: 'normal',
        tickSize: 5
      },

      axisBand: {
        gridDefault: false
      },

      axisX: {
        gridWidth: 0.2
      },

      axisY: {
        gridWidth: 0.4,
        gridDash: [3]
      },

      legend: {
        padding: 1,
        labelFontSize: 11,
        symbolType: 'square'
      },

      range: {
        category: [
          '#3e5c69',
          '#6793a6',
          '#182429',
          '#0570b0',
          '#3690c0',
          '#74a9cf',
          '#a6bddb',
          '#e2ddf2'
        ]
      }
    };
    
    var view = new vega.View(
      vega.parse(
        vl.compile(spec, {config: theme}).spec
      ),
      theme
    )
      .renderer('svg')  // 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
    
    vegaEmbed(
      "#example-vega-embed",
      vl.compile(spec, {config: theme}).spec,
      {renderer: 'svg'}
    )
    vegaEmbed("#example-vl-vega-embed", spec, {config: theme, renderer: 'svg'})
  </script>
</body>
</html>