d3 | SGGS authors per ang

Chart on SGGS authors

This is my first draft/sketch for a chart to show authors, as they appear on each ang/page of the Sri Guru Granth Sahib. Each bar represents a page, there is a legend to filter the authors.

Issues

Mostly to do with the data, scraped what I could, but had to go through manually to fill in the gaps. Grouped Bhagats together(15), Bhatts(17), and Sikhs(4) otherwise would have be too many colours
Didn't know which shabad Guru Gobind Singh wrote

To do:

Add Bhagat, Bhatt and Sikh names
Connect to a sensor and arduino/espruino microcontroller and change as ang/page change.

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SGGS | gurus, bhagats, bhats, sikhs per page visualisation</title> 
  <meta name="author" content="Sundar Singh | eesur.com">
  
  <link rel="stylesheet" href="main.css">
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js"></script>
</head>
<body>
​
<section id="vis">
  <h1 id="info">Authors on each ang SGGS</h1>
  <aside id="legend"></aside>
</section>
​
<script src="d3_code_sggs_bars.js" charset="utf-8"></script> 
​
</body>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js