Promise.all([
d3.json(
"https://gist.githubusercontent.com/jwasilgeo/21a6a6b67e9dc14f28fa73bb2beb4a6e/raw/e29f0ef8f8d9832598b5429d6c5e2c6fa9d33666/F1_Circuits_2018_topojson.json"
),
d3.json("https://unpkg.com/world-atlas@1.1.4/world/110m.json")
]).then(function(loadedTopoJsonResults) {
var f1CircuitsTopoJson = loadedTopoJsonResults[0];
var f1CircuitsGeoJson = topojson.feature(
f1CircuitsTopoJson,
f1CircuitsTopoJson.objects.F1_Circuits_2018
);
var worldTopoJson = topojson.simplify(
topojson.presimplify(loadedTopoJsonResults[1]),
0.5
);
var worldGeoJson = topojson.feature(
worldTopoJson,
worldTopoJson.objects.land
);
var orthographicMap = createOrthographicMap(f1CircuitsGeoJson, worldGeoJson);
rotateMaps(f1CircuitsGeoJson, orthographicMap, 0);
});
function createOrthographicMap(f1CircuitsGeoJson, worldGeoJson) {
var svg = d3.select("svg.orthographic-map");
var dimensions = svg.attr("viewBox").split(" ");
var width = dimensions[2];
var height = dimensions[3];
var projection = d3.geoOrthographic().fitSize([width, height], {
type: "Sphere"
});
var geoPathGenerator = d3.geoPath(projection);
svg
.selectAll("path")
.data(f1CircuitsGeoJson.features)
.enter()
.append("path")
.attr("d", function(geoJsonFeature) {
var geoJsonCircle = d3
.geoCircle()
.center(d3.geoCentroid(geoJsonFeature))
.radius(1.5)();
return geoPathGenerator(geoJsonCircle);
})
.classed("circuit-path", true);
svg
.append("path")
.datum(worldGeoJson)
.attr("d", geoPathGenerator)
.classed("land", true)
.lower();
svg
.append("path")
.datum({
type: "Sphere"
})
.attr("d", geoPathGenerator)
.classed("sphere", true)
.lower();
return {
svg: svg,
geoPathGenerator: geoPathGenerator
};
}
function rotateMaps(geoJsonCollection, orthographicMap, repeatCount) {
var nextGeoJsonFeature = geoJsonCollection.features[0];
var nextCentroid = d3.geoCentroid(nextGeoJsonFeature);
var nextRotationDestination = [-nextCentroid[0], -nextCentroid[1]];
orthographicMap.svg
.selectAll("path")
.transition()
.duration(1250)
.delay(500)
.attrTween("d", function(geoJsonFeature) {
// for the current element being transitioned, figure out which svg "map" it belongs to
// this needs to happen because each svg "map" uses a different projection and geoPathGenerator
var geoPathGenerator = orthographicMap.geoPathGenerator;
var interpolator = d3.interpolate(
geoPathGenerator.projection().rotate(),
nextRotationDestination
);
// find out if the landmasses or one of the circles is the element currently being transitioned
if (d3.select(this).classed("land")) {
return function(t) {
geoPathGenerator.projection().rotate(interpolator(t));
return geoPathGenerator(geoJsonFeature) || "";
};
} else if (d3.select(this).classed("circuit-path")) {
return function(t) {
geoPathGenerator.projection().rotate(interpolator(t));
var geoJsonCircle = d3
.geoCircle()
.center(d3.geoCentroid(geoJsonFeature))
.radius(1.5)();
return geoPathGenerator(geoJsonCircle) || "";
};
} else {
return "";
}
})
.on("start", function(d, idx, nodeList) {
while (idx < nodeList.length - 1) {
return;
}
orthographicMap.svg
.selectAll("path.circuit-path")
.style("stroke", "steelblue")
.style("fill", "steelblue")
.filter(function(geoJsonFeature) {
return (
geoJsonFeature.properties.Name ===
nextGeoJsonFeature.properties.Name
);
})
.style("stroke", "red")
.style("fill", "red")
.raise();
d3.select(".circuit-name").text(nextGeoJsonFeature.properties.Name);
})
.on("end", function(d, idx, nodeList) {
while (idx < nodeList.length - 1) {
return;
}
repeatCount++;
addToStackingMap(nextGeoJsonFeature, function() {
// reset all the circles back to the original color when starting the entire cycle over again
// and clear the stacked circuits
if (repeatCount === geoJsonCollection.features.length) {
// rinse and repeat from the beginning after a delay
setTimeout(function() {
d3.select(".info").html("All done! Start over.");
// all circles on the world maps back to blue
orthographicMap.svg
.selectAll("path.circuit-path")
.transition()
.style("stroke", "steelblue")
.style("fill", "steelblue");
repeatCount = 0;
// clear the stacking map circuit stack
clearStackingMap(function() {
d3
.select(".info")
.html('find & stack... <span class="circuit-name"></span>');
geoJsonCollection.features.push(
geoJsonCollection.features.shift()
);
rotateMaps(geoJsonCollection, orthographicMap, repeatCount);
});
}, 4000);
} else {
// repeat to continue to the next circuit location
geoJsonCollection.features.push(geoJsonCollection.features.shift());
rotateMaps(geoJsonCollection, orthographicMap, repeatCount);
}
});
});
}
function clearStackingMap(callback) {
d3
.select("svg.stacking-map")
.selectAll("path")
.each(function(d, outerIndex, nodeList) {
d3
.select(this)
.transition()
.delay(100 * outerIndex)
.ease(d3.easeBackIn)
.style("transform", "scale(0.01)")
.on("end", function() {
while (outerIndex < nodeList.length - 1) {
return;
}
d3
.select("svg.stacking-map")
.selectAll("path")
.remove();
callback();
});
});
}
function addToStackingMap(geoJsonFeature, callback) {
var svg = d3.select("svg.stacking-map");
var dimensions = svg.attr("viewBox").split(" ");
var width = dimensions[2];
var height = dimensions[3];
var newCircuitPath = svg
.append("path")
.datum(geoJsonFeature)
.attr("d", function(geoJsonFeature) {
var featureCentroid = d3.geoCentroid(geoJsonFeature);
var featureCentroidRotation = [-featureCentroid[0], -featureCentroid[1]];
var projection = d3
.geoMercator()
// half of the parent <svg> width and height
.translate([width / 2, height / 2])
// this scale seems to work well for all the circuits
.scale(2400 * width)
// the projection rotation is what is most important for stacking features and
// it is calculated by finding the centroid coordinates of the geojson circuit
.rotate(featureCentroidRotation);
// the geoPathGenerator is responsible for generating the "d" attribute that a <path> element needs
var geoPathGenerator = d3.geoPath(projection);
return geoPathGenerator(geoJsonFeature);
})
.classed("circuit-path", true)
.raise();
newCircuitPath
.style("transform", "scale(0.01)")
.style("stroke", "red")
.style("stroke-width", 2)
.style("opacity", 0.7)
.transition()
.duration(500)
.ease(d3.easeBackOut)
.style("transform", null)
.on("end", function() {
newCircuitPath
.transition()
.style("transform", null)
.style("stroke", null)
.style("stroke-width", null)
.style("opacity", null)
.on("end", function() {
callback();
});
});
}
!
