Skip to content

Instantly share code, notes, and snippets.

@junkwhinger

junkwhinger/data_test.tsv

Last active August 29, 2015 14:25
Show Gist options
  • Save junkwhinger/def7ab509bfe116653b2 to your computer and use it in GitHub Desktop.
Save junkwhinger/def7ab509bfe116653b2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data_test.tsv
Country Australia Austria Belgium Canada Chile Czech Republic Denmark Estonia Finland France Germany Greece Hungary Iceland Ireland Israel Italy Japan Korea Luxembourg Mexico Netherlands New Zealand Norway Poland Portugal Slovak Republic Slovenia Spain Sweden Switzerland Turkey United Kingdom United States
Australia 100 126 125 115 179 211 99 178 112 125 134 161 239 111 116 112 134 130 147 113 194 123 108 92 243 170 200 167 149 114 77 214 102 123
Austria 79 100 99 91 142 167 78 141 89 99 106 127 189 88 92 89 106 103 117 89 153 97 85 73 193 134 159 132 118 90 61 169 81 98
Belgium 80 101 100 92 144 170 79 143 90 101 108 129 192 89 93 90 108 105 118 91 156 98 87 74 195 136 161 134 119 91 62 171 82 99
Canada 87 110 109 100 156 184 86 155 98 109 117 140 208 97 101 98 117 114 128 98 169 107 94 80 212 148 175 145 130 99 67 186 89 107
Chile 56 70 69 64 100 118 55 99 62 70 75 90 133 62 64 62 75 73 82 63 108 68 60 51 136 94 112 93 83 63 43 119 57 69
Czech Republic 47 60 59 54 85 100 47 84 53 59 64 76 113 52 55 53 64 62 70 53 92 58 51 43 115 80 95 79 70 54 36 101 48 58
Denmark 101 128 126 116 182 214 100 180 114 127 136 163 242 112 117 113 136 132 149 114 196 124 109 93 247 172 203 169 151 115 78 216 103 125
Estonia 56 71 70 65 101 119 56 100 63 71 76 90 135 62 65 63 76 73 83 64 109 69 61 52 137 95 113 94 84 64 43 120 57 69
Finland 89 113 111 102 160 189 88 158 100 112 120 143 213 99 103 100 120 116 131 101 173 109 96 82 217 151 179 149 133 101 68 191 91 110
France 80 101 99 91 143 168 79 142 89 100 107 128 191 88 92 89 107 104 117 90 154 98 86 73 194 135 160 133 118 91 61 170 81 98
Germany 74 94 93 85 134 157 73 132 83 93 100 120 178 82 86 83 100 97 110 84 144 91 80 68 181 126 149 124 111 85 57 159 76 92
Greece 62 79 78 71 112 132 61 111 70 78 84 100 149 69 72 70 84 81 92 70 121 76 67 57 151 106 125 104 93 71 48 133 63 77
Hungary 42 53 52 48 75 88 41 74 47 52 56 67 100 46 48 47 56 55 62 47 81 51 45 38 102 71 84 70 62 48 32 89 43 52
Iceland 90 114 112 104 162 191 89 160 101 113 121 145 216 100 104 101 121 118 133 102 175 111 97 83 220 153 181 150 134 103 69 193 92 111
Ireland 86 109 108 99 155 183 85 153 97 108 116 139 207 96 100 97 116 113 127 98 168 106 93 79 210 147 173 144 128 98 66 185 88 107
Israel 89 113 111 102 160 189 88 159 100 112 120 143 214 99 103 100 120 116 132 101 173 109 96 82 217 151 179 149 133 102 68 191 91 110
Italy 74 94 93 85 133 157 73 132 83 93 100 120 178 82 86 83 100 97 110 84 144 91 80 68 181 126 149 124 111 85 57 159 76 92
Japan 77 97 96 88 138 162 76 136 86 96 103 123 183 85 89 86 103 100 113 87 149 94 83 70 187 130 154 128 114 87 59 164 78 95
Korea 68 86 85 78 122 143 67 121 76 85 91 109 162 75 79 76 91 89 100 77 132 83 73 62 165 115 136 113 101 77 52 145 69 84
Luxembourg 89 112 110 102 159 187 87 157 99 111 119 142 212 98 102 99 119 115 130 100 172 109 95 81 216 150 177 148 132 101 68 189 90 109
Mexico 52 65 64 59 93 109 51 92 58 65 69 83 123 57 60 58 69 67 76 58 100 63 56 47 126 87 103 86 77 59 40 110 52 64
Netherlands 82 103 102 94 146 172 81 145 91 102 110 131 195 90 94 91 110 106 120 92 158 100 88 75 198 138 163 136 121 93 63 174 83 101
New Zealand 93 117 116 106 166 196 92 165 104 116 125 149 222 103 107 104 125 121 137 105 180 114 100 85 226 157 186 154 138 105 71 198 94 114
Norway 109 138 136 125 196 230 108 194 122 137 146 175 261 121 126 122 146 142 160 123 211 134 118 100 265 185 218 182 162 124 84 233 111 134
Poland 41 52 51 47 74 87 41 73 46 52 55 66 98 46 48 46 55 54 61 46 80 50 44 38 100 70 82 68 61 47 32 88 42 51
Portugal 59 74 74 68 106 125 58 105 66 74 79 95 141 65 68 66 79 77 87 67 114 72 64 54 144 100 118 98 88 67 45 126 60 73
Slovak Republic 50 63 62 57 90 105 49 89 56 63 67 80 119 55 58 56 67 65 73 56 97 61 54 46 121 85 100 83 74 57 38 107 51 62
Slovenia 60 76 75 69 108 127 59 107 67 75 81 96 144 67 69 67 81 78 88 68 116 74 65 55 146 102 120 100 89 68 46 128 61 74
Spain 67 85 84 77 121 142 66 119 75 84 90 108 161 75 78 75 90 88 99 76 130 82 73 62 164 114 135 112 100 76 52 144 68 83
Sweden 88 111 110 101 158 186 87 156 99 110 118 141 210 97 102 98 118 115 130 99 170 108 95 81 214 149 176 146 131 100 67 188 89 108
Switzerland 130 165 162 150 234 276 129 232 146 164 175 209 312 145 151 146 175 170 192 147 253 160 141 120 317 221 261 217 194 148 100 279 133 161
Turkey 47 59 58 54 84 99 46 83 52 59 63 75 112 52 54 52 63 61 69 53 91 57 50 43 114 79 94 78 70 53 36 100 48 58
United Kingdom 98 124 123 113 176 208 97 175 110 123 132 158 235 109 114 110 132 128 145 111 191 121 106 90 239 167 197 164 146 112 75 210 100 121
United States 81 102 101 93 145 171 80 144 91 102 109 130 194 90 94 91 109 106 119 92 157 99 87 74 197 137 162 135 121 92 62 173 82 100
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<div id="container" margin-left="10px">
<h2>Monthly Comparative Price Level (May 2015)</h2>
<h4>choose the currency below and see how much it can purchase in various countries</h4>
<div class="form-group">
<div class="dropdown dropdown-scroll" id="dropdownMenu2">
<button class="btn btn-default" data-toggle="dropdown"> <span id="dropdown_title2">Select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Australia</a></li>
<li><a tabindex="-1" href="#">Austria</a></li>
<li><a tabindex="-1" href="#">Belgium</a></li>
<li><a tabindex="-1" href="#">Canada</a></li>
<li><a tabindex="-1" href="#">Chile</a></li>
<li><a tabindex="-1" href="#">Czech Republic</a></li>
<li><a tabindex="-1" href="#">Denmark</a></li>
<li><a tabindex="-1" href="#">Estonia</a></li>
<li><a tabindex="-1" href="#">Finland</a></li>
<li><a tabindex="-1" href="#">France</a></li>
<li><a tabindex="-1" href="#">Germany</a></li>
<li><a tabindex="-1" href="#">Greece</a></li>
<li><a tabindex="-1" href="#">Hungary</a></li>
<li><a tabindex="-1" href="#">Iceland</a></li>
<li><a tabindex="-1" href="#">Ireland</a></li>
<li><a tabindex="-1" href="#">Israel</a></li>
<li><a tabindex="-1" href="#">Italy</a></li>
<li><a tabindex="-1" href="#">Japan</a></li>
<li><a tabindex="-1" href="#">Korea</a></li>
<li><a tabindex="-1" href="#">Luxembourg</a></li>
<li><a tabindex="-1" href="#">Mexico</a></li>
<li><a tabindex="-1" href="#">Netherlands</a></li>
<li><a tabindex="-1" href="#">New Zealand</a></li>
<li><a tabindex="-1" href="#">Norway</a></li>
<li><a tabindex="-1" href="#">Poland</a></li>
<li><a tabindex="-1" href="#">Portugal</a></li>
<li><a tabindex="-1" href="#">Slovak Republic</a></li>
<li><a tabindex="-1" href="#">Slovenia</a></li>
<li><a tabindex="-1" href="#">Spain</a></li>
<li><a tabindex="-1" href="#">Sweden</a></li>
<li><a tabindex="-1" href="#">Turkey</a></li>
<li><a tabindex="-1" href="#">United Kingdom</a></li>
<li><a tabindex="-1" href="#">United States</a></li>
</ul>
</div>
</div>
<button class="btn btn-primary" id="SendRequest">Refresh</button>
</div>
</body>
</html>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
width: 960px;
height: 600px;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill-opacity: .9;
}
.x.axis path {
display: none;
}
label {
position: absolute;
top: 10px;
right: 10px;
}
#container {
margin-left: 10px;
margin-top: 10px;
}
.form-group {
float: left;
margin-right: 10px;
}
.dropdown.dropdown-scroll .dropdown-menu {
max-height: 200px;
width: 60px;
overflow: auto;
}
.tooltip{ background-color:rgba(68,136,187,0.5);;
margin: 10px;
height: 50px;
width: 150px;
padding-left: 10px;
padding-top: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
</style>
<script src="https://code.jquery.com/jquery-2.0.2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var country_index = {
"Australia": 0,
"Austria": 1,
"Belgium": 2,
"Canada": 3,
"Chile": 4,
"Czech Republic": 5,
"Denmark": 6,
"Estonia": 7,
"Finland": 8,
"France": 9,
"Germany": 10,
"Greece": 11,
"Hungary": 12,
"Iceland": 13,
"Ireland": 14,
"Israel": 15,
"Italy": 16,
"Japan": 17,
"Korea": 18,
"Luxembourg": 19,
"Mexico": 20,
"Netherlands": 21,
"New Zealand": 22,
"Norway": 23,
"Poland": 24,
"Portugal": 25,
"Slovak Republic": 26,
"Slovenia": 27,
"Spain": 28,
"Sweden": 29,
"Switzerland": 30,
"Turkey": 31,
"United Kingdom": 32,
"United States": 33
}
var margin = {top: 0, right: 20, bottom: 30, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var color = d3.scale.category20();
var barcolor = d3.scale.linear().range(["blue","red"])
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], .2, 1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
d3.tsv("data_test.tsv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function (key) {
return (key !== "Country");
}));
var data2 = color.domain().map(function (name) {
return {
currency: name,
values: data.map(function (d) {
return {
country: d.Country,
frequency: +d[name]
}
})}})
var selected_country_index = country_index['Australia']
var currency = data2[selected_country_index].currency
var data = data2[0].values
x.domain([0, d3.max(data, function(d) { return d.frequency;})]);
y.domain(data.map(function(d) { return d.country; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("id", function(d){ return "id_" + d.country})
.attr("y", function(d) { return y(d.country); })
.attr("height", y.rangeBand())
.attr("x", 0)
.attr("width", function(d) { return x(d.frequency); })
.attr("fill", function(d) {
rect_id = d3.select(this)[0][0]['id']
currency_id = "id_" + currency
//console.log(rect_id)
//console.log("--"+currency_id)
if (rect_id == currency_id) {
return "red"
} else {
return "rgba(20,20,20,.2"
}
})
.on("mouseover", function(d){
tooltip.style("visibility", "visible");
var selectedBar = (d3.select(this)[0][0]['id']).split("_")[1];
var selectedBarValue = d.frequency;
var more_or_less = "undecided"
if (selectedBarValue / 100 > 1) {
more_or_less = "Using " + currency + "'s currency, You pay " + formatPercent(selectedBarValue / 100 - 1) + " more in " + selectedBar + "."
} else if (selectedBarValue / 100 == 1) {
more_or_less = "Using " + currency + "'s currency in " + selectedBar + ", You pay the same as you You have to pay in " + currency + "."
} else {
more_or_less = "Using " + currency + "'s currency, You pay " + formatPercent(Math.abs(selectedBarValue / 100 - 1)) + " less in " + selectedBar + "."
}
tooltip.text(more_or_less)
})
.on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
function change() {
var y0 = y.domain(data.sort(function(a,b) { return b.frequency - a.frequency;})
.map(function(d) { return d.country;})).copy();
svg.selectAll(".bar").sort(function(a,b) { return y0(a.country) - y0(b.country);});
var transition = svg.transition().duration(750),
delay = function(d,i) { return i * 20; };
transition.selectAll(".bar")
.delay(delay)
.attr("y", function(d) {return y0(d.country);});
transition.select(".y.axis")
.call(yAxis)
.selectAll("g")
.delay(delay)
}
setTimeout(change, 300);
});
$("#dropdownMenu2").on("click", "li a", function () {
var platform = $(this).text();
$("#dropdown_title2").html(platform);
});
$("#SendRequest").click(function () {
var platform = $("#dropdown_title2").html();
var isValid = (platform !== 'Select')
if (!isValid) {
alert('Please select currency');
} else {
//console.log(platform)
//console.log(country_index[platform])
d3.tsv("data_test.tsv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function (key) {
return (key !== "Country");
}));
var data2 = color.domain().map(function (name) {
return {
currency: name,
values: data.map(function (d) {
return {
country: d.Country,
frequency: +d[name]
}
})}})
var selected_country_index = country_index[platform]
var currency = data2[selected_country_index].currency
console.log(currency)
data = data2[country_index[platform]].values
x.domain([0, d3.max(data, function(d) { return d.frequency;})]);
y.domain(data.map(function(d) { return d.country; }));
svg.selectAll(".bar")
.data(data);
svg.selectAll(".bar")
.attr("id", function(d){ return "id_" + d.country})
.attr("y", function(d) { return y(d.country); })
.attr("height", y.rangeBand())
.attr("x", 0)
.transition(2000)
.attr("width", function(d) { return x(d.frequency); })
.attr("fill", function(d) {
rect_id = d3.select(this)[0][0]['id']
currency_id = "id_" + currency
//console.log(rect_id)
//console.log("--"+currency_id)
if (rect_id == currency_id) {
return "red"
} else {
return "rgba(20,20,20,.2"
}
});
svg.selectAll(".bar")
.on("mouseover", function(d){
tooltip.style("visibility", "visible");
var selectedBar = (d3.select(this)[0][0]['id']).split("_")[1];
var selectedBarValue = d.frequency;
var more_or_less = "undecided"
if (selectedBarValue / 100 > 1) {
more_or_less = "Using " + currency + "'s currency, You pay " + formatPercent(selectedBarValue / 100 - 1) + " more in " + selectedBar + "."
} else if (selectedBarValue / 100 == 1) {
more_or_less = "Using " + currency + "'s currency in " + selectedBar + ", You pay the same as you You have to pay in " + currency + "."
} else {
more_or_less = "Using " + currency + "'s currency, You pay " + formatPercent(Math.abs(selectedBarValue / 100 - 1)) + " less in " + selectedBar + "."
}
tooltip.text(more_or_less)
})
.on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
function change() {
var y0 = y.domain(data.sort(function(a,b) { return b.frequency - a.frequency;})
.map(function(d) { return d.country;})).copy();
svg.selectAll(".bar").sort(function(a,b) { return y0(a.country) - y0(b.country);});
var transition = svg.transition().duration(750),
delay = function(d,i) { return i * 50; };
transition.selectAll(".bar")
.delay(delay)
.attr("y", function(d) {return y0(d.country);});
transition.select(".y.axis")
.call(yAxis)
.selectAll("g")
.delay(delay)
};
setTimeout(change, 300);
svg.select(".x.axis")
.call(xAxis)
})
}})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment