台湾のかたち

// D3.js v7 + topojson-client
import * as d3 from 'd3';
import * as topojson from 'topojson-client';

const topo = await d3.json('https://taiwan.md/assets/geo/taiwan-country.topo.json');
const counties = topojson.feature(topo, topo.objects.map);

const projection = d3.geoMercator()
  .center([121, 24])
  .scale(8000)
  .translate([400, 300]);

const path = d3.geoPath().projection(projection);

d3.select('svg')
  .selectAll('path')
  .data(counties.features)
  .join('path')
    .attr('d', path)
    .attr('fill', d => colorScale(d.properties.value))
    .attr('stroke', '#333');

# Python — convert TopoJSON to GeoDataFrame
import json, geopandas as gpd
from topojson import Topology

with open('taiwan-country.topo.json') as f:
    topo = json.load(f)

# Convert to GeoJSON
topology = Topology(topo)
gdf = gpd.GeoDataFrame.from_features(
    topology.to_geojson()['features']
)
gdf.plot(column='name', legend=True)

// Leaflet + topojson
import L from 'leaflet';
import * as topojson from 'topojson-client';

const map = L.map('map').setView([24, 121], 7);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

fetch('https://taiwan.md/assets/geo/taiwan-country.topo.json')
  .then(r => r.json())
  .then(topo => {
    const geojson = topojson.feature(topo, topo.objects.map);
    L.geoJSON(geojson, {
      style: { color: '#4a90e2', weight: 1, fillOpacity: 0.3 }
    }).addTo(map);
  });

// Vue 2 — taiwan-vue-components (original source)
npm install taiwan-vue-components

// In your Vue component
import { Country, Taipei, Kaohsiung } from 'taiwan-vue-components';

<template>
  <div>
    <Country :width="400" :height="600" fill="#f0f0f0" stroke="#333" />
    <Taipei :width="300" :height="300" />
  </div>
</template>