Skip to content

Instantly share code, notes, and snippets.

@dlwjiang

dlwjiang/README.md

Last active November 2, 2015 05:45
Show Gist options
  • Save dlwjiang/6d4d32c8c77c9de7be2e to your computer and use it in GitHub Desktop.
Save dlwjiang/6d4d32c8c77c9de7be2e to your computer and use it in GitHub Desktop.
Download ZIP
Hofstede Comparison
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.background path {
fill: none;
stroke: #ddd;
shape-rendering: crispEdges;
}
.foreground path {
fill: none;
/*stroke: steelblue;*/
opacity: 0.4;
/*stroke-width: 2px;*/
}
.hover-text {
font-size: 20px;
color: #888;
}
.selected {
stroke-width: 5px;
opacity: 0.9 !important;
}
.brush .extent {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangePoints([0, width], 1),
y = {};
var line = d3.svg.line(),
axis = d3.svg.axis().orient("left"),
background,
foreground,
names;
var color = d3.scale.category20();
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 + ")");
d3.csv("output.csv", function(error, countries) {
var ignoredColumns = ["Region", "IncomeGroup", "country", "ctr", '2014_Population'];
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(countries[0]).filter(function(d) {
return !_(ignoredColumns).contains(d) && (y[d] = d3.scale.linear()
.domain(d3.extent(countries, function(p) { return +p[d]; }))
.range([height, 0]));
}));
var myCountries = ['CHI', 'IND', 'USA', 'RUS'];
var tooltip = svg.append("text").attr('class', 'hover-text');
foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(countries)
.enter().append("path")
.attr('stroke', function (d,i) {
return color(d.Region);
})
.attr('stroke-width', 3)
.on('mouseover', function (d) {
tooltip.text(d.country)
.attr('opacity', 1)
.attr('x', d3.mouse(this)[0])
.attr('y', d3.mouse(this)[1]);
d3.select(this).attr('stroke-width', 5);
})
.on('mouseout', function (d) {
tooltip.attr("opacity", 0);
d3.select(this) .attr('stroke-width', 3);
})
.on('click', function (d) {
var thisPath = d3.select(this);
thisPath.classed('selected', !thisPath.classed('selected'));
})
.attr("d", path);
// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; });
// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function(d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); })
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
});
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
extents = actives.map(function(p) { return y[p].brush.extent(); });
foreground.style("display", function(d) {
return actives.every(function(p, i) {
return extents[i][0] <= d[p] && d[p] <= extents[i][1];
}) ? null : "none";
});
}
</script>
Raw
output.csv
ctr country Region 2014_Population IncomeGroup power_distance individualism masculinity uncertainty_avoidance long_term_orientation indulgence
CHN China East Asia & Pacific 1364270000 Upper middle income 80 20 66 30 87 24
IND India South Asia 1295291543 Lower middle income 77 48 56 40 51 26
USA U.S.A. North America 318857056 High income: OECD 40 91 62 46 26 68
BRA Brazil Latin America & Caribbean 206077898 Upper middle income 69 38 49 76 44 59
PAK Pakistan South Asia 185044286 Lower middle income 55 14 50 70 50 0
RUS Russia Europe & Central Asia 143819569 High income: nonOECD 93 39 36 95 81 20
JPN Japan East Asia & Pacific 127131800 High income: OECD 54 46 95 92 88 42
MEX Mexico Latin America & Caribbean 125385833 Upper middle income 81 30 69 82 24 97
TUR Turkey Europe & Central Asia 75932348 Upper middle income 66 37 45 85 46 49
THA Thailand East Asia & Pacific 67725979 Upper middle income 64 20 34 64 32 45
FRA France Europe & Central Asia 66206930 High income: OECD 68 71 43 86 63 48
GBR Great Britain Europe & Central Asia 64510376 High income: OECD 35 89 66 35 51 69
ITA Italy Europe & Central Asia 61336387 High income: OECD 50 76 70 75 61 30
KOR Korea South East Asia & Pacific 50423955 High income: OECD 60 18 39 85 100 29
COL Colombia Latin America & Caribbean 47791393 Upper middle income 67 13 64 80 13 83
ARG Argentina Latin America & Caribbean 42980026 High income: nonOECD 49 46 56 86 20 62
POL Poland Europe & Central Asia 37995529 High income: OECD 68 60 64 93 38 29
CAN Canada North America 35540419 High income: OECD 39 80 52 48 36 68
PER Peru Latin America & Caribbean 30973148 Upper middle income 64 16 42 87 25 46
VEN Venezuela Latin America & Caribbean 30693827 High income: nonOECD 81 12 73 76 16 100
CHL Chile Latin America & Caribbean 17762647 High income: OECD 63 23 28 86 31 68
BEL Belgium Europe & Central Asia 11225207 High income: OECD 65 75 54 94 82 57
CZE Czech Rep Europe & Central Asia 10510566 High income: OECD 57 58 57 74 70 29
HUN Hungary Europe & Central Asia 9861673 High income: OECD 46 80 88 82 58 31
SWE Sweden Europe & Central Asia 9689555 High income: OECD 31 71 5 29 53 78
AUT Austria Europe & Central Asia 8534492 High income: OECD 11 55 79 70 60 63
SLV Slovenia Latin America & Caribbean 6107706 Lower middle income 71 27 19 88 49 48
FIN Finland Europe & Central Asia 5463596 High income: OECD 33 63 26 59 38 57
NOR Norway Europe & Central Asia 5136475 High income: OECD 31 69 8 50 35 55
NZL New Zealand East Asia & Pacific 4509700 High income: OECD 22 79 58 49 33 75
EST Estonia Europe & Central Asia 1313645 High income: OECD 40 60 30 60 82 16
LUX Luxembourg Europe & Central Asia 556074 High income: OECD 40 60 50 70 64 56
MLT Malta Middle East & North Africa 427404 High income: nonOECD 56 59 47 96 47 66
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment