Old school D3 from simpler times

All examples By author By category About

bradoyler

Full window Github gist

crime rates in US cities

Crime rates in US cities

By using the number of murders in large cities (over 250k) combined with population, we can determine the murder rate in those cities.

Data

Crime data derived from 'Offenses known to law enforcement (2015)' FBI.gov - Uniform Crime Reporting (UCR) database.
US States (topojson) & Cities (csv) via Atlas-Make

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src='//d3js.org/d3.v4.min.js'></script>
	<script src='//d3js.org/topojson.v1.min.js'></script>
  <script src='https://cdn.jsdelivr.net/gh/caged/d3-tip/v0.8.0-alpha.1/index.js'></script>

<style>
    .highlight {
      fill:none;
      stroke-width: 3px;
      stroke-opacity: .5;
    }

.city-label {
      font: 10px sans-serif;
    }

.states {
      pointer-events: none;
      fill: #ccc;
      stroke: #fff;
      stroke-width: 1px;
      stroke-linejoin: round;
    }

#panel {
      font: 14px sans-serif;
      height: 20px;
    }

.text {
      font-size: 12px;
      color: #eee;
    }
    
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }

/* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }

/* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }
  </style>
</head>
<body>
<div class='svg-container'></div>
<div id='panel'></div>
<script src='map.js'></script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src='//d3js.org/d3.v4.min.js'></script>
    <script src='//d3js.org/topojson.v1.min.js'></script>
  <script src='https://cdn.jsdelivr.net/gh/caged/d3-tip/v0.8.0-alpha.1/index.js'></script>
​
  <style>
    .highlight {
      fill:none;
      stroke-width: 3px;
      stroke-opacity: .5;
    }
​
    .city-label {
      font: 10px sans-serif;
    }
​
    .states {
      pointer-events: none;
      fill: #ccc;
      stroke: #fff;
      stroke-width: 1px;
      stroke-linejoin: round;
    }
​
    #panel {
      font: 14px sans-serif;
      height: 20px;
    }
​
    .text {
      font-size: 12px;
      color: #eee;
    }
    
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
​
    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }
​
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }
  </style>
</head>
<body>
<div class='svg-container'></div>
<div id='panel'></div>
<script src='map.js'></script>
</body>
    

Updated missing url https://cdn.rawgit.com/Caged/d3-tip/v0.8.0-alpha.1/index.js to https://cdn.jsdelivr.net/gh/caged/d3-tip/v0.8.0-alpha.1/index.js

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

https://d3js.org/topojson.v1.min.js

https://cdn.rawgit.com/Caged/d3-tip/v0.8.0-alpha.1/index.js