d3
Version:
A small, free JavaScript library for manipulating documents based on data.
134 lines (112 loc) • 2.69 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Mercator Projection</title>
<script type="text/javascript" src="../../d3.js"></script>
<script type="text/javascript" src="../../d3.geo.js"></script>
<script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../lib/jquery-ui/jquery-ui.min.js"></script>
<style type="text/css">
@import url("../../lib/jquery-ui/jquery-ui.css");
body, .ui-widget {
font: 14px Helvetica Neue;
}
svg {
width: 960px;
height: 500px;
border: solid 1px #ccc;
background: #eee;
}
line {
stroke: brown;
stroke-dasharray: 4,2;
}
path {
fill: #ccc;
stroke: #fff;
}
div {
width: 960px;
}
</style>
</head>
<body>
<h3>Mercator Projection</h3>
<script type="text/javascript">
// Our projection.
var xy = d3.geo.mercator(),
path = d3.geo.path().projection(xy);
var states = d3.select("body")
.append("svg:svg")
.append("svg:g")
.attr("id", "states");
var equator = d3.select("svg")
.append("svg:line")
.attr("x1", "0%")
.attr("x2", "100%");
d3.json("../data/world-countries.json", function(collection) {
states
.selectAll("path")
.data(collection.features)
.enter().append("svg:path")
.attr("d", path)
.append("svg:title")
.text(function(d) { return d.properties.name; });
equator
.attr("y1", xy([0, 0])[1])
.attr("y2", xy([0, 0])[1])
});
function refresh() {
states
.selectAll("path")
.attr("d", path);
equator
.attr("y1", xy([0, 0])[1])
.attr("y2", xy([0, 0])[1])
d3.select("#scale span")
.text(xy.scale());
d3.select("#translate-x span")
.text(xy.translate()[0]);
d3.select("#translate-y span")
.text(xy.translate()[1]);
}
</script><p>
<div id="scale">scale: <span>500</span></div><p>
<div id="translate-x">translate.x: <span>480</span></div>
<div id="translate-y">translate.y: <span>250</span></div>
<script type="text/javascript">
$("#scale").slider({
min: 0,
max: 3000,
value: 500,
slide: function(event, ui) {
xy.scale(ui.value);
refresh();
}
});
$("#translate-x").slider({
min: -2000,
max: 2000,
value: 480,
slide: function(event, ui) {
var translate = xy.translate();
translate[0] = ui.value;
xy.translate(translate);
refresh();
}
});
$("#translate-y").slider({
min: -2000,
max: 2000,
value: 250,
slide: function(event, ui) {
var translate = xy.translate();
translate[1] = ui.value;
xy.translate(translate);
refresh();
}
});
</script>
</body>
</html>