Skip to content

Instantly share code, notes, and snippets.

@GitNoise

GitNoise/.block

Last active January 17, 2020 09:32
Show Gist options
  • Save GitNoise/cd015b1bf03d585db61b437c59d0e034 to your computer and use it in GitHub Desktop.
Save GitNoise/cd015b1bf03d585db61b437c59d0e034 to your computer and use it in GitHub Desktop.
Download ZIP
area small multiples
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;}
#main {
width: 700px;
}
#wrapper {
width: 800px;
display: grid;
grid-template-columns: 50px auto;
}
path {
stroke: black;
fill-opacity: 0.6;
}
#container {
display: grid;
justify-items: center;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-column-gap: 10px;
grid-row-gap: 10px;
}
#scalesLeft {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-row-gap: 10px;
}
#scalesBottom {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
justify-items: center;
grid-column-gap: 10px;
}
</style>
</head>
<body>
<div id="main">
<div id="wrapper">
<div id="scalesLeft"></div>
<div id="container"></div>
<div></div>
<div id="scalesBottom"></div>
</div>
</div>
<script>
const width = 100;
const margin = 12;
const toWideData = data => (
d3.nest()
.key(d => d.Year ) // sort by key
.rollup(d => d.reduce((prev, curr) => {
prev.Year = curr.Year;
prev[curr.Sport] = curr.Percentage;
return prev;
}, {}))
.entries(data)
.map(d => d.value));
d3.tsv('makeovermonday.csv', (data) => {
// convert to wide from long data
const wideData = toWideData(data);
// get keys
const keys = Object.keys(wideData[0]).slice(1);
// stack the data
const stackedData =
d3.stack().keys(keys).value((d, key) => d[key])(wideData);
// scales
const x = d3.scaleTime()
.domain(d3.extent(data, d => new Date(+d.Year, 1, 1)))
.range([margin, width-margin]);
const y = d3.scaleLinear()
.domain([0, 100])
.range([ width -margin, margin ]);
const color = d3.scaleOrdinal()
.domain([0, keys.length]) .range(['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']);
const area = d3.area()
.curve(d3.curveLinear)
.x(d => x(d.Year))
.y0(y(0))
.y1(d => y(+d.Percentage))
keys.forEach((key,i) => {
const sportData = wideData.map(d => {
return {Year: new Date(+d.Year, 0, 1), Percentage: +d[key]};
})
var svg = d3.select("#container").append('div').append("svg")
.classed('sport', true)
.attr("width", width)
.attr("height", width);
// draw the result
svg
.append("path")
.style("fill", color(i))
.attr("d", area(sportData))
})
const conatinerWidth = d3.select("#container").node().getBoundingClientRect().width;
for(let i=0; i< Math.floor(conatinerWidth / (width + margin)) ; i++) {
const svg = d3.select('#scalesBottom')
.append('svg')
.attr("width", width)
.attr("height", 30)
.call(d3.axisBottom(x).tickValues([new Date(2004, 0, 1), new Date(2010, 0, 1),new Date(2017, 0, 1)]));
}
const conatinerHeight = d3.select("#container").node().getBoundingClientRect().height;
for(let i=0; i< Math.floor(conatinerHeight / width) ; i++) {
const svg = d3.select('#scalesLeft')
.append('svg')
.attr("width", 50)
.attr("height", width)
.append('g')
.attr('transform', 'translate(40)')
.call(d3.axisLeft(y).tickValues([0, 25, 50, 75,100]));
}
})
</script>
</body>
Raw
makeovermonday.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
Sport Year Percentage
Volleyball 2004 0
Volleyball 2005 1
Volleyball 2006 0
Volleyball 2007 0
Volleyball 2008 1
Volleyball 2013 0
Volleyball 2017 1
Track and field 2004 0
Track and field 2005 0
Track and field 2006 0
Track and field 2007 0
Track and field 2008 0
Track and field 2013 1
Track and field 2017 0
Fishing 2004 0
Fishing 2005 1
Fishing 2006 0
Fishing 2007 0
Fishing 2008 0
Fishing 2013 1
Fishing 2017 0
Swimming 2004 0
Swimming 2005 0
Swimming 2006 0
Swimming 2007 0
Swimming 2008 0
Swimming 2013 0
Swimming 2017 0
Bowling 2004 0
Bowling 2005 0
Bowling 2006 0
Bowling 2007 0
Bowling 2008 0
Bowling 2013 0
Bowling 2017 0
Boxing 2004 1
Boxing 2005 1
Boxing 2006 2
Boxing 2007 1
Boxing 2008 2
Boxing 2013 1
Boxing 2017 1
Gymnastics 2004 1
Gymnastics 2005 0
Gymnastics 2006 1
Gymnastics 2007 1
Gymnastics 2008 1
Gymnastics 2013 0
Gymnastics 2017 1
Motocross 2004 1
Motocross 2005 0
Motocross 2006 0
Motocross 2007 0
Motocross 2008 0
Motocross 2013 0
Motocross 2017 1
Rodeo 2004 1
Rodeo 2005 1
Rodeo 2006 0
Rodeo 2007 0
Rodeo 2008 0
Rodeo 2013 0
Rodeo 2017 0
Wrestling 2004 1
Wrestling 2005 1
Wrestling 2006 0
Wrestling 2007 1
Wrestling 2008 0
Wrestling 2013 0
Wrestling 2017 0
No opinion 2004 1
No opinion 2005 0
No opinion 2006 0
No opinion 2007 1
No opinion 2008 0
No opinion 2013 0
No opinion 2017 0
Soccer 2004 2
Soccer 2005 3
Soccer 2006 2
Soccer 2007 2
Soccer 2008 3
Soccer 2013 4
Soccer 2017 7
Tennis 2004 2
Tennis 2005 3
Tennis 2006 1
Tennis 2007 1
Tennis 2008 1
Tennis 2013 3
Tennis 2017 2
Golf 2004 2
Golf 2005 2
Golf 2006 3
Golf 2007 2
Golf 2008 2
Golf 2013 2
Golf 2017 1
Ice hockey 2004 3
Ice hockey 2005 4
Ice hockey 2006 2
Ice hockey 2007 4
Ice hockey 2008 4
Ice hockey 2013 3
Ice hockey 2017 4
Ice/Figure skating 2004 4
Ice/Figure skating 2005 3
Ice/Figure skating 2006 3
Ice/Figure skating 2007 2
Ice/Figure skating 2008 1
Ice/Figure skating 2013 1
Ice/Figure skating 2017 1
Other 2004 4
Other 2005 4
Other 2006 3
Other 2007 3
Other 2008 6
Other 2013 4
Other 2017 5
Auto racing 2004 5
Auto racing 2005 5
Auto racing 2006 4
Auto racing 2007 3
Auto racing 2008 3
Auto racing 2013 2
Auto racing 2017 2
Baseball 2004 10
Baseball 2005 12
Baseball 2006 11
Baseball 2007 13
Baseball 2008 10
Baseball 2013 14
Baseball 2017 9
None 2004 12
None 2005 13
None 2006 12
None 2007 12
None 2008 14
None 2013 11
None 2017 15
Basketball 2004 13
Basketball 2005 12
Basketball 2006 12
Basketball 2007 11
Basketball 2008 9
Basketball 2013 12
Basketball 2017 11
Football 2004 37
Football 2005 34
Football 2006 43
Football 2007 43
Football 2008 41
Football 2013 39
Football 2017 37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment