Old school D3 from simpler times

All examples By author By category About

wei2517

Full window Github gist

Number of subjects vs Age

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>The correlation between subjects number and age</h1>
  <h2>There are 51 subjects totally. This figure shows that the number of subjects in each age range. Besides, it also shows the mean of age for the whole subjects. 
    </h2>
  
  <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",
  "title":"Number of subjects vs Age",
  "width": 300,
  "height": 400,
  "data": {"url": "https://raw.githubusercontent.com/wei2517/around-Yintung-community/master/ppgyearsevery.csv"},
  "layer": [{
    "mark": "bar",
    "encoding": {
      "x": {
        "bin": true,
        "field": "age",
        "type": "quantitative"
      },
      "y": {
        "title":"Number of subjects",
        "aggregate": "count",
        "type": "quantitative"
      }
    }
  },{
    "mark": "rule",
    "encoding": {
      "x": {
        "aggregate": "mean",
        "field": "age",
        "type": "quantitative"
      },
      "color": {"value": "orange"},
      "size": {"value": 3}
    }
  }]
  };

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