The Map of Kaohsiung, Taiwan: http://bl.ocks.org/violetvivirand/f39da85441b08e218422587d88cf86ae

The Map of Kaohsiung, Taiwan

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="https://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>

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js