Last active
December 1, 2017 05:03
-
-
Save taylorchasewhite/2f76d1e184e4be4df92d6dfa2f1e3ef4 to your computer and use it in GitHub Desktop.
Thanksgiving Day Race
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.1.1/billboard.min.js"></script> | |
<link href="http://taylorchasewhite.com/c3/c3/c3-0.4.14/c3.min.css" rel="stylesheet"> | |
<script src="./thanksgivingChart.js"></script> | |
<style> | |
.axis { | |
fill: gray; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
user-select: none; | |
} | |
.axis .halo { | |
stroke: gray; | |
stroke-width: 4px; | |
stroke-linecap: round; | |
} | |
.slider .handle path { | |
stroke: orange; | |
stroke-width: 3px; | |
stroke-linecap: round; | |
pointer-events: none; | |
} | |
.slider .handle circle { | |
fill:orange; | |
} | |
.slider .handle text { | |
fill: black; | |
text-align: center; | |
font-size: 18px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="divPaceChart"></div> | |
<div id="divNumRacersChart"></div> | |
<script> | |
initialize(); | |
</script> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function initialize() { | |
c3=bb; | |
loadThanksgivingData(); | |
} | |
function loadThanksgivingData() { | |
d3.tsv('https://raw.githubusercontent.com/taylorchasewhite/dataTank/master/ThanksgivingDayRace.tsv',function(error, data) { | |
if (error) throw error; | |
var tgdRaceData=data; | |
renderRaceCharts(tgdRaceData); | |
}); | |
} | |
function renderRaceCharts(tgdRaceData) { | |
console.log(tgdRaceData); | |
var paceChart = c3.generate({ | |
bindto: '#divPaceChart', | |
title: { | |
text: 'Taylor White\'s Thanksgiving Day Race Times', | |
}, | |
data: { | |
json: tgdRaceData, | |
types: { | |
Pace:'area-spline', | |
AveragePace:'spline' | |
}, | |
colors: { | |
Pace:randomColor(),//'#00bfd4', | |
AveragePace:randomColor()//'#d94e6f' | |
}, | |
x: 'Date', | |
xFormat: '%m/%d/%Y', // how the date is parsed | |
names: { | |
Date: 'Date', | |
Time: 'Total Time', | |
Pace: 'Pace (min/mi)', | |
FinisherCount:'# Finishers', | |
Females:'# Females', | |
Males:'# Males', | |
AveragePace: 'Avg. Pace (min/mi)' | |
}, | |
keys: { | |
x: 'Date', | |
value: ['Pace','AveragePace'] | |
}, | |
}, | |
axis: { | |
x: { | |
label: { | |
text: "Race Date", | |
position: "outer-center" | |
}, | |
type: 'timeseries', | |
tick: { | |
format: '%Y' | |
//format: '%B %Y' | |
}, | |
show: true | |
}, | |
y: { | |
label: { | |
text: "Pace (min/mi)", | |
position: "outer-middle" | |
}, | |
min:390, | |
tick: { | |
format: function(d) { | |
var tempDate=new Date(2014,1,1); | |
var u=+tempDate | |
var newU=u+(d*1000); | |
var formatSeconds=d3.timeFormat("%M:%S"); | |
return formatSeconds(new Date(newU)); | |
} | |
}, | |
show: true | |
} | |
}, | |
tooltip: { | |
format: { | |
title: function (d) { | |
var dateFormat=d3.timeFormat("%Y"); | |
return 'Thanksgiving ' + dateFormat(d); | |
}, | |
value: function (value, ratio, id,index) { | |
var tempDate= new Date(2014, 4, 1); | |
var u=+tempDate; | |
var newU=u+(value*1000); | |
var formatSeconds = d3.timeFormat("%M:%S"); | |
var returnVal=formatSeconds(new Date(newU)); | |
return returnVal; | |
} | |
} | |
} | |
}); | |
var numRacersChart = c3.generate({ | |
bindto: '#divNumRacersChart', | |
title: { | |
text: 'Taylor White\'s Thanksgiving Day Number of Racers', | |
}, | |
data: { | |
json: tgdRaceData, | |
x: 'Date', | |
xFormat: '%m/%d/%Y', // how the date is parsed | |
type:'bar', | |
colors: { | |
Females:'#dd299d', | |
Males:'#0085f2', | |
FinisherCount:'#19c295' | |
/*Females:'#9921B2', | |
Males:'#118EEF', | |
FinisherCount:'#109B77'*/ | |
/*Females:'#e541f4', | |
Males:'#4286f4', | |
FinisherCount:'#1fc474'*/ | |
}, | |
names: { | |
Date: 'Date', | |
Time: 'Total Time', | |
Pace: 'Pace (min/mi)', | |
FinisherCount:'# Finishers', | |
Females:'# Females', | |
Males:'# Males', | |
AveragePace: 'Avg. Pace (min/mi)' | |
}, | |
groups: [ | |
['Males', 'Females'] | |
], | |
keys: { | |
x: 'Date', | |
value: ['FinisherCount','Males','Females'] | |
}, | |
}, | |
axis: { | |
x: { | |
label: { | |
text: "Race Date", | |
position: "outer-center" | |
}, | |
type: 'timeseries', | |
tick: { | |
format: '%Y' | |
//format: '%B %Y' | |
}, | |
show: true | |
}, | |
y: { | |
label: { | |
text: "Finisher Count", | |
position: "outer-middle" | |
}, | |
show: true | |
} | |
} | |
}); | |
} | |
function buttonClick() { | |
setTimeout(function () { | |
chart.load({ | |
columns: [ | |
['data3', 400, 500, 450, 700, 600, 500] | |
] | |
}); | |
}, 1000); | |
} | |
function randomColor() { | |
return colors[Math.floor(Math.random()*colors.length)].hex; | |
} | |
var colors= [ | |
{ | |
name:"Azure", | |
rgb: "rgb(0,133,242)", | |
hex: '#0085f2' | |
}, | |
{ | |
name:"Fuchsia", | |
rgb: "rgb(221,41,157)", | |
hex: '#dd299d' | |
}, | |
{ | |
name:"Lime", | |
rgb: "rgb(105,195,0)", | |
hex: '#69c300' | |
}, | |
{ | |
name:"Dahlia", | |
rgb: "rgb(0,133,242)", | |
hex: '#b429cc' | |
}, | |
{ | |
name:"Caribbean", | |
rgb: "rgb(0,133,242)", | |
hex: '#00bfd4' | |
}, | |
{ | |
name:"Tangerine", | |
rgb: "rgb(0,133,242)", | |
hex: '#ff9200' | |
}, | |
{ | |
name:"Wisteria", | |
rgb: "rgb(0,133,242)", | |
hex: '#6a4ce0' | |
}, | |
{ | |
name:"Mediterranean", | |
rgb: "rgb(0,133,242)", | |
hex: '#19c295' | |
}, | |
{ | |
name:"Blush", | |
rgb: "rgb(0,133,242)", | |
hex: '#ff6665' | |
}, | |
{ | |
name:"Sky", | |
rgb: "rgb(0,133,242)", | |
hex: '#24a4ee' | |
}, | |
{ | |
name:"Rose", | |
rgb: "rgb(0,133,242)", | |
hex: '#d94e6f' | |
}, | |
]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment