Old school D3 from simpler times

All examples By author By category About

wei2517

Full window Github gist

West Central Dist., Tainan City

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <title>Vega Lite Bar Chart</title>
  <meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vega@4.0.0-rc.2/build/vega.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@2.5.0/build/vega-lite.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.14.0/build/vega-embed.js"></script>

<style media="screen">
    /* Add space between Vega-Embed links  */
    .vega-actions a {
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <h1>West Central Dist., Tainan City</h1>
  
  <div id="vis"></div>

<script>
  // Assign the specification to a local variable vlSpec.
  var vlSpec = {
     "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": 700,
  "height": 500,
  "layer": [
    {
      "data": {
        "url": "https://raw.githubusercontent.com/jason2506/Taiwan.TopoJSON/master/topojson/villages/villages-67000370.json",
        "format": {
          "type": "topojson",
          "feature": "map"
        }
      },
      "mark": {
        "type": "geoshape",
        "fill": "lightgray",
        "stroke": "white",
        "strokeWidth": 1
      }
    }
    
  ]
  };

// Embed the visualization in the container with id `vis`
  vegaEmbed("#vis", vlSpec);
  </script>
</body>
</html>

https://cdn.jsdelivr.net/npm/vega@4.0.0-rc.2/build/vega.js

https://cdn.jsdelivr.net/npm/vega-lite@2.5.0/build/vega-lite.js

https://cdn.jsdelivr.net/npm/vega-embed@3.14.0/build/vega-embed.js