@visactor/vgrammar-template

by ling ding

HTML

<script src="https://unpkg.com/reflect-metadata/Reflect.js"></script>
<script src="https://unpkg.com/@visactor/[email protected]/dist/index.js"></script>
<body>
  <div id="container" style="width:100%;height: 600px;min-width: 400px;min-height: 300px;">
  </div>
</body>

CSS

body {
  background-color: black;
  height: 100%;
}

JavaScript

const { View, IScale, IMark, IElement } = VGrammar;

const spec = {
  padding: { top: 5, right: 5, bottom: 30, left: 60 },

  data: [
    {
      id: "table",
      values: [
        {
          name: "Apple",
          value: 214480
        },
        {
          name: "Google",
          value: 155506
        },
        {
          name: "Amazon",
          value: 100764
        },
        {
          name: "Microsoft",
          value: 92715
        },
        {
          name: "Coca-Cola",
          value: 66341
        },
        {
          name: "Samsung",
          value: 59890
        },
        {
          name: "Toyota",
          value: 53404
        },
        {
          name: "Mercedes-Benz",
          value: 48601
        },
        {
          name: "Facebook",
          value: 45168
        },
        {
          name: "McDonald's",
          value: 43417
        },
        {
          name: "Intel",
          value: 43293
        },
        {
          name: "IBM",
          value: 42972
        },
        {
          name: "BMW",
          value: 41006
        },
        {
          name: "Disney",
          value: 39874
        },
        {
          name: "Cisco",
          value: 34575
        },
        {
          name: "GE",
          value: 32757
        },
        {
          name: "Nike",
          value: 30120
        },
        {
          name: "Louis Vuitton",
          value: 28152
        },
        {
          name: "Oracle",
          value: 26133
        },
        {
          name: "Honda",
          value: 23682
        }
      ]
    }
  ],

  scales: [
    {
      id: "xscale",
      type: "band",
      domain: { data: "table", field: "name" },
      dependency: ["viewBox"],
      range: (scale, params) => {
        return [params.viewBox.x1, params.viewBox.x2];
      },
      padding: 0.05,
      round: true
    },
    {
      id: "yscale",
      type: "linear",
      domain: { data: "table", field: "value" },
     ...