practicing making a map

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.subunit.SWE { fill: #8fb1e6; }
.subunit.NOW { fill: white; }
.subunit.FIN { fill: white; }
.subunit.DNK { fill: white; }
.subunit.DNB { fill: white; }

.place,
.place-label {
  fill: #444;
}

.subunit-label {
  fill: black;
  fill-opacity: .5;
  font-size: 20px;
  font-weight: 300;
  text-anchor: middle;
}

.subunit-boundary {
  fill: none;
  stroke: #777;
}

text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  pointer-events: none;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 1160;

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

d3.json("scandinavia.json", function(error, sweden) {
  	if (error) return console.error(error);

var subunits = topojson.feature(sweden, sweden.objects.subunits)

// remove other territories from naming, etc
    var featureData = topojson.feature(sweden, sweden.objects.subunits).features
    	.filter(function(d){
    		if (Array('DNK', 'FIN', 'NOW', 'SWE', 'DNB').indexOf(d.id)> -1){return d}
    	});

// define our projection - and where to crop the world
	var projection = d3.geo.albers()
    .center([15, 63])
    .rotate([0, 0])
    .parallels([65, 70])
    .scale(3000)
    .translate([width / 2, height / 2]);

// generate path, using the albers projection defined above
	var path = d3.geo.path()
    .projection(projection);
  
  	// draw paths, note that this still includes things like svalbard,
  	// but it's out of the range of the map
  	svg.append("path")
    .datum(subunits)
    .attr("d", path);

// define sub-units, so that we can use classes to style
    svg.selectAll(".subunit")
    .data(featureData)
    .enter().append("path")
    .attr("class", function(d) { return "subunit " + d.id; })
    .attr("d", path);

// define the boundary of countries so we can style
    svg.append("path")
    .datum(featureData)
    .attr("d", path)
    .attr("class", "subunit-boundary");

// introduce places (cities)
    svg.append("path")
    .datum(topojson.feature(sweden, sweden.objects.places))
    .attr("d", path)
    .attr("class", "place");

// label the cities
    svg.selectAll(".place-label")
    .data(topojson.feature(sweden, sweden.objects.places).features)
  	.enter().append("text")
    .attr("class", "place-label")
    .attr("transform", function(d) {return "translate(" + projection(d.geometry.coordinates) + ")"; })
    .attr("dy", ".35em")
    .text(function(d) { return d.properties.name; });

// locate the labels
    svg.selectAll(".place-label")
    .attr("x", function(d) { return d.geometry.coordinates[0] > 15.8 ? 6 : -6; })
    .style("text-anchor", function(d) { return d.geometry.coordinates[0] > 15.8 ? "start" : "end"; });

// label the countries
    svg.selectAll(".subunit-label")
    .data(featureData.filter(function(d) {if(d.id != 'DNB'){return d}}))
  	.enter().append("text")
    .attr("class", function(d) {return "subunit-label " + d.id; })
    .attr("transform", function(d) {
    	var centerLabel = path.centroid(d);
    	if(d.id == 'NOW'){centerLabel = [centerLabel[0] - 30, centerLabel[1] + 130]}; 
    	if(d.id == 'SWE'){centerLabel = [centerLabel[0] - 30, centerLabel[1] + 15]}; 
    	console.log(centerLabel, path.centroid(d), d)
    	return "translate(" + centerLabel + ")"; })
    .attr("dy", ".35em")
    .text(function(d) {return d.properties.name; });

});

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

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