Skip to content

Instantly share code, notes, and snippets.

@VioletVivirand
Last active August 11, 2016 05:14
Show Gist options
  • Save VioletVivirand/f39da85441b08e218422587d88cf86ae to your computer and use it in GitHub Desktop.
Save VioletVivirand/f39da85441b08e218422587d88cf86ae to your computer and use it in GitHub Desktop.
license: gpl-3.0

Built with blockbuilder.org

This is my first D3 Block, and I'm still working on it, try hard to learn. :)

How to make the TopoJSON file of Kaohsiung

Download from here, extract them, and use the commands below:

$ ogr2ogr -f GeoJSON -where "C_Name IN ('高雄市')" municipality.json County_MOI_1041215.shp
$ ogr2ogr -f GeoJSON -where "C_Name IN ('高雄市')" town.json Town_MOI_1041215.shp
$ topojson -o kh.json --id-property OBJECTID --properties name=NAME --shapefile-encoding big5 municipality.json town.json
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<style>
/* CSS goes here. */
.subunit {
fill: #B4E2F2;
/*fill: #000000;*/
}
.subunit:hover {
fill: #70E15E;
}
.place-label {
font-size: 4pt;
/*color: #FFFFFF;*/
}
.place-marker {
fill: brown;
/*stroke: black;*/
/*stroke-width: 1.5px;*/
}
.place-tip {
line-height: 1;
font-size: 8pt;
/*font-weight: bold;*/
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.place-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.place-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
</head>
<body>
<script>
/* JavaScript goes here. */
var width = 960,
height = 720;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("kh.json", function(error, kh) {
if (error) return console.error(error);
// // 測試
// console.log("topojson.feature(kh, kh.objects.town).features");
// console.log(topojson.feature(kh, kh.objects.town).features);
var projection = d3.geo.mercator()
.center([121, 24])
.scale(30000)
.translate([500, -250]);
var path = d3.geo.path()
.projection(projection);
var circle_radius = 2;
// // 畫出高雄的輪廓
// var subunits = topojson.feature(kh, kh.objects.municipality);
// svg.append("path")
// .datum(subunits)
// .attr("d", path);
// 加上 Hover 時要顯示的資訊
var tip = d3.tip()
.attr('class', 'place-tip')
.offset([-10, 0])
.html(function(d) {
return "<span>" + d.properties.name + "</span>";
})
svg.call(tip);
// 畫出高雄各區的輪廓
svg.selectAll(".subunit")
.data(topojson.feature(kh, kh.objects.town).features)
.enter().append("path")
.attr("class", function(d) {
return "subunit " + d.id;
})
.attr("d", path)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
// 加上各區的 Mark
svg.selectAll(".place-marker")
.data(topojson.feature(kh, kh.objects.town).features)
.enter().append("circle")
.attr("class", function(d) {
return "place-marker " + d.properties.name;
})
.attr("transform", function(d) { // 其實原本位移應該是用 cx, cy,這裡算偷懶?
var centroid = path.centroid(d),
x = centroid[0],
y = centroid[1];
return "translate(" + x + "," + y + ")";
})
.attr("r", circle_radius);
// 加上各區的文字
svg.selectAll(".place-label")
.data(topojson.feature(kh, kh.objects.town).features)
.enter().append("text")
.attr("class", "place-label")
.attr("transform", function(d) {
var centroid = path.centroid(d),
x = centroid[0],
y = centroid[1];
return "translate(" + (x + circle_radius * 2) + "," + y + ")";
})
.attr("dy", ".35em")
.text(function(d) {
return d.properties.name;
});
});
</script>
</body>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment