Skip to content

Instantly share code, notes, and snippets.

@cflavs

cflavs/index.html

Created May 16, 2016 01:38
Show Gist options
  • Save cflavs/fd147d6d6646d6a2cabc7cda321715d9 to your computer and use it in GitHub Desktop.
Save cflavs/fd147d6d6646d6a2cabc7cda321715d9 to your computer and use it in GitHub Desktop.
Download ZIP
Tooltip
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
body {
font: 10px sans-serif;
}
.bar rect {
fill: steelblue;
}
.bar text.value {
fill: white;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.tooltip{
background-color:rgba(255,255,255,0.8);
margin: 5px;
padding: 5px;
font-size: 13px;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;}
</style>
<body>
<div>
<button type="button" class="btn btn-warning" id = "ano2009">2007</button>
<button type="button" class="btn btn-warning" id="propertyCategory">2008</button>
<button type="button" class="btn btn-warning" id="vacant">2009</button>
<button type="button" class="btn btn-warning" id="totalUnits">2010</button>
</div>
<script>
//from http://bl.ocks.org/rveciana/5181105
d3.helper = {};
d3.helper.tooltip = function(accessor){
return function(selection){
var tooltipDiv;
var bodyNode = d3.select('body').node();
selection.on("mouseover", function(d, i){
// Clean up lost tooltips
d3.select('body').selectAll('div.tooltip').remove();
// Append tooltip
tooltipDiv = d3.select('body').append('div').attr('class', 'tooltip');
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
.style('top', (absoluteMousePos[1] - 15)+'px')
.style('position', 'absolute')
.style('z-index', 1001);
// Add text using the accessor function
var tooltipText = accessor(d, i) || '';
// Crop text arbitrarily
//tooltipDiv.style('width', function(d, i){return (tooltipText.length > 80) ? '300px' : null;})
// .html(tooltipText);
})
.on('mousemove', function(d, i) {
// Move tooltip
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
.style('top', (absoluteMousePos[1] - 15)+'px');
var tooltipText = accessor(d, i) || '';
tooltipDiv.html(tooltipText);
})
.on("mouseout", function(d, i){
// Remove tooltip
tooltipDiv.remove();
});
};
};
</script>
<script type="text/javascript">
var width = 560;
var height = 530;
var m = [30, 10, 10, 120],
w = width - m[1] - m[3],
h = height - m[0] - m[2];
var data;
var bar;
var format = d3.format("2.%");
var x = d3.scale.linear().range([0, w]),
y = d3.scale.ordinal().rangeRoundBands([0, h], .1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
//if(d3.select("#propertyCategory"))
return "No: <strong>" + d.propertyName + "</strong> foram registrados <strong>" + d.vacant + "</strong>";
})
var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
svg.call(tip);
function dashboard(data) {
// Parse numbers, and sort by value.
data.forEach(function(d) { d.ano2009 = +d.ano2009; });
// data.sort(function(a, b) { return b.ano2009 - a.ano2009; });
dataset=data;
// Set the scale domain.
x.domain([0, d3.max(data, function(d) { return d.ano2009; })]);
y.domain(data.map(function(d) { return d.propertyName; }));
bar = svg.selectAll("g.bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(0," + y(d.propertyName) + ")"; });
bar.append("rect")
.attr("width", function(d) { return x(d.ano2009); })
.attr("height", y.rangeBand());
svg.selectAll('rect')
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
bar.append("text")
.attr("class", "value")
.attr("x", function(d) { return x(d.ano2009); })
.attr("y", y.rangeBand() / 2)
.attr("dx", -3)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(function(d) { return format(d.ano2009); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + m[1] + "," + (height - m[1]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
}
d3.select("#propertyCategory")
.on("click", function() {
//Update scale domain
x.domain([ 0, d3.max(dataset, function(d) {
return +d.propertyCategory;
}) ]);
svg.selectAll('rect')
.data(dataset)
.transition()
.duration(1000)
.attr("width", function(d) {
return x(d.propertyCategory);
})
svg.selectAll("text")
.data(dataset)
.transition()
.duration(1000)
.attr("x", function(d) { return x(d.propertyCategory); })
.attr("y", y.rangeBand() / 2)
.attr("text-anchor", "end")
.text(function(d) { return format(d.propertyCategory); });
//Update axis
d3.select(".x.axis")
.transition()
.call(xAxis);
//Update axis
d3.select(".y.axis")
.transition()
.call(yAxis);
});
d3.select("#vacant")
.on("click", function() {
//Update scale domain
x.domain([ 0, d3.max(dataset, function(d) {
return +d.vacant;
}) ]);
svg.selectAll('rect')
.data(dataset)
.transition()
.duration(1000)
.attr("width", function(d) {
return x(d.vacant);
})
svg.selectAll("text")
.data(dataset)
.transition()
.duration(1000)
.attr("x", function(d) { return x(d.vacant); })
.attr("y", y.rangeBand() / 2)
.attr("text-anchor", "end")
.text(function(d) { return format(d.vacant); });
//Update axis
d3.select(".x.axis")
.transition()
.call(xAxis);
//Update axis
d3.select(".y.axis")
.transition()
.call(yAxis);
});
d3.select("#totalUnits")
.on("click", function() {
//Update scale domain
x.domain([ 0, d3.max(dataset, function(d) {
return +d.totalUnits;
}) ]);
svg.selectAll('rect')
.data(dataset)
.transition()
.duration(1000)
.attr("width", function(d) {
return x(d.totalUnits);
})
svg.selectAll("text")
.data(dataset)
.transition()
.duration(1000)
.attr("x", function(d) { return x(d.totalUnits); })
.attr("y", y.rangeBand() / 2)
.attr("text-anchor", "end")
.text(function(d) { return format(d.totalUnits); });
//Update axis
d3.select(".x.axis")
.transition()
.call(xAxis);
//Update axis
d3.select(".y.axis")
.transition()
.call(yAxis);
});
d3.select("#ano2009")
.on("click", function() {
//Update scale domain
x.domain([ 0, d3.max(dataset, function(d) {
return +d.ano2009;
}) ]);
svg.selectAll('rect')
.data(dataset)
.transition()
.duration(1000)
.attr("width", function(d) {
return x(d.ano2009);
})
svg.selectAll("text")
.data(dataset)
.transition()
.duration(1000)
.attr("x", function(d) { return x(d.ano2009); })
.attr("y", y.rangeBand() / 2)
.attr("text-anchor", "end")
.text(function(d) { return format(d.ano2009); });
//Update axis
d3.select(".x.axis")
.transition()
.call(xAxis);
//Update axis
d3.select(".y.axis")
.transition()
.call(yAxis);
});
</script>
<script>
var freqData=[
{propertyName:'Acre',ano2009:75.90,propertyCategory:77.80,vacant: 79.20,totalUnits:78.90}
,{propertyName:'Alagoas',ano2009:71.70,propertyCategory:74.20,vacant: 71.10,totalUnits:71.80}
,{propertyName:'Amazonas',ano2009:77.90,propertyCategory:74.60,vacant:71.40,totalUnits:81.70}
,{propertyName:'Amapá',ano2009:70.00,propertyCategory:69.50,vacant: 70.60,totalUnits:73.60}
,{propertyName:'Bahia',ano2009:68.70,propertyCategory:68.00,vacant: 69.70,totalUnits:71.90}
,{propertyName:'Ceará',ano2009:76.70,propertyCategory:78.50,vacant: 79.90,totalUnits:82.20}
,{propertyName:'Distrito Federal',ano2009:71.10,propertyCategory:82.00,vacant: 76.60,totalUnits:74.80}
,{propertyName:'Espírito Santo',ano2009:77.20,propertyCategory:77.60,vacant:74.80,totalUnits:79.30}
,{propertyName:'Goiás',ano2009:73.60,propertyCategory:73.50,vacant: 74.70,totalUnits:76.10}
,{propertyName:'Maranhão',ano2009:75.00,propertyCategory:76.30,vacant: 78.50,totalUnits:76.80}
,{propertyName:'Minas Gerais',ano2009:75.60,propertyCategory:76.90,vacant: 78.40,totalUnits:77.80}
,{propertyName:'Mato Grosso do Sul',ano2009:72.90,propertyCategory:72.30,vacant: 71.70,totalUnits:71.10}
,{propertyName:'Mato Grosso',ano2009:73.30,propertyCategory:71.20,vacant: 72.60,totalUnits:71.60}
,{propertyName:'Pará',ano2009:63.30,propertyCategory:68.20,vacant: 68.10,totalUnits:68.90}
,{propertyName:'Paraíba',ano2009:72.80,propertyCategory:72.30,vacant: 74.10,totalUnits:74.30}
,{propertyName:'Pernambuco',ano2009:70.10,propertyCategory:73.10,vacant: 77.00,totalUnits:80.20}
,{propertyName:'Piauí',ano2009:70.60,propertyCategory:69.00,vacant: 71.30,totalUnits:74.10}
,{propertyName:'Paraná',ano2009:79.70,propertyCategory:78.20,vacant: 80.60,totalUnits:81.60}
,{propertyName:'Rio de Janeiro',ano2009:67.30,propertyCategory:65.80,vacant: 66.60,totalUnits:68.30}
,{propertyName:'Rio Grande do Norte',ano2009:68.30,propertyCategory:68.10,vacant: 71.10,totalUnits:76.10}
,{propertyName:'Rondônia',ano2009:74.40,propertyCategory:75.20,vacant: 76.10,totalUnits:76.70}
,{propertyName:'Roraima',ano2009:79.50,propertyCategory:79.50,vacant: 81.60,totalUnits:82.20}
,{propertyName:'Rio Grande do Sul',ano2009:68.00,propertyCategory:68.00,vacant: 68.30,totalUnits:69.10}
,{propertyName:'Santa Catarina',ano2009:83.80,propertyCategory:83.80,vacant: 83.70,totalUnits:82.50}
,{propertyName:'Seará',ano2009:71.50,propertyCategory:65.40,vacant: 69.00,totalUnits:70.40}
,{propertyName:'São Paulo',ano2009:79.80,propertyCategory:82.00,vacant: 81.70,totalUnits:82.90}
,{propertyName:'Tocantis',ano2009:80.1,propertyCategory:80.20,vacant: 81.20,totalUnits:82.10}
];
dashboard(freqData);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment