Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Thanksgiving Day Race
<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>
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
You can’t perform that action at this time.