erohinaelena/index.html

## index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="main.css" rel="stylesheet"/>
</head>
<body>

<script src="http://d3js.org/d3.v3.js"></script>
<script src='http://d3js.org/topojson.v1.js'></script>
<script src="main.js"></script>
</body>
</html>

## main.css
path {
    fill: none;
    stroke: #111;
}
div.tooltip {
    color: #222;
    background: #fff;
    padding: .5em;
    text-shadow: #f5f5f5 0 1px 0;
    border-radius: 2px;
    box-shadow: 0px 0px 2px 0px #a6a6a6;
    opacity: 0.9;
    position: absolute;
}

## main.js
var width = 950, height = 700;

var projection = d3.geo.equirectangular().translate([480, 250]);
var path = d3.geo.path().projection(projection);
var graticule = d3.geo.graticule()
    .step([15, 0])
var hourWidth = projection([15,0])[0] - projection([0,0])[0]

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom()
        .on("zoom", redraw))
    .append("g");

var tooltip = d3.select('body').append("div").attr("class", "tooltip hidden");

function redraw() {
    var s = d3.event.scale;
    var t = d3.event.translate;

    svg.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
}
var defs = svg.append('defs')
var gradient = defs.append('linearGradient')
    .attr('id', 'gradient')
    .attr('x1', 0)
    .attr('x2', '100%')
    .attr('y1', 0)
    .attr('y2', 0)
gradient
    .append('stop').attr('stop-color', '#f51').attr('offset', '5%')
gradient
    .append('stop').attr('stop-color', '#5f5').attr('offset', '50%')
gradient
    .append('stop').attr('stop-color', '#f51').attr('offset', '95%')

var id = 0
function generateId() {
    return id++
}

d3.json("timezones-topo2.json", function (error, world) {

    var tzdata = topojson.feature(world, world.objects.timezones).features;
    tzdata.forEach(function(d) {
        var hours = d.properties.Name.match('[+-]?\\d+')
        d.properties.id = generateId()
        d.properties.hours = +hours
    })
    var tz = defs.selectAll(".tz").data(tzdata);

    tz.enter().insert("clipPath")
        .attr("id", function (d) {
            return d.properties.id;
        })
        .append('path')
        .attr("d", path)

    var rects = svg.selectAll('rect').data(tzdata).enter().append('rect')
    var zoneWidth = 7 * hourWidth
    rects
        .attr('x', function(d) {
            return projection([d.properties.hours * 15, 0])[0] - zoneWidth / 2
        })
        .attr('y', 0)
        .attr('width', zoneWidth)
        .attr('height', '100%')
        .attr('fill', 'url(#gradient)')
        .attr('clip-path', function(d) {
            return 'url(#' + d.properties.id + ')'
        })
    svg.append('path')
        .attr("d", path(graticule()))
        .attr('opacity', 0.3)
    //tooltips
    rects.on("mousemove", function (d, i) {
        var mouse = d3.mouse(svg.node()).map(function (d) {
            return parseInt(d);
        });
        tooltip
            .classed("hidden", false)
            .attr("style", "left:" + (mouse[0] + 20) + "px;top:" + (mouse[1] + 100) + "px")
            .html(d.properties.Name)
    })
        .on("mouseout", function (d, i) {
            tooltip.classed("hidden", true)
        });

});

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## timezones-topo2.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              timezones-topo2.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<link href="main.css" rel="stylesheet"/>
	</head>
	<body>

	<script src="http://d3js.org/d3.v3.js"></script>
	<script src='http://d3js.org/topojson.v1.js'></script>
	<script src="main.js"></script>
	</body>
	</html>
	path {
	fill: none;
	stroke: #111;
	}
	div.tooltip {
	color: #222;
	background: #fff;
	padding: .5em;
	text-shadow: #f5f5f5 0 1px 0;
	border-radius: 2px;
	box-shadow: 0px 0px 2px 0px #a6a6a6;
	opacity: 0.9;
	position: absolute;
	}
	var width = 950, height = 700;

	var projection = d3.geo.equirectangular().translate([480, 250]);
	var path = d3.geo.path().projection(projection);
	var graticule = d3.geo.graticule()
	.step([15, 0])
	var hourWidth = projection([15,0])[0] - projection([0,0])[0]

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.call(d3.behavior.zoom()
	.on("zoom", redraw))
	.append("g");

	var tooltip = d3.select('body').append("div").attr("class", "tooltip hidden");

	function redraw() {
	var s = d3.event.scale;
	var t = d3.event.translate;

	svg.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
	}
	var defs = svg.append('defs')
	var gradient = defs.append('linearGradient')
	.attr('id', 'gradient')
	.attr('x1', 0)
	.attr('x2', '100%')
	.attr('y1', 0)
	.attr('y2', 0)
	gradient
	.append('stop').attr('stop-color', '#f51').attr('offset', '5%')
	gradient
	.append('stop').attr('stop-color', '#5f5').attr('offset', '50%')
	gradient
	.append('stop').attr('stop-color', '#f51').attr('offset', '95%')

	var id = 0
	function generateId() {
	return id++
	}

	d3.json("timezones-topo2.json", function (error, world) {

	var tzdata = topojson.feature(world, world.objects.timezones).features;
	tzdata.forEach(function(d) {
	var hours = d.properties.Name.match('[+-]?\\d+')
	d.properties.id = generateId()
	d.properties.hours = +hours
	})
	var tz = defs.selectAll(".tz").data(tzdata);

	tz.enter().insert("clipPath")
	.attr("id", function (d) {
	return d.properties.id;
	})
	.append('path')
	.attr("d", path)

	var rects = svg.selectAll('rect').data(tzdata).enter().append('rect')
	var zoneWidth = 7 * hourWidth
	rects
	.attr('x', function(d) {
	return projection([d.properties.hours * 15, 0])[0] - zoneWidth / 2
	})
	.attr('y', 0)
	.attr('width', zoneWidth)
	.attr('height', '100%')
	.attr('fill', 'url(#gradient)')
	.attr('clip-path', function(d) {
	return 'url(#' + d.properties.id + ')'
	})
	svg.append('path')
	.attr("d", path(graticule()))
	.attr('opacity', 0.3)
	//tooltips
	rects.on("mousemove", function (d, i) {
	var mouse = d3.mouse(svg.node()).map(function (d) {
	return parseInt(d);
	});
	tooltip
	.classed("hidden", false)
	.attr("style", "left:" + (mouse[0] + 20) + "px;top:" + (mouse[1] + 100) + "px")
	.html(d.properties.Name)
	})
	.on("mouseout", function (d, i) {
	tooltip.classed("hidden", true)
	});

	});