Skip to content

Instantly share code, notes, and snippets.

@svale

svale/data.csv

Last active November 7, 2017 10:29
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 svale/9d34f6da8b7aa9c3eb6ff9fa91dd4839 to your computer and use it in GitHub Desktop.
Save svale/9d34f6da8b7aa9c3eb6ff9fa91dd4839 to your computer and use it in GitHub Desktop.
Download ZIP
A Buble Chart with Axis
Raw
readme.md
Raw
data.csv
Rank CountryCode SecrecyJurisdiction FSI SecrecyScore GlobalScaleWeight Highlight
1 CHE Switzerland 1466.1 73 5.625 0
2 HKG Hong Kong 1259.4 72 3.842 0
3 USA USA 1254.8 60 19.603 0
4 SGP Singapore 1147.1 69 4.28 0
5 CYM Cayman Islands 1013.2 65 4.857 0
6 LUX Luxembourg 817 55 11.63 0
7 LBN Lebanon 760.2 79 0.377 1
8 DEU Germany 701.9 56 6.026 0
9 BHR Bahrain 471.4 74 0.164 0
10 ARE United Arab Emirates (Dubai) 440.8 77 0.085 0
11 MAC Macao 420.2 70 0.188 0
12 JPN Japan 418.4 58 1.062 0
13 PAN Panama 415.7 72 0.132 0
14 MHL Marshall Islands 405.6 79 0.053 0
15 GBR United Kingdom 380.2 41 17.394 1
16 JEY Jersey 354 65 0.216 0
17 GGY Guernsey 339.4 64 0.231 0
18 MYS Malaysia (Labuan) 338.7 75 0.05 0
19 TUR Turkey 320.9 64 0.182 0
20 CHN China 312.2 54 0.743 0
21 VGB British Virgin Islands 307.7 60 0.281 0
22 BRB Barbados 298.3 78 0.024 0
23 MUS Mauritius 297 72 0.049 0
24 AUT Austria 295.3 54 0.692 0
25 BHS Bahamas 273.1 79 0.017 0
26 BRA Brazil 263.7 52 0.678 0
27 MLT Malta 260.9 50 0.99 0
28 URY Uruguay 255.6 71 0.037 0
29 CAN Canada 251.8 46 1.785 0
30 RUS Russia 243.3 54 0.397 0
31 FRA France 241.9 43 3.104 0
32 IMN Isle of Man 228.6 64 0.068 0
33 LBR Liberia 218.2 83 0.006 0
34 BMU Bermuda 217.7 66 0.042 0
35 CYP Cyprus 213.9 50 0.518 0
36 LIE Liechtenstein 202.4 76 0.01 0
37 IRL Ireland 187.4 40 2.313 0
38 BEL Belgium 181.2 41 1.863 0
39 GTM Guatemala 177.2 76 0.007 0
40 ISR Israel 173.8 53 0.166 0
41 NLD Netherlands 168.4 48 0.322 0
42 CHL Chile 166.7 54 0.12 0
43 SAU Saudi Arabia 163.9 61 0.037 0
44 AUS Australia 148.1 43 0.586 0
45 IND India 148 39 1.487 0
46 PHL Philippines 146.1 63 0.02 0
47 VUT Vanuatu 142.8 87 0.001 0
48 GHA Ghana 139.2 67 0.01 0
49 KOR Korea 124.3 44 0.302 0
50 VIR US Virgin Islands 118.2 69 0.004 0
51 WSM Samoa 117.5 86 0.001 0
52 MEX Mexico 117.1 45 0.211 0
53 NOR Norway 110.7 38 0.731 1
54 NZL New Zealand 109.4 46 0.129 0
55 GIB Gibraltar 109.3 67 0.005 0
56 SWE Sweden 100.9 36 1.006 0
57 ABW Aruba 99.5 68 0.003 0
58 ITA Italy 98.7 35 1.218 0
59 LVA Latvia 92.8 45 0.113 0
60 BLZ Belize 92.5 79 0.001 0
61 ZAF South Africa 90.9 42 0.203 0
62 BWA Botswana 90.6 71 0.002 0
63 AIA Anguilla 89.4 69 0.002 0
64 VCT Saint Vincent & the Grenadines 79.7 78 0 0
65 ATG Antigua & Barbuda 79.6 81 0 0
66 ESP Spain 77.5 33 1.09 0
67 CRI Costa Rica 74.9 55 0.01 0
68 TCA Turks & Caicos Islands 72.5 71 0.001 0
69 KNA Saint Kitts & Nevis 68.4 78 0 0
70 CUW Curacao 67.8 68 0.001 0
71 ISL Iceland 67.1 46 0.035 0
72 SYC Seychelles 60.8 71 0 0
73 SVK Slovakia 60.1 50 0.011 0
74 MKD Macedonia 59.5 66 0.001 0
Raw
index.html
<html>
<head>
<style>
.chart text {
font-size: 11px;
font-family: sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #aaa;
shape-rendering: crispEdges;
}
.hidden {
display: none;
}
.legendSize circle {
fill: #00796B;
opacity: .8;
}
.legendTitle {
font-weight: 600;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.rawgit.com/susielu/d3-annotation/75ff6169/d3-annotation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
</head>
<body>
<div class="chart"></div>
<script>
var height = 400;
var width = 600;
var margin = {
global: 40,
top: 40,
right: 200,
bottom: 80,
left: 40
};
d3.csv("data.csv", function(d) {
return {
rank : +d.Rank,
CountryCode : d.CountryCode,
secrecyJurisdiction : d.SecrecyJurisdiction,
fsi: +d.FSI,
secrecyScore: +d.SecrecyScore,
globalScaleWeight: +d.GlobalScaleWeight,
y: +d.FSI,
x: +d.SecrecyScore,
color: +d.Highlight,
size:+ d.GlobalScaleWeight,
};
}, function(data) {
var labelY = 'FSI Value';
var labelX = 'Secrecy Score';
var svg = d3.select('.chart')
.append('svg')
.attr('class', 'chart')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + (margin.left) + "," + (margin.top) + ")");
var x = d3.scaleLinear()
.domain([d3.min(data, function (d) { return d.x; }), d3.max(data, function (d) { return d.x; })])
.range([0, width]);
var y = d3.scaleLinear()
.domain([d3.min(data, function (d) { return d.y; }), d3.max(data, function (d) { return d.y; })])
.range([height, 0])
var scale = d3.scaleSqrt()
.domain([d3.min(data, function (d) { return d.size; }), d3.max(data, function (d) { return d.size; })])
.range([3, 30]);
var opacity = d3.scaleSqrt()
.domain([d3.min(data, function (d) { return d.size; }), d3.max(data, function (d) { return d.size; })])
.range([.8, .6]);
var color = d3.scaleOrdinal()
.domain([0,1])
.range(['#00796B', '#FF6D00']);
// y axis and label
svg.append("g")
.attr("class", "axis axis-y")
.call(d3.axisLeft(y))
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 20)
.attr("y", 10)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(labelY);
// x axis and label
svg.append("g")
.attr("class", "axis axis-x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
svg.append("text")
.attr("x", width + 20)
.attr("y", margin.bottom - 10)
.attr("dy", ".71em")
.attr("transform", "translate(0," + (height + 40 - margin.bottom) + ")")
.style("text-anchor", "end")
.text(labelX);
// bubbles
var bubbles = svg.append("g")
.attr("class", "bubbles");
bubbles.selectAll("circle")
.data(data)
.enter()
.insert("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("opacity", function (d) { return opacity(d.size); })
.attr("r", function (d) { return scale(d.size); })
.style("fill", function (d) { return color(d.color); })
.on('mouseover', function (d, i) {fade(d.rank, .25); }) //use rank as unique id
.on('mouseout', function (d, i) {fadeOut(d.rank); })
.transition('load')
.delay(function (d, i) { return x(d.x) - y(d.y); })
.duration(3000)
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) {return y(d.y); })
.ease(d3.easeBack);
// Annotations
var annotations = [];
data.forEach(function(d) {
annotations.push({
id: d.rank,
note: {
title: '#'+ d.rank+ ': ' + d.secrecyJurisdiction,
label: "FSI Value " + d.fsi,
wrap: 100
},
x: x(d.x),
y: y(d.y),
// data: {
// x: d.x,
// y: d.y
// },
dy: 30,
dx: 35,
color: color(d.color),
className: 'r' + d.rank + ((d.rank < '11' || d.color > 0) ? ' top10' : ''),
});
});
var makeAnnotations = d3.annotation()
.type(d3.annotationCallout)
//accessors & accessorsInverse not needed
//if using x, y in annotations JSON
// .accessors({
// x: d => x(d.x),
// y: d => y(d.y)
// })
.annotations(annotations)
svg.append("g")
.attr("class", "annotation-group")
.call(makeAnnotations)
svg.selectAll(".annotation:not(.top10)")
.classed('hidden', true)
svg.selectAll(".annotation.top10")
.style('opacity', 0)
.transition()
.duration(3300)
.style('opacity', 1);
// legends
var legendSize = d3.legendSize()
.shape('circle')
.shapePadding(10)
.labelOffset(10)
.title("Global Scale Weight")
.orient('vertical')
.scale(scale);
svg.append("g")
.attr("class", "legendSize")
.attr("transform", "translate(" + (width+90) + "," + 0 + ")")
.call(legendSize);
var legendColor = d3.legendColor()
.shape('circle')
.shapeRadius(5)
.labelOffset(10)
.title("Highlights")
.cellFilter(function(d){ return d.data > 0})
.labels(['Normal','Highlights'])
.scale(color);
svg.append("g")
.attr("class", "legendOrdinal")
.attr("transform", "translate(" + (width+90) + "," + 270 + ")")
.call(legendColor);
// helpers
function fade(rank, opacity) {
svg.selectAll(".bubbles circle")
.filter(function (d) {
return d.rank != rank;
})
.transition()
.style("opacity", opacity);
d3.selectAll(".annotation")
.classed('hidden', true)
d3.select(".r"+rank)
.classed('hidden', false)
}
function fadeOut() {
svg.selectAll("circle")
.transition()
.style("opacity", function (d) { opacity(d.size); });
// and, ...clumsy!
d3.selectAll(".annotation.top10")
.classed('hidden', false)
d3.selectAll(".annotation:not(.top10)")
.classed('hidden', true)
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment