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
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">
@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 / 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 - Positive Charge (Attract each other)
<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 = '100%';
@nivas8292
nivas8292 / index.html
Last active August 29, 2015 14:22
Force Layout - Paint Circle
<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>
@nivas8292
nivas8292 / index.html
Last active August 29, 2015 14:22
Force Layout - Zero Gravity / Momentum
<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>
@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 / 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>