Skip to content

Instantly share code, notes, and snippets.

@nbryant

nbryant/OlympicMedals2012_long.csv

Last active December 8, 2016 14:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nbryant/6666920f02bade11fe05 to your computer and use it in GitHub Desktop.
Save nbryant/6666920f02bade11fe05 to your computer and use it in GitHub Desktop.
Download ZIP
Webcharts - Grouped Bar Chart
Raw
README.md

This is a bar chart showing counts of medals won by country at the 2012 summer Olympics. Bars are split out by medal type. Made with Webcharts.

Raw
groupedBarChart.js
var settings = {
"max_width":"500",
"x":{
"label":"Medal Count",
"type":"linear",
"column":"count",
domain: [0]
},
"y":{
"type":"ordinal",
"column":"Country",
"sort":"total-descending"
},
"marks":[
{
"arrange":"grouped",
"split":"type",
"type":"bar",
"per":["Country"],
"attributes": {"fill-opacity": 0.8}
}
],
"gridlines":"x",
"color_by":"type",
colors: ["#8c7853", "#c0c0c0", "#e5c100"],
legend: {
label: 'Medal Type',
order: ['Bronze', 'Silver', 'Gold']
}
};
var stackedMedalChart = webCharts.createChart('body', settings);
d3.csv('OlympicMedals2012_long.csv', function(error, data){
stackedMedalChart.init(data);
});
Raw
index.html
<html lang="en">
<title>Webcharts - Grouped Bar Chart</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://cdn.rawgit.com/RhoInc/Webcharts/master/css/webcharts.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src='https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js'></script>
</head>
<body style="padding:1em;">
</body>
<script src="groupedBarChart.js" defer></script>
</html>
Raw
OlympicMedals2012_long.csv
Country type count
US Gold 46
China Gold 38
Russia Gold 24
UK Gold 29
Germany Gold 11
Japan Gold 7
Australia Gold 7
France Gold 11
Italy Gold 8
South Korea Gold 13
US Silver 29
China Silver 27
Russia Silver 26
UK Silver 17
Germany Silver 19
Japan Silver 14
Australia Silver 16
France Silver 11
Italy Silver 9
South Korea Silver 8
US Bronze 29
China Bronze 23
Russia Bronze 32
UK Bronze 19
Germany Bronze 14
Japan Bronze 17
Australia Bronze 12
France Bronze 12
Italy Bronze 11
South Korea Bronze 7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment