Old school D3 from simpler times

All examples By author By category About

justlebeau

Full window Github gist

Continential Density Bubbles

The circles represent people per square miles for each Continent.

See (Bubble Chart)[https://github.com/phuonghuynh/bubble-chart/]

forked from phuonghuynh's block: D3 Bubble chart

<!DOCTYPE html>
<html>
<head>
  <title>Continental Density People/Square Mile</title>
  <meta charset="utf-8">

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'>

<script src="https://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/d3/d3.min.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
  <script src="index.js"></script>
  <style>
    .bubbleChart {
      min-width: 400px;
      max-width: 800px;
      height: 700px;
      margin: 0 auto;
    }
    .bubbleChart svg{
      background: #ffffff;
    }
  </style>
</head>
<body style="background: #FFFFFF">
<div class="bubbleChart"/>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <title>Continental Density People/Square Mile</title>
  <meta charset="utf-8">
​
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
​
  <script src="https://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/d3/d3.min.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script>
  <script src="https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
  <script src="index.js"></script>
  <style>
    .bubbleChart {
      min-width: 400px;
      max-width: 800px;
      height: 700px;
      margin: 0 auto;
    }
    .bubbleChart svg{
      background: #ffffff;
    }
  </style>
</head>
<body style="background: #FFFFFF">
<div class="bubbleChart"/>
</body>
</html>
​
    

Modified http://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js to a secure url

Modified http://phuonghuynh.github.io/js/bower_components/d3/d3.min.js to a secure url

Modified http://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js to a secure url

Modified http://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js to a secure url

Modified http://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js to a secure url

Modified http://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js to a secure url

Modified http://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js to a secure url

Modified http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js to a secure url

Modified http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js to a secure url

Modified http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js to a secure url

https://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js

https://phuonghuynh.github.io/js/bower_components/d3/d3.min.js

https://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js

https://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js

https://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js

https://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js

https://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js

https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js

https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js

https://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js