Skip to content

Instantly share code, notes, and snippets.

@1Cr18Ni9
Last active February 20, 2020 03:07
Show Gist options
  • Save 1Cr18Ni9/bfadecc96183c48d13b7b90bcf358a61 to your computer and use it in GitHub Desktop.
Save 1Cr18Ni9/bfadecc96183c48d13b7b90bcf358a61 to your computer and use it in GitHub Desktop.
BarChart with ToolTip
license: mit
country income
France 14
Russia 20
Japan 25
Korea 30
Argentina 28
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.xGroup line, .xGroup path{
visibility: hidden;
}
.tooltip{
position : absolute;
text-align : center;
max-width : 70px;
max-height : 30px;
padding : 8px;
border : none;
border-radius : 8px;
margin-top : -30px;
font : 10px sans-serif;
background : black;
color : white;
pointer-events: none;
}
</style>
</head>
<body>
<div id='container'></div>
<script id='codeExcute'>
// This exmaple is enlighten by http://bl.ocks.org/mbostock/1087001
var url = 'data_income.csv'
d3.csv(url, function(error, data){
data.forEach(function (d) {
d.income = +d.income;
});
// console.log(data)
var margin = {top: 65, bottom: 50, left: 50, right: 30}, axisPadding = 10;
var Width = 500, Height = 300;
var svgWidth = Width + margin.left + margin.right,
svgHeight = Height + margin.top + margin.bottom;
var maxIncome = d3.max(data, function(d){ return d.income; });
// define scales and axises
var xScale = d3.scale.ordinal()
.domain(data.map(function(d){ return d.country; }))
.rangeBands([0, Width], 0.1);
var yScale = d3.scale.linear()
.domain([0, maxIncome])
.range([0, Height]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(xScale)
.tickSize(0,0)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(yScale.copy().domain([maxIncome, 0]))
.tickSize(6,0)
.ticks(5)
.orient('left');
// create a svg canvas
var svg = d3.select('#container')
.append('svg')
.attr({width: svgWidth, height: svgHeight})
// Drawing for axises
var xGroup = svg.append('g')
.attr('class', 'xGroup')
.attr('transform', 'translate(' + [margin.left, margin.top + Height + axisPadding] + ')');
xGroup.call(xAxis);
styleAxis(xGroup);
var yGroup = svg.append('g')
.attr('class', 'yGroup')
.attr('transform', 'translate(' + [margin.left - axisPadding, margin.top] + ')');
yGroup.call(yAxis);
styleAxis(yGroup);
// Label layer
var label = svg.append('g')
.attr('transform', 'translate(' + [margin.left - axisPadding, margin.top] + ')');
label.append('text')
.text('Income [%]')
.attr('transform', 'rotate(-90)')
.attr({
'text-anchor': 'start',
x: -75,
y: 20,
})
label.append('text')
.text('Bar Chart with Tooltip')
.attr('transform', 'translate(' + [Width / 2, - margin.top / 2] + ')')
.attr({
'text-anchor': 'middle',
'font-size': '1.5em',
fill: 'steelblue',
});
// Drawing for graph body
var graph = svg.append('g')
.attr('class', 'graph')
.attr('transform', 'translate(' + [margin.left, margin.top + Height] + ')');
var bars = graph.selectAll('g')
.data(data)
.enter()
.append('g')
.attr('transform', function(d,i){ return 'translate(' + [xScale(d.country), -1 * yScale(d.income)] + ')'; });
bars.append('rect')
.each(function(d,i){
d3.select(this).attr({
fill: color.range()[i],
width: xScale.rangeBand(),
height: yScale(d.income),
})
})
.on('mouseover', mouseover)
.on('mousemove', mousemove)
.on('mouseout', mouseout);
bars.append('text')
.text(function(d){ return d.income; })
.each(function(d,i){
d3.select(this).attr({
fill: color.range()[i],
stroke: 'none',
x: xScale.rangeBand() / 2,
y: -5,
'text-anchor': 'middle',
});
})
// tooltips
var div = d3.select('#container').append('div')
.attr('class', 'tooltip')
.style('display', 'none');
function mouseover(){
div.style('display', 'inline');
}
function mousemove(){
var d = d3.select(this).data()[0]
div
.html(d.country + '<hr/>' + d.income)
.style('left', (d3.event.pageX - 34) + 'px')
.style('top', (d3.event.pageY - 12) + 'px');
}
function mouseout(){
div.style('display', 'none');
}
})
function styleAxis(axis){
// style path
axis.select('.domain').attr({
fill: 'none',
stroke: '#888',
'stroke-width': 1
});
// style tick
axis.selectAll('.tick line').attr({
stroke: '#000',
'stroke-width': 1,
})
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment