Built with blockbuilder.org
forked from johnwalley's block: d3-tube-map + popover
xxxxxxxxxx
<html>
<head>
<link rel="stylesheet" href="tubeMap.css">
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/d3-tube-map@latest/dist/d3-tube-map.js"></script>
<link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="tube-map">
</div>
<script>
var container = d3.select('#tube-map');
var width = 1600;
var height = 600;
var map = d3.tubeMap()
.width(width)
.height(height)
.margin({
top: 20,
right: 20,
bottom: 40,
left: 100,
});
d3.json("pubs.json", function (error, data) {
container
.datum(data).call(map);
container.selectAll('.label')
.attr('title', function (d) { return d.label; })
.attr('data-content', function (d) { return d.address; })
.attr('data-trigger', 'focus')
.attr('tabindex', 0);
$('svg .label').popover({ container: 'body' });
var svg = container.select('svg');
zoom = d3
.zoom()
.scaleExtent([0.5, 6])
.on('zoom', zoomed);
var zoomContainer = svg.call(zoom);
var initialScale = 2;
var initialTranslate = [100, 200];
zoom.scaleTo(zoomContainer, initialScale);
zoom.translateTo(zoomContainer, initialTranslate[0], initialTranslate[1]);
function zoomed() {
svg.select('g').attr('transform', d3.event.transform.toString());
$('.popover').popover('update')
}
});
</script>
</body>
</html>
https://d3js.org/d3.v4.js
https://unpkg.com/d3-tube-map@latest/dist/d3-tube-map.js