This is a bar chart showing counts of medals won by country at the 2012 summer Olympics, with one panel per type of medal. Made with Webcharts using the .multiply() method.
-
-
Save jwildfire/358aa7a7b233dc6e4a08931b527a60c9 to your computer and use it in GitHub Desktop.
Webcharts - Paneled Bar Chart
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
var settings = { | |
"max_width":"500", | |
"x":{ | |
"label":"Medal Count", | |
"type":"linear", | |
"column":"count", | |
domain: [0] | |
}, | |
"y":{ | |
"type":"ordinal", | |
"column":"Country", | |
"sort":"total-descending" | |
}, | |
"marks":[ | |
{ | |
"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){ | |
webCharts.multiply(stackedMedalChart, data, "type"); | |
}); |
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
<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> |
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
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