Skip to content

Instantly share code, notes, and snippets.

@chaotic-stump

chaotic-stump/.block

Last active July 16, 2019 12:38
Show Gist options
  • Save chaotic-stump/087486873d2ef4bae19ef1dcfa8c86c8 to your computer and use it in GitHub Desktop.
Save chaotic-stump/087486873d2ef4bae19ef1dcfa8c86c8 to your computer and use it in GitHub Desktop.
Download ZIP
horizontal barchart with tooltips
Raw
.block
license: mit
Raw
data.json
[
{"country": "United States", "value": 451 },
{"country": "India", "value": 417},
{"country": "China", "value": 362},
{"country": "Japan", "value": 336},
{"country": "France", "value": 166},
{"country": "Germany", "value": 164},
{"country": "Korea, Republic of", "value": 139},
{"country": "Canada", "value": 80},
{"country": "Turkey", "value": 79},
{"country": "South Korea", "value": 78},
{"country": "United Kingdom", "value": 64},
{"country": "USA", "value": 55},
{"country": "Taiwan Region", "value": 54},
{"country": "Brazil", "value": 52},
{"country": "Luxembourg", "value": 52},
{"country": "Sweden", "value": 52},
{"country": "Poland", "value": 46},
{"country": "Australia", "value": 38},
{"country": "Italy", "value": 38},
{"country": "Korea", "value": 36}
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 15px;
background-color: #24282b;
}
.bar {
fill: #86bc25;
}
.axis path,
.axis line {
fill: none;
stroke: none;
stroke-width: 1px;
shape-rendering: crispEdges;
}
text {
fill: #FFF;
font-size: 14px;
cursor: default;
}
.x path {
display: none;
}
.toolTip {
position: absolute;
display: none;
min-width: 80px;
height: auto;
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
padding: 14px;
text-align: center;
}
</style>
<svg width="650" height="880"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 20},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var tooltip = d3.select("body").append("div").attr("class", "toolTip");
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleBand().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("data.json", function(error, data) {
if (error) throw error;
data.sort(function(a, b) { return a.value - b.value; });
x.domain([0, d3.max(data, function(d) { return d.value; })]);
y.domain(data.map(function(d) { return d.country; })).padding(0.25);
g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", 0)
.attr("height", y.bandwidth())
.attr("y", function(d) { return y(d.country); })
.attr("width", function(d) { return x(d.value); })
.on("mousemove", function(d){
tooltip
.style("left", d3.event.pageX - 50 + "px")
.style("top", d3.event.pageY - 70 + "px")
.style("display", "inline-block")
.html((d.country) + "<br>" + (d.value));
})
.on("mouseout", function(d){ tooltip.style("display", "none");});
g.append("g")
.attr("class", "y axis")
.call(d3.axisRight(y));
g.selectAll(".y.axis .tick text")
.attr("x", 10)
.attr("height", 0)
.transition()
.duration(600)
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment