Urmila J

# Basic boilerplate steps to re-create the charts. Follow these directions.

Code for each chart is available at this github repository. (opens new window)

For clarity I have included html, css and js code for each chart in the html itself.

All the 30 day charts are made with D3.js version 6.


Some charts use additional libraries other than D3.js such as:

  1. D3 Annotation by Susie Lu (opens new window)
  2. Textures.js by Riccardo Scalco (opens new window)
  3. Simple Statistics by Tom Macwright and contributors (opens new window)
  4. Zdog (opens new window)

# Basic html setup


This the basic html setup with D3js loaded.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style></style>
    <script src="https://d3js.org/d3.v6.min.js"></script>
  </head>
  <body></body>
</html>
1
2
3
4
5
6
7
8
9
10

All css will be included in the style tags.

<style></style>
1

All chart content such as title of the chart, chart description, svg, footer and so on will be included in the body tag.

<body></body>
1

Basic setup for the svg with margins, width, height and padding.

const margin = { top: 50, left: 50, bottom: 50, right: 50 },
  width = 900 - margin.right - margin.left,
  height = 900 - margin.top - margin.bottom,
  padding = 3;
1
2
3
4

To insert an svg select the body html tag and append the svg element. Set the svg attributes such as width and height. Append a group element, the group element will collectively hold any other element that will be added to the svg. If the transform, translate attribute is changed, the group element will move position accordingly.

const svg = d3.select("body")
  .append("svg")
  .attr("width",width+margin.left+margin.right)
  .attr("height",height+margin.top+margin.bottom)
  .append("g")
  .attr("transform",`translate(${margin.left},${margin.top});
1
2
3
4
5
6

←