hanjoes · March 7, 2016 03:01
diff --git a/.block b/.block
 height: 1100
 scrolling: yes
diff --git a/d3.tip.v0.6.3.js b/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
 };
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Earthquakes</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <script src="d3.tip.v0.6.3.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  <style>

  .graticule {
    fill: none;
    stroke: #777;
    stroke-opacity: .5;
    stroke-width: .5px;
  }

  .land {
    fill: #eee;
    opacity: 0.7;
  }

  .boundary {
    fill: none;
    stroke: #fff;
    stroke-width: .5px;
  }

  circle.point {
    opacity: 0.5;
  }

  circle.point:hover {
    fill:blue;
    opacity: 1;
  }

  .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;
  }

  body {
    font-family: 'Montserrat', sans-serif;
    font-size: 12pt;
  }

  </style>
 </head>
 <body>
  <h2> Earthquake Data off Fiji</h2>
  <p>
    The data set give the locations of 1000 seismic events of MB > 4.0. The events occurred in a cube near Fiji since 1964.
  </p>



  <script>
  var width = 960,
  height = 960;

  var projection = d3.geo.mercator()
  .scale(650)
  .rotate([180, 0])
  .precision(.1);

  var path = d3.geo.path()
  .projection(projection);

  var graticule = d3.geo.graticule();

  var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

  var colorScale = d3.scale.linear()
  .range([255, 0]);

  var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Magnitude:</strong> <span style='color:red'>" + d.mag + "</span>"
    + "<strong> Depth:</strong> <span style='color:red'>" + d.depth + "km</span>"
  })

  svg.append("path")
  .datum(graticule)
  .attr("class", "graticule")
  .attr("d", path);

  svg.call(tip);

  d3.json("world-50m.json", function(error, world) {
    if (error) throw error;

    svg.insert("path", ".graticule")
    .datum(topojson.feature(world, world.objects.land))
    .attr("class", "land")
    .attr("d", path);

    svg.insert("path", ".graticule")
    .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
    .attr("class", "boundary")
    .attr("d", path);

    d3.csv("quakes.csv", type, function(error, data) {
      colorScale.domain(d3.extent(data, function(d) { return d.depth; }));

      svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) { return projection([d.long, d.lat])[0]; })
      .attr("cy", function(d) { return projection([d.long, d.lat])[1]; })
      .attr("r", function(d) { return d.mag * 2; })
      .style("fill", function(d) { return d3.rgb(255, colorScale(d.depth), 0); })
      .attr("class", "point")
      .on("mouseover", tip.show)
      .on("mouseout", tip.hide);
    });
  });

  var type = function(d) {
    d["lat"] = +d["lat"]
    d["long"] = +d["long"]
    d["depth"] = +d["depth"]
    d["mag"] = +d["mag"]
    d["stations"] = +d["stations"]
    return d;
  }

  </script>

 </body>
 </html>
diff --git a/quakes.csv b/quakes.csv
diff --git a/world-50m.json b/world-50m.json
	// 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
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Earthquakes</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="d3.tip.v0.6.3.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
	<style>

	.graticule {
	fill: none;
	stroke: #777;
	stroke-opacity: .5;
	stroke-width: .5px;
	}

	.land {
	fill: #eee;
	opacity: 0.7;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	circle.point {
	opacity: 0.5;
	}

	circle.point:hover {
	fill:blue;
	opacity: 1;
	}

	.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;
	}

	body {
	font-family: 'Montserrat', sans-serif;
	font-size: 12pt;
	}

	</style>
	</head>
	<body>
	<h2> Earthquake Data off Fiji</h2>
	<p>
	The data set give the locations of 1000 seismic events of MB > 4.0. The events occurred in a cube near Fiji since 1964.
	</p>



	<script>
	var width = 960,
	height = 960;

	var projection = d3.geo.mercator()
	.scale(650)
	.rotate([180, 0])
	.precision(.1);

	var path = d3.geo.path()
	.projection(projection);

	var graticule = d3.geo.graticule();

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var colorScale = d3.scale.linear()
	.range([255, 0]);

	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([-10, 0])
	.html(function(d) {
	return "<strong>Magnitude:</strong> <span style='color:red'>" + d.mag + "</span>"
	+ "<strong> Depth:</strong> <span style='color:red'>" + d.depth + "km</span>"
	})

	svg.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);

	svg.call(tip);

	d3.json("world-50m.json", function(error, world) {
	if (error) throw error;

	svg.insert("path", ".graticule")
	.datum(topojson.feature(world, world.objects.land))
	.attr("class", "land")
	.attr("d", path);

	svg.insert("path", ".graticule")
	.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
	.attr("class", "boundary")
	.attr("d", path);

	d3.csv("quakes.csv", type, function(error, data) {
	colorScale.domain(d3.extent(data, function(d) { return d.depth; }));

	svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return projection([d.long, d.lat])[0]; })
	.attr("cy", function(d) { return projection([d.long, d.lat])[1]; })
	.attr("r", function(d) { return d.mag * 2; })
	.style("fill", function(d) { return d3.rgb(255, colorScale(d.depth), 0); })
	.attr("class", "point")
	.on("mouseover", tip.show)
	.on("mouseout", tip.hide);
	});
	});

	var type = function(d) {
	d["lat"] = +d["lat"]
	d["long"] = +d["long"]
	d["depth"] = +d["depth"]
	d["mag"] = +d["mag"]
	d["stations"] = +d["stations"]
	return d;
	}

	</script>

	</body>
	</html>