Old school D3 from simpler times

All examples By author By category About

curran

Full window Github gist

Mortality

This example is a revived piece of old code from February 2014.

It shows causes of death in an interactive set of linked visualizations, a tree navigator and a stacked area chart.

<!-- This page is an example visualization of Cause of Death data
     from the Centers for Disease Control.

Details of the data can be found here:
     https://github.com/curran/data/tree/gh-pages/cdc/mortality

The visualization draws from this D3 example:
     https://bl.ocks.org/mbostock/3885211

Curran Kelleher
     2/13/2014
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Causes of Death</title>
    <script src="https://d3js.org/d3.v3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <style>
      body {
        font: 12px sans-serif;
      }
      .title {
        text-anchor: middle;
        font-size: 2em;
      }

/* Begin style for stacked area visualization. */
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
      /* End style for stacked area visualization. */

/* Begin style for tree visualization. */
      .node circle {
        stroke: #000;
        stroke-width: 1.5px;
      }

.node .with-children {
        fill: #000;
      }

.node .without-children {
        fill: #FFF;
      }

.node {
        font: 12px sans-serif;
      }

.link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
      }

/* End style for tree visualization. */

</style>
  </head>
  <body>
    <script data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
  </body>
</html>

xxxxxxxxxx
 
<!-- This page is an example visualization of Cause of Death data
     from the Centers for Disease Control.
​
     Details of the data can be found here:
     https://github.com/curran/data/tree/gh-pages/cdc/mortality
​
     The visualization draws from this D3 example:
     https://bl.ocks.org/mbostock/3885211
​
     Curran Kelleher
     2/13/2014
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Causes of Death</title>
    <script src="https://d3js.org/d3.v3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <style>
      body {
        font: 12px sans-serif;
      }
      .title {
        text-anchor: middle;
        font-size: 2em;
      }
​
      /* Begin style for stacked area visualization. */
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
      /* End style for stacked area visualization. */
​
      /* Begin style for tree visualization. */
      .node circle {
        stroke: #000;
        stroke-width: 1.5px;
      }
​
      .node .with-children {
        fill: #000;
      }
​
      .node .without-children {
        fill: #FFF;
      }
​
      .node {
        font: 12px sans-serif;
      }
​
      .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
      }
​
      /* End style for tree visualization. */
​
    </style>
  </head>
  <body>
    <script data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
  </body>
</html>
​
    

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

Modified http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js to a secure url

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

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

https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js