Skip to content

Instantly share code, notes, and snippets.

Last active Jan 14, 2018
What would you like to do?
China Map with Province Name Tooltip v4
license: mit
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
<script src=""></script>
<script src=""></script>
svg {
width: 100%;
height: 100%;
position: center;
.hidden {
display: none;
div.tooltip {
color: #222;
background: #fff;
border-radius: 3px;
box-shadow: 0px 0px 2px 0px #a6a6a6;
padding: .2em;
text-shadow: #f5f5f5 0 1px 0;
opacity: 0.9;
position: absolute;
<svg width="1200" height="900"></svg>
<div class="tooltip"></div>
var margin = {top: 10, right: 10, bottom: 10, left: 10};
var width = 1200 - margin.left - margin.right;
var height = 900 - - margin.bottom;
var color = d3.scaleOrdinal(d3.schemeCategory20c);
var projection = d3.geoMercator()
.center([110, 25])
var path = d3.geoPath()
var svg ="svg")
.attr("width", width)
.attr("height", height);
var tooltip ="div.tooltip");
d3.json("china.geojson", function(error, china) {
if (error) throw error;
.attr("fill", function(d,i){
return color(i);
.attr("d", path )
return"hidden", false).html(;
tooltip.classed("hidden", false)
.style("top", (d3.event.pageY) + "px")
.style("left", (d3.event.pageX+10) + "px")
tooltip.classed("hidden", true);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment