Skip to content

Instantly share code, notes, and snippets.

View Ewiseman's full-sized avatar

Eric Wiseman Ewiseman

  • Denver, CO
View GitHub Profile
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
////////////////////////////////////////////////////////////////////
///////////////// SVG SETUP ////////////////////////////////////////
////////////////////////////////////////////////////////////////////
// Defines Parameters of SVG //
@Ewiseman
Ewiseman / global_gdp.csv
Created December 11, 2017 20:11
Global GDP Data
countryname size1960 size1961 size1962 size1963 size1964 size1965 size1966 size1967 size1968 size1969 size1970 size1971 size1972 size1973 size1974 size1975 size1976 size1977 size1978 size1979 size1980 size1981 size1982 size1983 size1984 size1985 size1986 size1987 size1988 size1989 size1990 size1991 size1992 size1993 size1994 size1995 size1996 size1997 size1998 size1999 size2000 size2001 size2002 size2003 size2004 size2005 size2006 size2007 size2008 size2009 size2010 size2011 size2012 size2013 size2014 size2015 size2016 change1960 change1961 change1962 change1963 change1964 change1965 change1966 change1967 change1968 change1969 change1970 change1971 change1972 change1973 change1974 change1975 change1976 change1977 change1978 change1979 change1980 change1981 change1982 change1983 change1984 change1985 change1986 change1987 change1988 change1989 change1990 change1991 change1992 change1993 change1994 change1995 change1996 change1997 change1998 change1999 change2000 change2001 change2002 change2003 change2004 chan
@Ewiseman
Ewiseman / colordado_chord-diagram.js
Last active April 12, 2018 16:02
Colorado Ski Resort Chord Diagram
$(document).ready(function() {
////////////////////////////////////////////////////////////////////
///////////////// SVG SETUP ////////////////////////////////////////
////////////////////////////////////////////////////////////////////
// Defines Parameters of SVG //
var margin = {top: 20, right: 50, bottom: 50, left:0},
width = $("#ski-chord-diagram").width(),
height = $("#ski-chord-diagram").width(),
$(document).ready(function() {
////Width and height
var margin = {top: 20, right: 20, bottom: 160, left: 40},
width = $("#flat-triangles").width() - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom;
//Create SVG element
var svg = d3.select("#flat-triangles")
.append("svg")
$(document).ready(function() {
////Width and height
var margin = {top: 20, right: 20, bottom: 160, left: 40},
width = $("#three-d-triangles").width() - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom;
//Create SVG element
var svg = d3.select("#three-d-triangles")
.append("svg")
@Ewiseman
Ewiseman / resort_map.js
Last active May 8, 2017 17:27
Ski Resort Map
$(document).ready(function() {
// Defines the width and height of visualization
var margin = {top: 20, right: 0, bottom: 160, left: 0},
width = $("#us-map").width() + 50,
height = 1000 - margin.top - margin.bottom,
centered;
// Maps the latitude on longitude on the SVG and adjust scaling and rotation
var projection = d3.geo.conicConformal()
@Ewiseman
Ewiseman / scatter_plot.js
Last active January 31, 2019 21:19
Scatter Plot
$(document).ready(function() {
var margin = {top: 20, right: 20, bottom: 160, left: 40},
width = $("#scatter-plot").width() - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
// setup x
var xValue = function(d) { return d.acres;}, // data -> value
xScale = d3.scale.linear().range([0, width]), // value -> display
xMap = function(d) { return xScale(xValue(d));}, // data -> display
@Ewiseman
Ewiseman / radial_lollipop.js
Last active May 8, 2017 16:14
Radial Lollipop Chart
$(document).ready(function() {
var centerRadial = $("#radial-bubble");
var outerWidth = centerRadial.width();
var outerHeight = centerRadial.width()+200;
var margin = { left: 0, top: 0, right: 0, bottom: 0 };
var innerWidth = outerWidth + margin.left + margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
@Ewiseman
Ewiseman / ski_resort_stats.csv
Created March 17, 2017 23:36
Ski Resort Data
resort_name state summit base vertical lifts runs acres green_percent green_acres blue_percent blue_acres black_percent black_acres lat lon
49(degrees) North, WA Washington 5774 3923 1851 6 68 2325 0.3 697.5 0.4 930 0.3 697.5 49 -115.84
Afton Alps, MN Minnesota 700 350 350 21 48 300 0.2 60 0.6 180 0.2 60 44.85 -92.79
Alpine Meadows, CA California 8673 6385 2288 13 100 2400 0.25 600 0.4 960 0.35 840 39.17 -120.22
Alpine Mountain, PA Pennsylvania 1150 600 500 3 21 120 0.17 20.4 0.55 66 0.28 33.6 40.08 -76.9
Alpine Valley, MI Michigan 1210 910 300 14 25 118 0.39 46.02 0.26 30.68 0.35 41.3 44.96 -84.87
Alpine Valley, OH Ohio 1500 1260 230 6 11 72 0.33 23.76 0.34 24.48 0.33 23.76 40.31 -83.68
Alpine Valley, WI Wisconsin 388 16 20 90 0.4 36 0.4 36 0.2 18 42.45 -88.25
Alta, UT Utah 10550 8530 2020 11 116 2200 0.25 550 0.4 880 0.35 770 40.6 -111.64
Alyeska, AK Alaska 3939 250 2500 9 73 1500 0.11 165 0.52 780 0.37 555 60.97 -149.11
@Ewiseman
Ewiseman / horizontal_bar.js
Last active May 8, 2017 16:15
Horizontal Bar Chart
$(document).ready(function() {
var margin = {top: 20, right: 50, bottom: 50, left: 200},
width = $("#horizontal").width() - margin.left - margin.right,
height = 5000 - margin.top - margin.bottom;
var yAxisMargin = height - margin.bottom
var svg = d3.select("#horizontal").append("svg")
.attr("width", width + margin.left + margin.right)