Skip to content

Instantly share code, notes, and snippets.

@nbryant
Last active September 14, 2015 13:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nbryant/3e41a7bed4b921e3ba2c to your computer and use it in GitHub Desktop.
Save nbryant/3e41a7bed4b921e3ba2c to your computer and use it in GitHub Desktop.
Webcharts - Simple Bar Chart

This is a simple bar chart showing counts of medals won by country at the 2012 summer Olympics. Made with Webcharts.

<html lang="en">
<title>Webcharts - Simple 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="simpleBarChart.js" defer></script>
</html>
Country Total
US 104
China 88
Russia 82
UK 65
Germany 44
Japan 38
Australia 35
France 34
Italy 28
South Korea 28
Netherlands 20
Ukraine 20
Canada 18
Brazil 17
Hungary 17
Spain 17
Cuba 14
Kazakhstan 13
New Zealand 13
Belarus 12
Iran 12
Jamaica 12
Kenya 11
Azerbaijan 10
Czech Republic 10
Poland 10
Denmark 9
Romania 9
Colombia 8
Sweden 8
Ethiopia 7
Georgia 7
Mexico 7
Croatia 6
India 6
North Korea 6
South Africa 6
Ireland 5
Lithuania 5
Mongolia 5
Turkey 5
Argentina 4
Norway 4
Serbia 4
Slovakia 4
Slovenia 4
Switzerland 4
Trinidad and Tobago 4
Uzbekistan 4
Armenia 3
Belgium 3
Finland 3
Thailand 3
Tunisia 3
Bulgaria 2
Dominican Republic 2
Egypt 2
Estonia 2
Greece 2
Indonesia 2
Latvia 2
Malaysia 2
Moldova 2
Puerto Rico 2
Qatar 2
Singapore 2
Taiwan 2
Afghanistan 1
Algeria 1
Bahamas 1
Bahrain 1
Botswana 1
Cyprus 1
Gabon 1
Grenada 1
Guatemala 1
Hong Kong 1
Kuwait 1
Montenegro 1
Morocco 1
Portugal 1
Saudi Arabia 1
Tajikistan 1
Uganda 1
Venezuela 1
Albania 0
American Samoa 0
Andorra 0
Angola 0
Antigua and Barbuda 0
Aruba 0
Austria 0
Bangladesh 0
Barbados 0
Belize 0
Benin 0
Bermuda 0
Bhutan 0
Bolivia 0
Bosnia and Herzegovina 0
British Virgin Islands 0
Brunei 0
Burkina Faso 0
Burma 0
Burundi 0
Cambodia 0
Cameroon 0
Cape Verde 0
Cayman Islands 0
Central African Republic 0
Chad 0
Chile 0
Comoros 0
Congo-Brazzaville 0
Cook Islands 0
Costa Rica 0
Democratic Republic of Congo 0
Djibouti 0
Dominica 0
East Timor 0
Ecuador 0
El Salvador 0
Equatorial Guinea 0
Eritrea 0
Fiji 0
Gambia 0
Ghana 0
Guam 0
Guinea 0
Guinea-Bissau 0
Guyana 0
Haiti 0
Honduras 0
Iceland 0
Iraq 0
Israel 0
Ivory Coast 0
Jordan 0
Kiribati 0
Kyrgyzstan 0
Laos 0
Lebanon 0
Lesotho 0
Liberia 0
Libya 0
Liechtenstein 0
Luxembourg 0
Macedonia 0
Madagascar 0
Malawi 0
Maldives 0
Mali 0
Malta 0
Marshall Islands 0
Mauritania 0
Mauritius 0
Micronesia 0
Monaco 0
Mozambique 0
Namibia 0
Nauru 0
Nepal 0
Nicaragua 0
Niger 0
Nigeria 0
Oman 0
Pakistan 0
Palau 0
Palestine 0
Panama 0
Papua New Guinea 0
Paraguay 0
Peru 0
Philippines 0
Rwanda 0
Saint Kitts and Nevis 0
Saint Lucia 0
Saint Vincent and the Grenadines 0
Samoa 0
San Marino 0
Sao Tome and Principe 0
Senegal 0
Seychelles 0
Sierra Leone 0
Solomon Islands 0
Somalia 0
Sri Lanka 0
Sudan 0
Surinam 0
Swaziland 0
Syria 0
Tanzania 0
Togo 0
Tonga 0
Turkmenistan 0
Tuvalu 0
United Arab Emirates 0
Uruguay 0
Vanuatu 0
Vietnam 0
Virgin Islands 0
Yemen 0
Zambia 0
Zimbabwe 0
var settings = {
"max_width":"500",
"x":{
"label":"Total",
"type":"linear",
"column":"Total",
domain: [0, null]
},
"y":{
"type":"ordinal",
"column":"Country",
"sort":"total-descending"
},
"marks":[
{
"type":"bar",
"per":["Country"],
"tooltip":"[Country] won [Total] medals"
}
],
"gridlines":"x"
};
var medalChart = webCharts.createChart('body', settings);
d3.csv('OlympicMedals2012.csv', function(error, data){
//just keep the countries with the 10 most medals
var sub = data.filter(function(d,i){
return i <= 11;
});
medalChart.init(sub);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment