Skip to content

Instantly share code, notes, and snippets.

@dukevis
dukevis / index.html
Last active August 29, 2015 13:55
Dynamic Scales
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Here</title>
<script type="text/javascript" src="../d3.v3/d3.v3.js"></script>
<style type="text/css">
.axis path,
.axis line{
fill: none;
@dukevis
dukevis / gapminder_avg.csv
Last active August 29, 2015 13:55
Gapminder Subset
country gdp lifeexp population region color rgb loggdp
Kuwait 64256.41951 68.35385246 1313738.049 Middle East & North Africa green [0 1 0] 4.807916522
Luxembourg 36286.24377 72.92478689 375718.3115 Europe & Central Asia orange [1 .6 .3] 4.559742014
United States 28990.59574 73.5852623 235012383.7 America yellow [1 1 0] 4.46225714
Switzerland 27652.04918 75.87004918 6366298.164 Europe & Central Asia orange [1 .6 .3] 4.441727321
Norway 26679.49623 76.09822951 4080763.541 Europe & Central Asia orange [1 .6 .3] 4.426177625
Canada 23079.49098 75.245 24696114.8 America yellow [1 1 0] 4.363226226
Denmark 21603.91131 74.56686885 5024245.492 Europe & Central Asia orange [1 .6 .3] 4.334532386
Netherlands 21320.9518 75.85378689 13871609.03 Europe & Central Asia orange [1 .6 .3] 4.328806588
Iceland 21246.22459 76.66583607 232060.2459 Europe & Central Asia orange [1 .6 .3] 4.327281768
@dukevis
dukevis / index.html
Last active August 29, 2015 13:55
Add Value Bar Chart on Click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Here</title>
<script type="text/javascript" src="../d3.v3/d3.v3.js"></script>
@dukevis
dukevis / index.html
Last active August 29, 2015 13:55
Bar Transitions with Dynamic Scales
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Here</title>
<script type="text/javascript" src="../d3.v3/d3.v3.js"></script>
@dukevis
dukevis / index.html
Last active August 29, 2015 13:56
Remove Elements with Key Functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Here</title>
<script type="text/javascript" src="../d3.v3/d3.v3.js"></script>
<style type="text/css">
.axis path,
@dukevis
dukevis / basketball_data2.csv
Last active August 29, 2015 13:56
ACC Basketball Line Chart
Year Clem Duke MD UNC NCS UVA WF
1954 0 1 1 0 3 0 2
1955 0 3 1 0 6 1 3
1956 0 4 1 1 9 1 5
1957 0 4 2 3 9 1 6
1958 0 5 5 5 10 1 6
1959 0 6 5 7 13 2 6
1960 0 9 5 8 14 2 8
1961 0 11 6 8 14 2 10
1962 2 12 6 8 14 2 13
@dukevis
dukevis / basketball_data.csv
Last active August 29, 2015 14:00
chord diagram + multiline chart
Year UNC Duke NCS WF MD UVA Clem
1954 0 1 3 2 1 0 0
1955 0 3 6 3 1 1 0
1956 1 4 9 5 1 1 0
1957 3 4 9 6 2 1 0
1958 5 5 10 6 5 1 0
1959 7 6 13 6 5 2 0
1960 8 9 14 8 5 2 0
1961 8 11 14 10 6 2 0
1962 8 12 14 13 6 2 2
@dukevis
dukevis / Readme.md
Last active September 11, 2015 18:43 — forked from WillTurman/Readme.md
D3 Interactive Streamgraph

D3 Streamgraph Example

Series Hover

The series hover interactivity uses the technique from lgrammel seen here: http://bl.ocks.org/1963983

Data Tooltip

It isn't necessarily a tooltip, but data is displayed by inverting the x-axis value into a date, and mapping the date to the corresponding data value for the series.

@dukevis
dukevis / mental_flot_data.csv
Created September 13, 2015 15:37
recline_test
year intellectual disability learning disability mental deficiency mental handicap mental retardation other mental term
1945 0.017857143 0.089285714 0.017857143
1946 0.085561497 0.010695187 0.021390374
1947 0.004975124 0.064676617 0.004975124 0.009950249
1948 0.071770335 0.014354067 0.004784689
1949 0.058365759 0.003891051 0.019455253 0.011673152
1950 0.033846154 0.006153846 0.012307692 0.006153846
1951 0.001179245 0.047169811 0.001179245 0.018867925 0.004716981
1952 0.025879917 0.004140787 0.025879917 0.007246377
1953 0.001046025 0.001046025 0.040794979 0.005230126 0.018828452 0.003138075
@dukevis
dukevis / index.html
Created September 14, 2015 02:30
mental disabilities streamgraph
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="nv.d3.js"></script>
<style>
text {