Skip to content

Instantly share code, notes, and snippets.

@curran

curran/README.md

Last active Jan 2, 2020
Embed
What would you like to do?
Religions of Largest 20 Countries
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
.axis text {
font-family: 'Open Sans', sans-serif;
font-size: 13pt;
}
.axis .label {
font-size: 20pt;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.color-legend text {
font-family: 'Open Sans', sans-serif;
font-size: 19pt;
}
.d3-tip {
font-family: 'Open Sans', sans-serif;
font-size: 19pt;
line-height: 1;
padding: 7px;
background: black;
color: lightgray;
border-radius: 20px;
}
</style>
</head>
<body>
<script>
var outerWidth = 960;
var outerHeight = 500;
var margin = { left: 123, top: 40, right: 30, bottom: 47 };
var barPadding = 0.2;
var xColumn = "population";
var yColumn = "country";
var colorColumn = "religion";
var layerColumn = colorColumn;
var hoveredColorValue;
var hoveredStrokeColor = "black";
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// This is the layer where the bars are drawn.
var baseBarLayer = g.append("g");
// This layer contains a semi-transparent overlay
// that fades out the base bars.
var overlayRect = g.append("g")
.append("rect")
.attr("width", innerWidth)
.attr("height", innerHeight)
.attr("fill", "none")
.style("pointer-events", "none");
// This contains the subset of bars rendered on top
// when you hover over the entries in the color legend.
var foregroundBarLayer = g.append("g");
var xAxisG = g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")");
var yAxisG = g.append("g")
.attr("class", "y axis");
var colorLegendG = g.append("g")
.attr("class", "color-legend")
.attr("transform", "translate(596, 0)");
var xScale = d3.scale.linear().range([0, innerWidth]);
var yScale = d3.scale.ordinal().rangeBands([innerHeight, 0], barPadding);
var colorScale = d3.scale.category10();
var tipNumberFormat = d3.format(",");
var tip = d3.tip()
.attr("class", "d3-tip")
.offset([-10, 0])
.html(function(d) {
return [
d[colorColumn],
" in ",
d[yColumn],
": ",
tipNumberFormat(d[xColumn])
].join("");
});
g.call(tip);
// Use a modified SI formatter that uses "B" for Billion.
var siFormat = d3.format("s");
var customTickFormat = function (d){
return siFormat(d).replace("G", "B");
};
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.ticks(5)
.tickFormat(customTickFormat)
.outerTickSize(0);
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.outerTickSize(0);
var colorLegend = d3.legend.color()
.scale(colorScale)
.shapePadding(6.24)
.shapeWidth(25)
.shapeHeight(25)
.labelOffset(5);
function render(data){
var nested = d3.nest()
.key(function (d){ return d[layerColumn]; })
.entries(data);
var stack = d3.layout.stack()
.y(function (d){ return d[xColumn]; })
.values(function (d){ return d.values; });
var layers = stack(nested.reverse()).reverse();
xScale.domain([
0,
d3.max(layers, function (layer){
return d3.max(layer.values, function (d){
return d.y0 + d.y;
});
})
]);
yScale.domain(layers[0].values.map(function (d){
return d[yColumn];
}));
colorScale.domain(layers.map(function (layer){
return layer.key;
}));
xAxisG.call(xAxis);
yAxisG.call(yAxis);
renderBars(baseBarLayer, layers);
if(hoveredColorValue){
setOverlayTransparency(0.7);
renderBars(foregroundBarLayer, layers.filter(function (layer){
return layer.key === hoveredColorValue;
}));
} else {
setOverlayTransparency(0.0);
renderBars(foregroundBarLayer, []);
}
colorLegendG.call(colorLegend);
// Move the text down a bit.
colorLegendG.selectAll("text").attr("y", 4);
listenForHover(colorLegendG.selectAll("rect"), data);
listenForHover(colorLegendG.selectAll("text"), data);
}
function renderBars(g, layers){
var layerGs = g.selectAll(".layer").data(layers);
layerGs.enter().append("g").attr("class", "layer");
layerGs.exit().remove();
layerGs.style("fill", function (d){
return colorScale(d.key);
});
var bars = layerGs.selectAll("rect").data(function (d){
return d.values;
});
bars.enter().append("rect")
.on("mouseover", function(d){
tip.show(d);
// Fix the issue where the tip goes off the screen.
d3.select(".d3-tip").style("left", "100px");
})
.on("mouseout", tip.hide);
bars.exit().remove();
bars
.attr("x", function (d){ return xScale(d.y0); })
.attr("y", function (d){ return yScale(d[yColumn]); })
.attr("width", function (d){ return xScale(d.y); })
.attr("height", yScale.rangeBand());
}
function listenForHover(selection, data){
selection
.on("mouseover", function (d){
hoveredColorValue = d;
render(data);
})
.on("mouseout", function (d){
hoveredColorValue = null;
render(data);
})
.style("cursor", "pointer");
}
function setOverlayTransparency(alpha){
overlayRect
.transition().duration(400)
.attr("fill", "rgba(255, 255, 255, " + alpha + ")");
}
function type(d){
d.population = +d.population;
return d;
}
d3.csv("religionByCountryTop20.csv", type, render);
</script>
</body>
</html>
country religion population
China Christian 68410000
China Muslim 24690000
China Unaffiliated 700680000
China Hindu 20000
China Buddhist 244130000
China Folk Religions 294320000
China Other Religions 9080000
China Jewish 0
India Christian 31130000
India Muslim 176190000
India Unaffiliated 870000
India Hindu 973750000
India Buddhist 9250000
India Folk Religions 5840000
India Other Religions 27560000
India Jewish 10000
United States Christian 243060000
United States Muslim 2770000
United States Unaffiliated 50980000
United States Hindu 1790000
United States Buddhist 3570000
United States Folk Religions 630000
United States Other Religions 1900000
United States Jewish 5690000
Indonesia Christian 23660000
Indonesia Muslim 209120000
Indonesia Unaffiliated 240000
Indonesia Hindu 4050000
Indonesia Buddhist 1720000
Indonesia Folk Religions 750000
Indonesia Other Religions 340000
Indonesia Jewish 0
Brazil Christian 173300000
Brazil Muslim 40000
Brazil Unaffiliated 15410000
Brazil Hindu 0
Brazil Buddhist 250000
Brazil Folk Religions 5540000
Brazil Other Religions 300000
Brazil Jewish 110000
Pakistan Christian 2750000
Pakistan Muslim 167410000
Pakistan Unaffiliated 20000
Pakistan Hindu 3330000
Pakistan Buddhist 20000
Pakistan Folk Religions 30000
Pakistan Other Religions 20000
Pakistan Jewish 0
Nigeria Christian 78050000
Nigeria Muslim 77300000
Nigeria Unaffiliated 680000
Nigeria Hindu 0
Nigeria Buddhist 10000
Nigeria Folk Religions 2290000
Nigeria Other Religions 90000
Nigeria Jewish 0
Bangladesh Christian 280000
Bangladesh Muslim 133540000
Bangladesh Unaffiliated 80000
Bangladesh Hindu 13520000
Bangladesh Buddhist 720000
Bangladesh Folk Religions 520000
Bangladesh Other Religions 30000
Bangladesh Jewish 0
Russia Christian 104750000
Russia Muslim 14290000
Russia Unaffiliated 23180000
Russia Hindu 30000
Russia Buddhist 170000
Russia Folk Religions 310000
Russia Other Religions 0
Russia Jewish 230000
Japan Christian 2030000
Japan Muslim 200000
Japan Unaffiliated 72120000
Japan Hindu 30000
Japan Buddhist 45820000
Japan Folk Religions 450000
Japan Other Religions 5890000
Japan Jewish 0
Mexico Christian 107910000
Mexico Muslim 0
Mexico Unaffiliated 5330000
Mexico Hindu 0
Mexico Buddhist 0
Mexico Folk Religions 70000
Mexico Other Religions 20000
Mexico Jewish 70000
Philippines Christian 86370000
Philippines Muslim 5150000
Philippines Unaffiliated 90000
Philippines Hindu 0
Philippines Buddhist 80000
Philippines Folk Religions 1430000
Philippines Other Religions 130000
Philippines Jewish 0
Vietnam Christian 7170000
Vietnam Muslim 160000
Vietnam Unaffiliated 26040000
Vietnam Hindu 0
Vietnam Buddhist 14380000
Vietnam Folk Religions 39750000
Vietnam Other Religions 350000
Vietnam Jewish 0
Ethiopia Christian 52070000
Ethiopia Muslim 28680000
Ethiopia Unaffiliated 50000
Ethiopia Hindu 0
Ethiopia Buddhist 0
Ethiopia Folk Religions 2130000
Ethiopia Other Religions 0
Ethiopia Jewish 0
Germany Christian 56540000
Germany Muslim 4760000
Germany Unaffiliated 20350000
Germany Hindu 80000
Germany Buddhist 210000
Germany Folk Religions 40000
Germany Other Religions 100000
Germany Jewish 230000
Egypt Christian 4120000
Egypt Muslim 76990000
Egypt Unaffiliated 0
Egypt Hindu 0
Egypt Buddhist 0
Egypt Folk Religions 0
Egypt Other Religions 0
Egypt Jewish 0
Iran Christian 110000
Iran Muslim 73570000
Iran Unaffiliated 110000
Iran Hindu 20000
Iran Buddhist 0
Iran Folk Religions 0
Iran Other Religions 150000
Iran Jewish 0
Turkey Christian 320000
Turkey Muslim 71330000
Turkey Unaffiliated 860000
Turkey Hindu 0
Turkey Buddhist 40000
Turkey Folk Religions 20000
Turkey Other Religions 150000
Turkey Jewish 20000
Thailand Christian 600000
Thailand Muslim 3770000
Thailand Unaffiliated 190000
Thailand Hindu 70000
Thailand Buddhist 64420000
Thailand Folk Religions 60000
Thailand Other Religions 0
Thailand Jewish 0
DR Congo Christian 63210000
DR Congo Muslim 970000
DR Congo Unaffiliated 1170000
DR Congo Hindu 30000
DR Congo Buddhist 0
DR Congo Folk Religions 490000
DR Congo Other Religions 100000
DR Congo Jewish 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment