D3 Basic Template

<!DOCTYPE html>

<html>
  <head>
    
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<style type="text/css">

/* Applied to all <p> tags */
    p {
      color: blue;
    }

/* Applied to all tags with the class "red" */
    .red {
      background: red;
    }

/* Applied to the tag with the id "some-id" */
    #some-id {
      font-style: italic;
    }

/* Applied only to <p> tags that are inside <li> tags */
    li pi {
      color: #0C0;
    }

</style>

</head>

<body>

<div>
    <p>Normal Paragraph</p>
    <p class="red">Red paragraph</p>
  </div>

<ol>
    <li id="some-id">Unique element</li>
    <li>Another list element</li>
    <li>
      <p>Paragraph inside list element</p>
      <p>Second paragraph</p>
    </li>
  </ol>

<h1 id="click-me">Click on me!</h1>
  <p class="hover-me">Hover over me!</p>

<script type="text/javascript">

/* Basic D3 Updating Pattern for taking data and binding to elements */
  var dataset = [8, 48, 14, 31, 23];

svg = d3.select("body").append("svg").attr({
    width: 600,
    height: 400
  });

svg.selectAll("rect")  // Begin by selecting a set of elements (say 'rect.bars', rect with class bars)
    .data(dataset)  // Bind our dataset to the data() method, can be say d3.range(5)
    .enter()  // Returns placeholders for our missing elements
    .append("rect")  // Creates the new rectangles
    .attr({  // Give attributes
      x: function(d, i) { return i * 101; },
      y: function(d, i) { return 400 - (d * 5)},  // Notice that y is upside down
      width: 100,
      height: function(d) { return d * 5},
      fill: "orange"
    });

/* Add more data */
  var moreData = d3.range(4);  // Sets properties, but doesn't come in until enter() method
  var rects = svg.selectAll("rect").data(moreData);

rects.attr("fill", "#ccc");  // Changes color, but only for the ones we've selected
  rects.enter();  // Only gets the data you selected
  rects.exit().attr("fill", "blue");  // Fill color for data that you didn't select
  //rects.exit().remove();  // Remove elements that you no longer need

/*
  // DOM API for Selection - Example 1
  document.getElementById('some-id');  // <li id="some-id">Unique element</li>
  document.getElementsByTagName('p').length;  // 4
  var reds = document.getElementsByClassName('red');
  reds[0].innerText // "Red paragraph"
  */

// D3 API for Selection - Example 1
  d3.select('p').size(); // select() only finds one (e.g. 1)
  d3.selectAll('p').size(); // selectAll() finds all (e.g. 4)
  var reds = d3.selectAll('.red');  // [ > Array[1]]
  reds.text();  // "Red paragraph"

/*
  // DOM API for Hover - Example 2
  var clickMe = document.getElementById('click-me');
  clickMe.onclick = function() {
    if (this.style.backgroundColor) {
      this.style.backgroundColor = '';
    } else {
      this.style.backgroundColor = 'red';
    }
  }
  */

// D3 API for Hover - Example 2
  d3.selectAll('.hover-me')
    .on('mouseover', function() {
      this.style.backgroundColor = 'yellow';
    })
    .on('mouseleave', function() {
      this.style.backgroundColor = '';
    });

</script>

</body>
</html>

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

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