Published
Edited
Jul 25, 2019
1 star
md`# Interrupted Quartic Authalic Projection with Colors and Gradients`
map = {
const svg = d3.create("svg")
.attr("viewBox", "0 0 960 600")
.style("width", "100%")
.style("height", "auto");
var ocean_fill = svg.append("defs").append("radialGradient").attr("id", "ocean_fill");
ocean_fill.append("stop").attr("offset", "70%").attr("stop-color", "#368DC5");
ocean_fill.append("stop").attr("offset", "95%").attr("stop-color", "#0178BD");
var drop_shadow = svg.append("defs").append("radialGradient").attr("id", "drop_shadow");
drop_shadow.append("stop").attr("offset", "70%").attr("stop-color", "#395515");
drop_shadow.append("stop").attr("offset", "95%").attr("stop-color", "#5d782a");
var defs = svg.append("defs");
defs.append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.style("fill", "url(#ocean_fill)")
.attr("d", path);
defs.append("clipPath")
.attr("id", "clip")
.append("use")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "graticule")
.style("fill", "url(#ocean_fill)")
.attr("xlink:href", "#sphere");
svg.append("path")
.attr("class", "graticule")
.attr("clip-path", "url(#clip)")
.style("fill", "url(#ocean_fill)")
.attr("d", path(graticule));
svg.append("path")
.datum(topojson.feature(world, world.objects.countries))
.attr("clip-path", "url(#clip)")
.style("fill", "url(#drop_shadow)")
.attr("d", path);
svg.append("g")
.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.join("path")
.attr("class", "countries")
.attr("clip-path", "url(#clip)")
.attr("d", path);
return svg.node();
}
html`
<style>
#sphere {
stroke: #000;
stroke-width: 1px;
}
.countries {
/*fill: #587539;*/
fill:none;
stroke: #fff;
stroke-width: 0.3px;
}
.graticule {
stroke: #ccc;
stroke-width:0.3;
}
</style>`
path = d3.geoPath(projection);
projection = d3.geoInterruptedQuarticAuthalic();
world = d3.json("https://unpkg.com/world-atlas@1/world/110m.json")
sphere = ({type: "Sphere"})
graticule = d3.geoGraticule10()
topojson = require("topojson-client@3")
d3 = require("d3@5", "d3-geo-projection@2")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
