Skip to content

Instantly share code, notes, and snippets.

View orcascope's full-sized avatar

Arshadh orcascope

0 followers · 1 following
  • Chennai
  • 21:13 (UTC +05:30)
View GitHub Profile
@orcascope
orcascope / index.html
Last active July 30, 2017 03:02
Animate a circle over line path and at end change fill color of area path
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.2.1.min.js" ></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
@orcascope
orcascope / index.html
Created July 30, 2017 19:58
Velocity - move text x position and change fill color using velocity
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.2.1.min.js" ></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
@orcascope
orcascope / index.html
Last active January 4, 2018 23:58
Animate Area Chart with D3 V4 Interpolators
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.2.1.min.js" ></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
@orcascope
orcascope / index.html
Last active January 5, 2018 00:18
Make a pie segment on hover
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="pie1.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.2/d3.min.js"></script>
</head>
<body class="body">
<div class="top-container "></div>
</body>
@orcascope
orcascope / index.html
Last active January 5, 2018 01:02
The Hovered segment comes to the bottom
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="pie1.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.2/d3.min.js"></script>
</head>
<body class="body">
<div class="top-container "></div>
</body>
@orcascope
orcascope / index.html
Created January 15, 2018 21:21
D3 Drag Mouseover - Drag and drop circle into the other.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
@orcascope
orcascope / income-by-occ.tsv
Last active March 7, 2019 14:00
Income Distribution 1960 and 2014
We can make this file beautiful and searchable if this error is corrected: It looks like row 5 should actually have 44 columns, instead of 8 in line 4.
"year" "occ" "inc1" "inc2" "inc3" "inc4" "inc5" "inc6" "inc7" "inc8" "inc9" "inc10" "inc11" "inc12" "inc13" "inc14" "inc15" "inc16" "inc17" "inc18" "inc19" "inc20" "inc21" "inc22" "inc23" "inc24" "inc25" "inc26" "inc27" "inc28" "inc29" "inc30" "inc31" "inc32" "inc33" "inc34" "inc35" "inc36" "inc37" "inc38" "inc39" "inc40" "inc41" "inc42"
1960 1 398092 597405 412201 456767 494521 395217 418107 333019 530616 425446 240513 286799 312469 178206 177040 100897 253691 0 128976 144044 0 84098 0 69909 87054 0 52297 42546 0 41943 0 26196 46719 0 26193 19223 0 20028 0 246847 0 0
1960 3 5287 10354 11059 11156 17931 28392 32390 38457 56871 65448 39344 41842 38879 23811 20022 13755 18438 0 12355 10458 0 5978 0 4485 4381 0 2689 1792 0 1194 0 799 2192 0 896 795 0 200 0 6575 0 0
1960 10 81102 127607 90753 88950 116462 170939 202512 189192 198144 175226 106361 90160 67024 47514 30084 16733 25594 0 12248 10069 0 5576 0 3681 4583 0 2791 1691 0 798 0 798 795 0 596 795 0 598 0 3682 0 0
1960 25 535253 559722 436020 576117 668616 63
@orcascope
orcascope / quartiled_data.csv
Created February 26, 2018 04:39
Economic Freedaom
id year value q
1 2015 7.5 1
2 2015 7.3 1
3 2015 7.1 1
4 2015 7.05 1
5 2015 6.94 1
6 2015 6.93 1
7 2015 5.05 2
8 2015 5.45 2
9 2015 5.93 2
@orcascope
orcascope / index.html
Created February 27, 2018 21:57
Force - Spread categories as concentric circles - failed
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script>
var height = 660,width=740,
margin = {top:30,left:100,right:40,bottom:30}
center = {x:(width-margin.left-margin.right)/2,y:(height-margin.top-margin.bottom)/2}
forceStrength = -25,
count = 1,
chartWidth = width-margin.left-margin.right,
@orcascope
orcascope / index.html
Last active March 7, 2019 13:56
Force Layout - Nodes arranged in concentric circles - Viz: Circles at center has more value than those in diverging out
<head>
<script src="d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
</head>
<body>
<input id="slider" type='range'>Adjust the Spread of Circles</input>