Skip to content

Instantly share code, notes, and snippets.

@jamesleesaunders

jamesleesaunders/README.md

Last active July 16, 2019 20:10
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 jamesleesaunders/e724157a7a387dcc08dd4ba80e48b72f to your computer and use it in GitHub Desktop.
Save jamesleesaunders/e724157a7a387dcc08dd4ba80e48b72f to your computer and use it in GitHub Desktop.
Download ZIP
d3-ez : Bubble Chart Example
Raw
README.md

d3-ez : Bubble Chart Example

Generated using d3-ez D3 Reusable Chart Library

A bubble chart is a type of chart that displays three dimensions of data. Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk’s xy location and the third through its size. Bubble charts can facilitate the understanding of social, economical, medical, and other scientific relationships. Bubble charts can be considered a variation of the scatter plot, in which the data points are replaced with bubbles.

FUNCTION: Comparison, Distribution, Trend over time

Credit: Data Viz Project

Raw
hans_rosling_2007.csv
Continent X Y Size Text
Europe 3.773569209 76.423 1.897504414 Albania
Europe 4.557825801 79.829 2.863526323 Austria
Europe 4.527534592 79.441 3.223697566 Belgium
Europe 3.871940459 74.852 2.133588058 Bosnia and Herzegovina
Europe 4.028603491 73.005 2.706077974 Bulgaria
Europe 4.164924283 75.748 2.119743381 Croatia
Europe 4.358568845 76.486 3.198240766 CzechRepublic
Europe 4.547509111 78.332 2.338401163 Denmark
Europe 4.521230746 79.313 2.288768228 Finland
Europe 4.483872692 80.657 7.815620001 France
Europe 4.507456116 79.406 9.077499435 Germany
Europe 4.439938891 79.483 3.27204676 Greece
Europe 4.255488258 73.338 3.155330094 Hungary
Europe 4.558478036 81.757 0.549482484 Iceland
Europe 4.6093382 78.885 2.027088059 Ireland
Europe 4.45590598 80.546 7.625466084 Italy
Europe 3.96632462 74.543 0.827487764 Montenegro
Europe 4.565823428 79.762 4.070701782 Netherlands
Europe 4.693350428 80.196 2.15126149 Norway
Europe 4.187236494 75.563 6.206306551 Poland
Europe 4.311958202 78.098 3.262335973 Portugal
Europe 4.033764447 72.476 4.719751688 Romania
Europe 3.990628941 74.002 3.185948054 Serbia
Europe 4.27133768 74.663 2.333988432 SlovakRepublic
Europe 4.411085053 77.926 1.417478395 Slovenia
Europe 4.459710005 80.941 6.359889229 Spain
Europe 4.529683726 80.884 3.005176867 Sweden
Europe 4.574105602 81.701 2.748574358 Switzerland
Europe 3.927281872 71.777 8.435558488 Turkey
Europe 4.521180743 79.425 7.795911621 UnitedKingdom
Oceania 4.537004721 81.235 4.52041768 Australia
Oceania 4.401142112 80.204 2.028736306 NewZealand
Africa 3.794025445 72.301 5.773492531 Algeria
Africa 3.680990656 42.731 3.52426957 Angola
Africa 3.158749829 56.728 2.842237499 Benin
Africa 4.099330156 50.728 1.280285515 Botswana
Africa 3.085302352 52.295 3.784997094 BurkinaFaso
Africa 2.633539847 49.58 2.896636843 Burundi
Africa 3.310075993 50.43 4.20669621 Cameroon
Africa 2.848814874 44.741 2.09022439 Central African Republic
Africa 3.231485831 50.651 3.199813588 Chad
Africa 2.993942045 65.152 0.84318444 Comoros
Africa 2.44334414 46.462 8.037832979 CongoDemRep
Africa 3.560212533 55.322 1.949515324 CongoRep
Africa 3.188858235 48.328 4.244220659 CotedIvoire
Africa 3.318581166 54.791 0.704538147 Djibouti
Africa 3.746726107 71.338 8.959048108 Egypt
Africa 4.084722439 51.579 0.742429121 Equatorial Guinea
Africa 2.807108319 58.04 2.215081263 Eritrea
Africa 2.839355834 52.947 8.74710735 Ethiopia
Africa 4.120787227 56.735 1.206178677 Gabon
Africa 2.876650606 59.448 1.299368693 Gambia
Africa 3.123070158 60.022 4.782607866 Ghana
Africa 2.974352412 56.007 3.154015536 Guinea
Africa 2.762852354 46.388 1.213276968 Guinea-Bissau
Africa 3.16531832 54.11 5.96742633 Kenya
Africa 3.195714676 42.592 1.418678611 Lesotho
Africa 2.617532227 45.678 1.787160317 Liberia
Africa 4.081257245 73.952 2.457013227 Libya
Africa 3.019020746 59.443 4.378087939 Madagascar
Africa 2.880441946 48.303 3.650627206 Malawi
Africa 3.018110038 54.467 3.468687792 Mali
Africa 3.256032217 64.164 1.808332104 Mauritania
Africa 4.03969131 72.801 1.118428362 Mauritius
Africa 3.582083284 71.164 5.810092512 Morocco
Africa 2.915761484 42.082 4.466727661 Mozambique
Africa 3.682240812 52.906 1.433555022 Namibia
Africa 2.792165302 56.867 3.590942077 Niger
Africa 3.304054572 46.859 11.62029105 Nigeria
Africa 3.884802303 76.442 0.893361069 Reunion
Africa 2.936055312 46.242 2.976673983 Rwanda
Africa 3.203695005 65.528 0.446742655 SaoTomeandPrincipe
Africa 3.233623514 63.062 3.502498108 Senegal
Africa 2.935779625 42.568 2.478822704 SierraLeone
Africa 2.966677143 48.159 3.019730617 Somalia
Africa 3.967063702 49.339 6.633085858 SouthAfrica
Africa 3.415373215 58.556 6.503301392 Sudan
Africa 3.654511584 39.613 1.064455729 Swaziland
Africa 3.044336748 52.517 6.175729916 Tanzania
Africa 2.94594592 58.42 2.38779794 Togo
Africa 3.850825247 73.923 3.205644709 Tunisia
Africa 3.02382022 51.542 5.400962692 Uganda
Africa 3.104217845 42.384 3.427248897 Zambia
Africa 2.671829157 43.487 3.508723842 Zimbabwe
Asia 2.988817645 43.828 5.647116344 Afghanistan
Asia 4.47415867 75.635 0.841767783 Bahrain
Asia 3.143406361 64.062 12.26573842 Bangladesh
Asia 3.233954737 59.723 3.759236359 Cambodia
Asia 3.695404167 72.961 36.31367643 China
Asia 4.599063673 82.208 2.642046934 HongKong
Asia 3.389557731 64.698 33.32260991 India
Asia 3.54908319 70.65 14.95148822 Indonesia
Asia 4.064671882 70.964 8.333880849 Iran
Asia 3.650410683 59.545 5.244009725 Iraq
Asia 4.406936436 80.745 2.535089545 Israel
Asia 4.500456971 82.603 11.29017148 Japan
Asia 3.655086659 72.535 2.460323759 Jordan
Asia 3.202233627 67.297 4.827186033 KoreaDemRep
Asia 4.368252284 78.623 7.003198555 KoreaRep
Asia 4.674925314 77.588 1.582895764 Kuwait
Asia 4.019575638 71.993 1.980221705 Lebanon
Asia 4.095227107 74.241 4.982096547 Malaysia
Asia 3.490769006 66.803 1.695325043 Mongolia
Asia 2.974971994 62.069 6.911004269 Myanmar
Asia 3.037967944 63.785 5.376038504 Nepal
Asia 4.348620106 75.64 1.790222612 Oman
Asia 3.415965675 65.483 13.01040418 Pakistan
Asia 3.503856165 71.688 9.543442094 Philippines
Asia 4.335554818 72.777 5.253669004 SaudiArabia
Asia 4.673418871 79.972 2.133778105 Singapore
Asia 3.598800944 72.396 4.51422629 SriLanka
Asia 3.621648563 74.143 4.394854605 Syria
Asia 4.458158378 78.4 4.813968633 Taiwan
Asia 3.872645457 70.616 8.066483063 Thailand
Asia 3.387670319 74.249 9.233761747 Vietnam
Asia 3.480775596 73.422 2.004577761 WestBankandGaza
Asia 3.358081474 62.698 4.712933587 YemenRep
Americas 4.106509772 75.32 6.348379872 Argentina
Americas 3.582306259 65.554 3.01979337 Bolivia
Americas 3.957406173 72.39 13.78443495 Brazil
Americas 4.560136692 80.653 5.778420286 Canada
Americas 4.119639814 78.553 4.035435664 Chile
Americas 3.845506111 72.889 6.650379688 Colombia
Americas 3.984304998 78.782 2.033195514 CostaRica
Americas 3.951730971 78.273 3.378903224 Cuba
Americas 3.779984063 72.235 3.052805595 DominicanRepublic
Americas 3.83716292 74.994 3.708865056 Ecuador
Americas 3.758029812 71.878 2.634328757 ElSalvador
Americas 3.7148367 70.259 3.545832483 Guatemala
Americas 3.079773348 60.916 2.915958505 Haiti
Americas 3.550024107 70.198 2.735646724 Honduras
Americas 3.864563304 72.567 1.667372784 Jamaica
Americas 4.078368898 76.195 10.42597195 Mexico
Americas 3.439225444 72.899 2.382300569 Nicaragua
Americas 3.991632954 75.537 1.80060351 Panama
Americas 3.620431573 71.752 2.582081912 Paraguay
Americas 3.869754059 71.421 5.354881605 Peru
Americas 4.286202848 78.746 1.985570699 PuertoRico
Americas 4.255477763 69.819 1.027914393 TrinidadandTobago
Americas 4.632979883 78.242 17.35338431 UnitedStates
Americas 4.025775264 76.384 1.856743386 Uruguay
Americas 4.057506568 73.747 5.107314559 Venezuela
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>d3-ez : Bubble Chart Example</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" />
</head>
<body>
<div id="chartholder"></div>
<br/>
<div>Value: <span id="message"></span></div>
<script type="text/javascript">
d3.csv("hans_rosling_2007.csv").then(function(csv) {
// Hans Rosling Data Source: https://plot.ly/~LeoDKFZ/0.embed
var colors = [d3.rgb(31, 119, 180), d3.rgb(255, 127, 14), d3.rgb(44, 160, 44), d3.rgb(214, 39, 40), d3.rgb(148, 103, 189)];
var chart = d3.ez.chart.bubbleChart().colors(colors).yAxisLabel("yScale");
var legend = d3.ez.component.legend().title("Continent");
var title = d3.ez.component.title().mainText("Hans Rosling Bubble Chart").subText("2007");
// Convert csv to d3-ez data format
// Rename keys
var tmp = csv.map(function(d) {
return { "key": d.Text, "value": d.Size, "x": d.X, "y": d.Y, "series": d.Continent };
});
// Nest Data
var data = d3.nest().key(function(d) {
return d.series;
}).entries(tmp);
// Create chart base
var myChart = d3.ez.base()
.width(750)
.height(400)
.chart(chart)
.legend(legend)
.title(title)
.on("customValueMouseOver", function(d) {
d3.select("#message").text(d.value);
})
.on("customSeriesClick", function(d) {
console.log(d);
});
d3.select('#chartholder')
.datum(data)
.call(myChart);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment