PM25/TOWN_MOI_1090324.json

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>
    <title>Taiwan</title>
</head>

<body></body>

</html>

## playground.json
{
    "scripts": [],
    "styles": []
}

## script.js
var width = window.innerWidth;
    height = window.innerHeight;

var svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var projection = d3
    .geoMercator() // 麥卡托投影法
    .center([121, 24]) // 中心點(經緯度)
    .scale(6000) // 放大倍率
    .translate([width / 2, height / 2.5]); // 置中
var path = d3.geoPath().projection(projection);


d3.json("TOWN_MOI_1090324.json").then((taiwan) => {
    // 縣市
    svg.selectAll("path")
        .data(
            topojson.feature(taiwan, taiwan.objects.TOWN_MOI_1090324).features
        )
        .enter()
        .append("path")
        .attr("class", "town")
        .attr("d", path);

    // 邊界
    svg.append("path")
        .attr(
            "d",
            path(
                topojson.mesh(
                    taiwan,
                    taiwan.objects.TOWN_MOI_1090324,
                    (a, b) => a !== b // 消除外部邊界
                )
            )
        )
        .attr("class", "boundary");
});

## style.css
.town {
    fill: #999;
}

.boundary {
    fill: none;
    stroke: #fff;
    stroke-width: 0.5px;
}

## TOWN_MOI_1090324.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              TOWN_MOI_1090324.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<title>Taiwan</title>
	</head>

	<body></body>

	</html>
	var width = window.innerWidth;
	height = window.innerHeight;

	var svg = d3
	.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	var projection = d3
	.geoMercator() // 麥卡托投影法
	.center([121, 24]) // 中心點(經緯度)
	.scale(6000) // 放大倍率
	.translate([width / 2, height / 2.5]); // 置中
	var path = d3.geoPath().projection(projection);


	d3.json("TOWN_MOI_1090324.json").then((taiwan) => {
	// 縣市
	svg.selectAll("path")
	.data(
	topojson.feature(taiwan, taiwan.objects.TOWN_MOI_1090324).features
	)
	.enter()
	.append("path")
	.attr("class", "town")
	.attr("d", path);

	// 邊界
	svg.append("path")
	.attr(
	"d",
	path(
	topojson.mesh(
	taiwan,
	taiwan.objects.TOWN_MOI_1090324,
	(a, b) => a !== b // 消除外部邊界
	)
	)
	)
	.attr("class", "boundary");
	});
	.town {
	fill: #999;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: 0.5px;
	}