Skip to content

Instantly share code, notes, and snippets.

@diggetybo

diggetybo/d3.tip.v0.6.3.js

Last active July 9, 2016 14:44
Download ZIP
Dashboard 2
Raw
d3.tip.v0.6.3.js
// d3.tip
// Copyright (c) 2013 Justin Palmer
//
// Tooltips for d3.js SVG visualizations
// Public - contructs a new tooltip
//
// Returns a tip
d3.tip = function() {
var direction = d3_tip_direction,
offset = d3_tip_offset,
html = d3_tip_html,
node = initNode(),
svg = null,
point = null,
target = null
function tip(vis) {
svg = getSVGNode(vis)
point = svg.createSVGPoint()
document.body.appendChild(node)
}
// Public - show the tooltip on the screen
//
// Returns a tip
tip.show = function() {
var args = Array.prototype.slice.call(arguments)
if(args[args.length - 1] instanceof SVGElement) target = args.pop()
var content = html.apply(this, args),
poffset = offset.apply(this, args),
dir = direction.apply(this, args),
nodel = d3.select(node), i = 0,
coords
nodel.html(content)
.style({ opacity: 1, 'pointer-events': 'all' })
while(i--) nodel.classed(directions[i], false)
coords = direction_callbacks.get(dir).apply(this)
nodel.classed(dir, true).style({
top: (coords.top + poffset[0]) + 'px',
left: (coords.left + poffset[1]) + 'px'
})
return tip
}
// Public - hide the tooltip
//
// Returns a tip
tip.hide = function() {
nodel = d3.select(node)
nodel.style({ opacity: 0, 'pointer-events': 'none' })
return tip
}
// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value.
//
// n - name of the attribute
// v - value of the attribute
//
// Returns tip or attribute value
tip.attr = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
return d3.select(node).attr(n)
} else {
var args = Array.prototype.slice.call(arguments)
d3.selection.prototype.attr.apply(d3.select(node), args)
}
return tip
}
// Public: Proxy style calls to the d3 tip container. Sets or gets a style value.
//
// n - name of the property
// v - value of the property
//
// Returns tip or style property value
tip.style = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
return d3.select(node).style(n)
} else {
var args = Array.prototype.slice.call(arguments)
d3.selection.prototype.style.apply(d3.select(node), args)
}
return tip
}
// Public: Set or get the direction of the tooltip
//
// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
// sw(southwest), ne(northeast) or se(southeast)
//
// Returns tip or direction
tip.direction = function(v) {
if (!arguments.length) return direction
direction = v == null ? v : d3.functor(v)
return tip
}
// Public: Sets or gets the offset of the tip
//
// v - Array of [x, y] offset
//
// Returns offset or
tip.offset = function(v) {
if (!arguments.length) return offset
offset = v == null ? v : d3.functor(v)
return tip
}
// Public: sets or gets the html value of the tooltip
//
// v - String value of the tip
//
// Returns html value or tip
tip.html = function(v) {
if (!arguments.length) return html
html = v == null ? v : d3.functor(v)
return tip
}
function d3_tip_direction() { return 'n' }
function d3_tip_offset() { return [0, 0] }
function d3_tip_html() { return ' ' }
var direction_callbacks = d3.map({
n: direction_n,
s: direction_s,
e: direction_e,
w: direction_w,
nw: direction_nw,
ne: direction_ne,
sw: direction_sw,
se: direction_se
}),
directions = direction_callbacks.keys()
function direction_n() {
var bbox = getScreenBBox()
return {
top: bbox.n.y - node.offsetHeight,
left: bbox.n.x - node.offsetWidth / 2
}
}
function direction_s() {
var bbox = getScreenBBox()
return {
top: bbox.s.y,
left: bbox.s.x - node.offsetWidth / 2
}
}
function direction_e() {
var bbox = getScreenBBox()
return {
top: bbox.e.y - node.offsetHeight / 2,
left: bbox.e.x
}
}
function direction_w() {
var bbox = getScreenBBox()
return {
top: bbox.w.y - node.offsetHeight / 2,
left: bbox.w.x - node.offsetWidth
}
}
function direction_nw() {
var bbox = getScreenBBox()
return {
top: bbox.nw.y - node.offsetHeight,
left: bbox.nw.x - node.offsetWidth
}
}
function direction_ne() {
var bbox = getScreenBBox()
return {
top: bbox.ne.y - node.offsetHeight,
left: bbox.ne.x
}
}
function direction_sw() {
var bbox = getScreenBBox()
return {
top: bbox.sw.y,
left: bbox.sw.x - node.offsetWidth
}
}
function direction_se() {
var bbox = getScreenBBox()
return {
top: bbox.se.y,
left: bbox.e.x
}
}
function initNode() {
var node = d3.select(document.createElement('div'))
node.style({
position: 'absolute',
opacity: 0,
pointerEvents: 'none',
boxSizing: 'border-box'
})
return node.node()
}
function getSVGNode(el) {
el = el.node()
if(el.tagName.toLowerCase() == 'svg')
return el
return el.ownerSVGElement
}
// Private - gets the screen coordinates of a shape
//
// Given a shape on the screen, will return an SVGPoint for the directions
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
// sw(southwest).
//
// +-+-+
// | |
// + +
// | |
// +-+-+
//
// Returns an Object {n, s, e, w, nw, sw, ne, se}
function getScreenBBox() {
var targetel = target || d3.event.target,
bbox = {},
matrix = targetel.getScreenCTM(),
tbbox = targetel.getBBox(),
width = tbbox.width,
height = tbbox.height,
x = tbbox.x,
y = tbbox.y,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
point.x = x + scrollLeft
point.y = y + scrollTop
bbox.nw = point.matrixTransform(matrix)
point.x += width
bbox.ne = point.matrixTransform(matrix)
point.y += height
bbox.se = point.matrixTransform(matrix)
point.x -= width
bbox.sw = point.matrixTransform(matrix)
point.y -= height / 2
bbox.w = point.matrixTransform(matrix)
point.x += width
bbox.e = point.matrixTransform(matrix)
point.x -= width / 2
point.y -= height / 2
bbox.n = point.matrixTransform(matrix)
point.y += height
bbox.s = point.matrixTransform(matrix)
return bbox
}
return tip
};
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Bar Chart EXP</title>
<style>
body {
font: 24px play;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: white;
}
.bar:hover {
fill: #376c9b;
}
.x.axis path
.axis line {
fill: none;
stroke: #000;
}
.d3-tip {
line-height: 1;
font-weight: bold;
font-size: 36px;
padding: 12px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 36px;
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;
}
div#area2{
position:relative;
with: 1000px;
left: 950px;
top: -700px;
}
div#area3{
position:relative;
left: 950px;
top: -700px;
}
circle.hidden {
fill: none !important;
opacity: .8;
stroke: #376c9b;
}
</style>
<div id="area1"></div>
<div id="area2"></div>
<div id="area3"></div>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3.tip.v0.6.3.js"></script>
<script>
document.body.style.zoom="65%"
var margin = {top: 60, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 750 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
//.tickFormat(formatPercent);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-24, 0])
.html(function(d) {
return "<span style='color:white'>" + d.val_range + "</span>";
})
var svg = d3.select("#area1").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 + ")");
var gradient = svg.append('defs')
.append('linearGradient')
.attr('id', 'gradient')
.attr('x1', '0%')
.attr('y1', '0%')
.attr('x2', '0%')
.attr('y2', '100%')
.attr('spreadMethod', 'pad');
gradient.append('stop')
.attr('offset', '20%')
.attr('stop-color', '#90b2db')
.attr('stop-opacity', 1);
//#bed2ec
gradient.append('stop')
.attr('offset', '100%')
.attr('stop-color', '#cbd1da')
.attr('stop-opacity', 1);
svg.append('rect')
.attr('width', width)
.attr('height', height)
.style('fill','url(#gradient)');
svg.call(tip);
d3.tsv("tech_bar.tsv", type, function(error, data) {
x.domain(data.map(function(d) { return d.val_range; }));
y.domain([0, d3.max(data, function(d) { return +d.frequency; })+1]);
var x_bin = (data.map(function(d) { return d.bin}));
svg.append("g")
.attr("class", "x axis", 'fill')
.attr("transform", "translate(0," + height + ")", 'rotate(90)')
//.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.attr("fill","white")
.attr('font-weight','bold')
.text("Frequency");
//this is what I tried
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", 'bar')
.attr("x", function(d) { return x(d.val_range); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); })
.on('mouseover.tooltip', tip.show)
.on('mouseout', tip.hide)
.on('mouseover', function (d){
updateHighlightedBin(d.bin);
});
});
// This function gets called on hover, passing the hovered bin value.
function updateHighlightedBin(bin) {
console.log(bin);
// Update the highlighting on the bars of the bar chart.
svg.selectAll(".bar").classed("hidden", function(d) {
return d.bin !== bin;
});
// Update the highlighting on the circles of the scatter plot.
d3.selectAll(".circle-group").selectAll("circle").classed("hidden", function(d) {
return d.bin !== bin;
});
}
svg.append('text')
.text('Distribution')
.attr('transform', "translate(0," + -15 + ")")
.attr('font-size','64px')
.attr('font-family','orbitron');
function type(d) {
d.frequency = +d.frequency;
return d;
}
var url = "tech_qq.tsv";
d3.tsv(url, function (error, rawData) {
var data = rawData.map(function (d) {
return { X: +d.Theoretical, Y: +d.Series, bin: d.Bin }
});
var xExtents = d3.extent(data, function (d) { return +d.X; });
var yExtents = d3.extent(data, function (d) { return +d.Y; });
var maxExtent = d3.max(
xExtents.concat(yExtents), function (d) { return Math.abs(d); });
var graphWidth = 400, graphHeight = 250;
var radius = 5;
var margins = { left: 100, top: 50, right: 50, bottom: 50 };
var axisPadding = 3;
var totalHeight = graphHeight + margins.top + margins.bottom;
var totalWidth = graphWidth + margins.left + margins.right;
var scale = d3.scale.linear()
.domain([-maxExtent, maxExtent])
.range([0, graphWidth]);
var yscale = d3.scale.linear()
.domain([maxExtent, -maxExtent])
.range([0, graphHeight]);
var line2 = d3.svg.line()
.x(function(d) { return scale(d.X); })
.y(function(d) { return yscale(d.X); });
var svg = d3.select('#area2')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var yGridlinesAxis = d3.svg.axis().scale(yscale).orient("left");
var yGridlineNodes = svg.append('g')
.attr('transform', 'translate(' + (margins.left + graphWidth) + ',' + margins.top + ')')
.call(yGridlinesAxis.tickSize(graphWidth + axisPadding, 0, 0).tickFormat(""));
styleGridlineNodes(yGridlineNodes);
var xGridlinesAxis = d3.svg.axis().scale(scale).orient("bottom");
var xGridlineNodes = svg.append('g')
.attr('transform', 'translate(' + margins.left + ',' + (totalHeight - margins.bottom + axisPadding) + ')')
.call(xGridlinesAxis.tickSize(-graphHeight - axisPadding, 0, 0).tickFormat(""));
styleGridlineNodes(xGridlineNodes);
var xAxis = d3.svg.axis().scale(scale).orient("bottom");
var yAxis = d3.svg.axis().scale(yscale).orient("left");
var yAxisNodes = svg.append('g')
.attr('transform', 'translate(' + (margins.left - axisPadding) + ',' + margins.top + ')')
.call(yAxis);//.attr("class", "x axis");
styleAxisNodes(yAxisNodes);
var xAxisNodes = svg.append('g')
.attr('transform', 'translate(' + margins.left + ',' + (totalWidth - margins.bottom + axisPadding) + ')')
.call(xAxis);
styleAxisNodes(xAxisNodes);
var zoomBehavior = d3.behavior.zoom()
.scaleExtent([.1,10])
.on('zoom','onZoom');
svg.append('text')
.attr('transform', 'translate(' + margins.left + ',' + (margins.top*.5) + ')')
.text('Quantile - Quantile')
.attr('font-family','orbitron');
svg.append('path')
.datum(data)
.attr('d',line2)
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.attr('stroke', '#90b2db')
.attr('stroke-width', '3px');
var graphGroup = svg.append('g')
.attr('class', 'circle-group')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
graphGroup.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
cx: function (d) { return scale(d.X); },
cy: function (d) { return yscale(d.Y); },
r: radius,
fill: '#376c9b',
stroke: '#376c9b'
})
.on('mouseenter', function() {
d3.select(this).attr('fill', '#376c9b')
})
.on('mouseout', function() {
d3.select(this).attr('fill', 'none')
})
.call(zoomBehavior);
function onZoom() {
svg.attr('transform', 'translate('+ d3.event.translate +
')'+ 'scale('+ d3.event.scale +')');
}
var dragBehavior = d3.behavior.drag()
.on("drag", onDrag)
.on("dragstart", function () {
d3.event.sourceEvent.stopPropagation
();
});
function styleGridlineNodes(axisNodes) {
axisNodes.selectAll('.domain')
.attr({
fill: 'none',
stroke: 'none'
});
axisNodes.selectAll('.tick line')
.attr({
fill: 'none',
'stroke-width': 1,
stroke: 'lightgray'
});
}
});
function styleAxisNodes(axisNodes) {
axisNodes.selectAll('.domain')
.attr({
fill: 'none',
'stroke-width': 1,
stroke: 'none'
});
axisNodes.selectAll('.tick line')
.attr({
fill: 'none',
'stroke-width': 1,
stroke: 'none'
});
axisNodes.selectAll("text")
.attr({
fill: 'none',
'font-family': 'play'
});
}
//Graph 3
</script>
<script>
var url = "tech_sym.tsv";
d3.tsv(url, function (error, rawData) {
var data = rawData.map(function (d) {
return { X: +d.Symx, Y: +d.Symy, bin: d.Bin }
});
var xExtents = d3.extent(data, function (d) { return +d.X; });
var yExtents = d3.extent(data, function (d) { return +d.Y; });
var maxExtent = d3.max(
xExtents.concat(yExtents), function (d) { return Math.abs(d); });
var ymaxExtent = d3.max(yExtents);
var xminExtent = d3.min(xExtents);
var yminExtent = d3.min(yExtents);
var graphWidth = 400, graphHeight = 250;
var radius = 5;
var margins = { left: 100, top: 50, right: 50, bottom: 50 };
var axisPadding = 3;
var totalHeight = graphHeight + margins.top + margins.bottom;
var totalWidth = graphWidth + margins.left + margins.right;
var scale = d3.scale.linear()
.domain([xminExtent, maxExtent])
.range([0, graphWidth]);
var yscale = d3.scale.linear()
.domain([ymaxExtent, yminExtent])
.range([0, graphHeight]);
var line2 = d3.svg.line()
.x(function(d) { return scale(d.X); })
.y(function(d) { return yscale(d.X); });
var svg = d3.select('#area3')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var yGridlinesAxis = d3.svg.axis().scale(yscale).orient("left");
var yGridlineNodes = svg.append('g')
.attr('transform', 'translate(' + (margins.left + graphWidth) + ',' + margins.top + ')')
.call(yGridlinesAxis.tickSize(graphWidth + axisPadding, 0, 0).tickFormat("").ticks(8));
styleGridlineNodes(yGridlineNodes);
var xGridlinesAxis = d3.svg.axis().scale(scale).orient("bottom");
var xGridlineNodes = svg.append('g')
.attr('transform', 'translate(' + margins.left + ',' + (totalHeight - margins.bottom + axisPadding) + ')')
.call(xGridlinesAxis.tickSize(-graphHeight - axisPadding, 0, 0).tickFormat("").ticks(8));
styleGridlineNodes(xGridlineNodes);
var xAxis = d3.svg.axis().scale(scale).orient("bottom");
var yAxis = d3.svg.axis().scale(yscale).orient("left");
var yAxisNodes = svg.append('g')
.attr('transform', 'translate(' + (margins.left - axisPadding) + ',' + margins.top + ')')
.call(yAxis);//.attr("class", "x axis");
styleAxisNodes(yAxisNodes);
var xAxisNodes = svg.append('g')
.attr('transform', 'translate(' + margins.left + ',' + (totalWidth - margins.bottom + axisPadding) + ')')
.call(xAxis);
styleAxisNodes(xAxisNodes);
var zoomBehavior = d3.behavior.zoom()
.scaleExtent([.1,10])
.on('zoom','onZoom');
svg.append('text')
.attr('transform', 'translate(' + margins.left + ',' + (margins.top*.5) + ')')
.text('Symmetry')
.attr('font-family','orbitron');
svg.append('path')
.datum(data)
.attr('d',line2)
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.attr('stroke', '#90b2db')
.attr('stroke-width', '3px');
var graphGroup = svg.append('g')
.attr('class', 'circle-group')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
graphGroup.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
cx: function (d) { return scale(d.X); },
cy: function (d) { return yscale(d.Y); },
r: radius,
fill: '#376c9b',
stroke: '#376c9b'
})
.on('mouseenter', function() {
d3.select(this).attr('fill', '#376c9b')
})
.on('mouseout', function() {
d3.select(this).attr('fill', 'none')
})
.call(zoomBehavior);
function onZoom() {
svg.attr('transform', 'translate('+ d3.event.translate +
')'+ 'scale('+ d3.event.scale +')');
}
var dragBehavior = d3.behavior.drag()
.on("drag", onDrag)
.on("dragstart", function () {
d3.event.sourceEvent.stopPropagation
();
});
function styleGridlineNodes(axisNodes) {
axisNodes.selectAll('.domain')
.attr({
fill: 'none',
stroke: 'none'
});
axisNodes.selectAll('.tick line')
.attr({
fill: 'none',
'stroke-width': 1,
stroke: 'lightgray'
});
}
});
function styleAxisNodes(axisNodes) {
axisNodes.selectAll('.domain')
.attr({
fill: 'none',
'stroke-width': 1,
stroke: 'none'
});
axisNodes.selectAll('.tick line')
.attr({
fill: 'none',
'stroke-width': 1,
stroke: 'none'
});
axisNodes.selectAll("text")
.attr({
fill: 'none',
'font-family': 'play'
});
}
</script>
Raw
tech_bar.tsv
val_range frequency bin
-37.5 0 1
-32.5 0.16 2
-27.5 0.84 3
-22.5 1.88 4
-17.5 1.64 5
-12.5 2.92 6
-7.5 7.4 7
-2.5 8.68 8
2.5 9.4 9
7.5 11.24 10
12.5 9.48 11
17.5 6.8 12
22.5 1.56 13
27.5 0.96 14
32.5 0.04 15
37.5 0 16
Raw
tech_qq.tsv
Theoretical Series Bin
-31 -34.17852126 0
-25 -27.8167131 0
-24 -24.47767147 1
-21 -22.10142123 1
-17 -20.21503852 1
-16 -18.6285654 1
-13 -17.24558718 2
-12 -14.88645506 2
-12 -14.88645506 2
-11 -13.85059494 2
-10 -12.8853633 3
-9 -11.11919716 3
-9 -11.11919716 3
-8 -9.517854712 3
-8 -9.517854712 4
-7 -7.332338753 4
-7 -7.332338753 4
-7 -7.332338753 4
-6 -6.647190697 5
-5 -4.686731454 5
-5 -4.686731454 5
-5 -4.686731454 5
-4 -4.058574183 6
-3 -3.440426772 6
-1 -2.228826226 6
-1 -2.228826226 6
0 -1.042286156 7
0 -1.042286156 7
1 1.867784261 7
1 1.867784261 7
1 1.867784261 8
1 1.867784261 8
1 1.867784261 8
2 2.447547685 8
4 4.78922192 8
4 4.78922192 9
4 4.78922192 9
4 4.78922192 9
5 6.596676772 9
5 6.596676772 10
5 6.596676772 10
6 7.842981454 10
6 7.842981454 10
7 8.482651702 11
8 9.803440697 11
8 9.803440697 11
9 11.92079937 11
9 11.92079937 12
9 11.92079937 12
10 13.45736233 12
10 13.45736233 12
11 15.13435768 13
11 15.13435768 13
13 17.00684494 13
13 17.00684494 13
14 20.40183718 14
14 20.40183718 14
14 20.40183718 14
15 21.7848154 14
16 23.37128852 15
17 25.25767123 15
19 27.63392147 15
25 30.9729631 15
Raw
tech_sym.tsv
Symy Symx Bin
24 26 16
18 25 15
16 22 15
15 18 14
14 17 14
13 14 13
13 13 13
13 13 12
12 12 12
12 11 11
10 10 11
10 10 10
9 9 10
9 9 9
8 8 9
8 8 8
8 8 8
7 7 7
7 6 7
6 6 6
5 6 6
5 5 5
4 4 5
4 2 4
4 2 4
3 1 3
3 1 3
3 0 2
3 0 2
1 0 1
0 0 1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment