168 строки
3.4 KiB
HTML
168 строки
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
<title>Albers Projection</title>
|
|
<script type="text/javascript" src="../../d3.v2.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;
|
|
}
|
|
|
|
#states path {
|
|
fill: #ccc;
|
|
stroke: #fff;
|
|
}
|
|
|
|
#states circle {
|
|
fill: #fcc;
|
|
stroke: #000;
|
|
}
|
|
|
|
div {
|
|
width: 960px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h3>Albers Projection</h3>
|
|
<script type="text/javascript">
|
|
|
|
// Our projection.
|
|
var xy = d3.geo.albers(),
|
|
path = d3.geo.path().projection(xy);
|
|
|
|
d3.select("body")
|
|
.append("svg")
|
|
.append("g")
|
|
.attr("id", "states");
|
|
|
|
d3.json("../data/us-states.json", function(collection) {
|
|
d3.select("#states")
|
|
.selectAll("path")
|
|
.data(collection.features)
|
|
.enter().append("path")
|
|
.attr("d", path);
|
|
d3.select("#states")
|
|
.append("circle")
|
|
.attr("r", 10)
|
|
.attr("transform", "translate(" + xy(xy.origin()).join(",") + ")")
|
|
});
|
|
|
|
function refresh() {
|
|
d3.selectAll("#states path")
|
|
.attr("d", path);
|
|
d3.select("#states circle")
|
|
.attr("transform", "translate(" + xy(xy.origin()).join(",") + ")")
|
|
d3.select("#parallels span")
|
|
.text(xy.parallels());
|
|
d3.select("#lon span")
|
|
.text(xy.origin()[0]);
|
|
d3.select("#lat span")
|
|
.text(xy.origin()[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="lon">origin.longitude: <span>-98</span></div>
|
|
<div id="lat">origin.latitude: <span>38</span></div><p>
|
|
<div id="parallels">parallels: <span>29.5,45.5</span></div><p>
|
|
<div id="scale">scale: <span>1000</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">
|
|
|
|
$("#parallels").slider({
|
|
range: true,
|
|
min: -90,
|
|
max: 90,
|
|
step: 1e-1,
|
|
values: [29.5, 45.5],
|
|
slide: function(event, ui) {
|
|
xy.parallels(ui.values);
|
|
refresh();
|
|
}
|
|
});
|
|
|
|
$("#lon").slider({
|
|
min: -180,
|
|
max: 180,
|
|
step: 1e-1,
|
|
value: -98,
|
|
slide: function(event, ui) {
|
|
var origin = xy.origin();
|
|
origin[0] = ui.value;
|
|
xy.origin(origin);
|
|
refresh();
|
|
}
|
|
});
|
|
|
|
$("#lat").slider({
|
|
min: -90,
|
|
max: 90,
|
|
step: 1e-1,
|
|
value: 38,
|
|
slide: function(event, ui) {
|
|
var origin = xy.origin();
|
|
origin[1] = ui.value;
|
|
xy.origin(origin);
|
|
refresh();
|
|
}
|
|
});
|
|
|
|
$("#scale").slider({
|
|
min: 0,
|
|
max: 3000,
|
|
value: 1000,
|
|
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>
|