D3 Examples - heatmap demo

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
    <!-- D3.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    
    <!-- Google Font -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
    
    <script src="accidents.js"></script>
    
    <style>
        html { font-size: 62.5%; } 
​
        body {
            font-size: 1rem;
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
            fill: #8C8C8C;
            text-align: center;
        background-color: #000000;
​
        }
​
        .timeLabel, .dayLabel {
            font-size: 1.6rem;
            fill: #ffffff;
            font-weight: 300;
        }
​
        text.axis-workweek, text.axis-worktime {
            fill: #eaeaea;
            font-weight: 400;
        }
​
        .title {
            font-size: 2.8rem;
            fill: #f9f9f9;
            font-weight: 300;
        }
​
        .subtitle {
            font-size: 1.4rem;
            fill: #dddddd;
            font-weight: 300;
        }
          
        .credit {
            font-size: 1.2rem;
            fill: #c1c1c1;
            font-weight: 400;
        }
​
        .axis path, .axis tick, .axis line {
              fill: none;
              stroke: none;
          }
​
        text {
              font-size: 1.2rem;
              fill: #efefef;
              font-weight: 400;
        }
​
        .legendTitle {
              font-size: 1.6rem;
              fill: #f9fff9;
              font-weight: 300;
        }
    </style>
    
</head> 
<body>
    
    <div id="trafficAccidents"></div>
    <script src="script.js"></script>
​
</script>
​
</body>
</html>
    