Skip to content

Instantly share code, notes, and snippets.

View nivas8292's full-sized avatar

Nivas nivas8292

1 follower · 3 following
  • Bangalore
View GitHub Profile
@nivas8292
nivas8292 / index.html
Last active August 29, 2015 14:22
Force Layout - Gravity + Negative Charge(Repulsion)
<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;
@nivas8292
nivas8292 / index.html
Last active August 29, 2015 14:22
Force Layout - Gravity
<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;
@nivas8292
nivas8292 / README.MD
Last active August 29, 2015 14:22
Force Layout - Charge

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

@nivas8292
nivas8292 / README.MD
Last active November 5, 2018 07:44
Force Layout - Directed Graph with Customized Node and Link

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.

@nivas8292
nivas8292 / index.html
Last active August 29, 2015 14:22
Time Plot - Line Graph with Line/Path Animation
<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 {
@nivas8292
nivas8292 / index.html
Last active August 29, 2015 14:22
Column Bar Chart with Sort Animation
<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>
@nivas8292
nivas8292 / climate_data.csv
Last active August 29, 2015 14:22
Weather App - Line / Bar Graph with Custom Tooltip
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
@nivas8292
nivas8292 / index.html
Last active August 29, 2015 14:22
Scatter Plot - Donut sales
<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>
@nivas8292
nivas8292 / cities.csv
Last active January 2, 2020 14:22
World Map with Zoom slider and Zoom and Pan options
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
@nivas8292
nivas8292 / index.html
Last active August 29, 2015 14:22
CrossFilter, dc.js
<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">