vega-lite theme by timelyportfolio

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>
  <h3><a href="https://github.com/antvis/g2/blob/master/src/theme/default.js" target="_blank">G2</a> theme for Vega</h3>
	<div style="display:flex;">
    <div style="width: 50%;">
      <div id = "example-single" style = "width: 100%; height: 400px"></div>
    </div>
    <div style="width: 50%;">
      <div id = "example-multiple" 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"}
      }
    }
    
    var spec2 = {
      "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
        "data": {"url": "https://vega.github.io/vega-lite/data/barley.json"},
      	"mark": "bar",
        "encoding": {
          "x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
          "y": {"field": "variety", "type": "nominal"},
          "color": {"field": "site", "type": "nominal"}
        }
    }
    
    // experiment with vega-themes
    var markColor = '#1890FF';
    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: [
          '#1890FF',
          '#2FC25B',
          '#FACC14',
          '#223273',
          '#8543E0',
          '#13C2C2',
          '#3436C7',
          '#F04864'
        ]
      }
    };
    
    var view = new vega.View(
      vega.parse(
        vl.compile(spec, {config: theme}).spec
      ),
      theme
    )
      .renderer('svg')  // set renderer (canvas or svg)
      .initialize('#example-single') // initialize view within parent DOM container
      .hover()             // enable hover encode set processing
      .run();              // run the dataflow and render the view
    
    var view2 = new vega.View(
      vega.parse(
        vl.compile(spec2, {config: theme}).spec
      ),
      theme
    )
      .renderer('svg')  // set renderer (canvas or svg)
      .initialize('#example-multiple') // initialize view within parent DOM container
      .hover()             // enable hover encode set processing
      .run(); 
  </script>
</body>
</html>