china-map-dots

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
   <script src="https://cdn.bootcss.com/d3/5.15.1/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
    <title>China Map</title>

.hidden {
            display: none;
        }

div.tooltip {
            color: #222;
            background: #fff;
            border-radius: 3px;
            box-shadow: 0px 0px 2px 0px #a6a6a6;
            padding: .2em;
            text-shadow: #f5f5f5 0 1px 0;
            opacity: 0.9;
            position: absolute;
        }
    </style>

</head>

<body>
    <div class="tooltip"></div>
    <script>
        let width = 1080
        let height = 720
        let svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(0,0)")

let projection = d3.geoMercator()
            .center([104, 38])
            .scale(800)
            .translate([width / 2, height / 2])

let path = d3.geoPath()
            .projection(projection)

var tooltip = d3.select("div.tooltip");
        d3.json("china.json").then((geojson => {

svg.append("path")
                .attr("d", path(geojson))
                .attr('fill', 'Lavender')
                .attr("stroke", "DarkGrey")
                .attr("stroke-width", 1)

d3.csv("china_locations_utf8.csv").then((city => {

// points
            var data = [[116.39723, 39.9075], [116.39723, 36.9075]];

}))

</script>

</body>

</html>

https://cdn.bootcss.com/d3/5.15.1/d3.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js