This is a slight varation of example given by mbostock
Click on the Nodes to Zoom in. Double Click on the Nodes to Zoom out.
<html> | |
<head> | |
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script> | |
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.js"></script> | |
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> | |
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.css"> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> |
code | city | country | lat | lon | |
---|---|---|---|---|---|
ZNZ | ZANZIBAR | TANZANIA | -6.13 | 39.31 | |
TYO | TOKYO | JAPAN | 35.68 | 139.76 | |
AKL | AUCKLAND | NEW ZEALAND | -36.85 | 174.78 | |
BKK | BANGKOK | THAILAND | 13.75 | 100.48 | |
DEL | DELHI | INDIA | 29.01 | 77.38 | |
SIN | SINGAPORE | SINGAPOR | 1.36 | 103.75 | |
BSB | BRASILIA | BRAZIL | -15.67 | -47.43 | |
RIO | RIO DE JANEIRO | BRAZIL | -22.90 | -43.24 | |
YTO | TORONTO | CANADA | 43.64 | -79.40 |
<html> | |
<head> | |
<title>Scatter Plot</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="stylesheet" href="main.css"> | |
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
</head> | |
<body> | |
<br> |
STATION | STATION_NAME | ELEVATION | LATITUDE | LONGITUDE | DATE | PRCP | TMAX | TMIN | TOBS | |
---|---|---|---|---|---|---|---|---|---|---|
GHCND:USC00356749 | PORTLAND KGW TV OR US | 48.5 | 45.51667 | -122.68333 | 19730801 | 0 | 294 | 133 | 217 | |
GHCND:USC00356749 | PORTLAND KGW TV OR US | 48.5 | 45.51667 | -122.68333 | 19730802 | 0 | 300 | 128 | 217 | |
GHCND:USC00356749 | PORTLAND KGW TV OR US | 48.5 | 45.51667 | -122.68333 | 19730803 | 0 | 289 | 133 | 172 | |
GHCND:USC00356749 | PORTLAND KGW TV OR US | 48.5 | 45.51667 | -122.68333 | 19730804 | 0 | 267 | 128 | 178 | |
GHCND:USC00356749 | PORTLAND KGW TV OR US | 48.5 | 45.51667 | -122.68333 | 19730805 | 0 | 228 | 122 | 178 | |
GHCND:USC00356749 | PORTLAND KGW TV OR US | 48.5 | 45.51667 | -122.68333 | 19730806 | 0 | 256 | 144 | 194 | |
GHCND:USC00356749 | PORTLAND KGW TV OR US | 48.5 | 45.51667 | -122.68333 | 19730807 | 0 | 267 | 128 | 206 | |
GHCND:USC00356749 | PORTLAND KGW TV OR US | 48.5 | 45.51667 | -122.68333 | 19730808 | 0 | 294 | 139 | 228 | |
GHCND:USC00356749 | PORTLAND KGW TV OR US | 48.5 | 45.51667 | -122.68333 | 19730809 | 0 | 267 | 150 | 161 |
<html> | |
<head> | |
<title>D3 Bar Chart</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="stylesheet" href="main.css"> | |
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
</head> | |
<body> | |
<script> |
<html> | |
<head> | |
<title>D3 Time Plot</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="stylesheet" href="main.css"> | |
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style> | |
div.tooltip { |
This is a slight varation of example given by mbostock
Click on the Nodes to Zoom in. Double Click on the Nodes to Zoom out.
All the Nodes are assigned with Negative charges.
All but the bigger Node have same negative charge. The Bigger node has a bigger negative charge and so it repels more.
Try to drag the bigger node nearer to other nodes
<html> | |
<head> | |
<title>D3 Particle System</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
</head> | |
<body> | |
<script> | |
var w = 800; |
<html> | |
<head> | |
<title>D3 Particle System</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
</head> | |
<body> | |
<script> | |
var w = 800; |