Information design enthousiast based in Amsterdam. Don't hesitate to get in touch
Published
Edited
Jul 2, 2022
1 fork
5 stars
old map v2
height = width / 1.6
viewof l2 = Inputs.range([1, 1000], { step: 1, label: "l2", value: 4 })
viewof l1 = Inputs.range([1, 1000], { step: 1, label: "l1", value: 31 })
line_color = "#3E2A35"
map2 = {
const svg = d3
.select(DOM.svg(width, height))
.style("background", "#e9e2d0")
.style("border", "4px solid black");
// Loxomeren
function toRadians(angle) {
return angle * (Math.PI / 180);
}
var xcenter1 = width / 6;
var ycenter1 = width / 2.1;
var a = [];
for (var i = 0; i <= 16; i++) {
a[i] = (360 / 16) * i;
}
const grat1 = svg.append("g");
grat1
.selectAll("polyline")
.data(a)
.enter()
.append("polyline")
.attr("fill", "none")
.attr("stroke", line_color)
.attr("stroke-width", 1)
.attr("points", function (d, i) {
var x = xcenter1 + Math.cos(toRadians(d)) * width;
var y = ycenter1 + Math.sin(toRadians(d)) * width;
return xcenter1 + "," + ycenter1 + " " + x + "," + y;
});
var xcenter3 = width / 2;
var ycenter3 = width / 7;
const grat3 = svg.append("g");
grat3
.selectAll("polyline")
.data(a)
.enter()
.append("polyline")
.attr("fill", "none")
.attr("stroke", line_color)
.attr("stroke-width", 1)
.attr("points", function (d, i) {
var x = xcenter3 + Math.cos(toRadians(d)) * width;
var y = ycenter3 + Math.sin(toRadians(d)) * width;
return xcenter3 + "," + ycenter3 + " " + x + "," + y;
});
const path = d3.geoPath().projection(projection);
// Countries;
svg
.append("path")
.datum(fr)
.attr("fill", "#3B727C")
.attr("opacity", 0.1)
.attr("d", path);
svg
.append("path")
.datum(it)
.attr("fill", "#B05F66")
.attr("opacity", 0.1)
.attr("d", path);
// Countries stroke
svg
.append("path")
.datum(fr)
.attr("fill", "#e9e2d0")
.attr("opacity", 1)
.attr("d", path);
svg
.append("path")
.datum(it)
.attr("fill", "#e9e2d0")
.attr("opacity", 1)
.attr("d", path);
svg
.append("path")
.datum(frInner1)
.attr("fill", "#3B727C")
.attr("opacity", 0.8)
.attr("d", path);
svg
.append("path")
.datum(itInner1)
.attr("fill", "#B05F66")
.attr("opacity", 0.8)
.attr("d", path);
svg
.append("path")
.datum(frInner2)
.attr("fill", "#3B727C")
.attr("opacity", 0.1)
.attr("d", path);
svg
.append("path")
.datum(itInner2)
.attr("fill", "#B05F66")
.attr("opacity", 0.1)
.attr("d", path);
// Country_Borders
svg
.append("path")
.datum(borders)
// .attr("stroke-linecap", "round")
.attr("fill", "none")
.attr("stroke", "#e9e2d0")
.attr("stroke-width", 1)
.attr("d", path);
svg
.append("path")
.datum(borders)
.attr("stroke-dasharray", 10)
// .attr("stroke-linecap", "round")
.attr("fill", "none")
.attr("stroke", line_color)
.attr("stroke-width", 3)
.attr("d", path);
// Coastline
svg
.selectAll("path.waterLines")
.data(itBufferd)
.enter()
.append("path")
.attr("d", path)
.attr("class", "waterLines")
.style("fill", "none")
.attr("stroke-dasharray", l1 + " " + l2)
.style("stroke", line_color)
.style("stroke-width", (d, i) => (stroke_gradient ? stroke_width(i) : 1))
.style("stroke-opacity", (d, i) => (opacity_gradient ? opacity(i) : 1));
svg
.append("path")
.datum(coastline)
.attr("stroke-linecap", "round")
.attr("fill", "none")
.attr("stroke", line_color)
.attr("stroke-width", 3)
.attr("d", path);
// Rivers
svg
.append("path")
.datum(rivers)
.attr("stroke-linecap", "round")
.attr("fill", "none")
.attr("stroke", line_color)
.attr("stroke-width", 2)
.attr("d", path);
// Places
const g = svg.append("g");
const dot = g
.selectAll("circle")
.data(cities)
.join("circle")
.attr("transform", (d) => `translate(${d})`)
.attr("r", 2)
.attr("fill", line_color);
const label = svg
.append("g")
.attr("fill", line_color)
.selectAll("g")
.data(cities)
.join("g")
.attr("transform", (d) => `translate(${d})`)
.append("text")
.attr("font-family", "Brush Script MT")
.attr("font-size", (d) => (d.population > 120000 ? 18 : 15))
.attr("dy", "0.3em")
.attr("dx", "0.3em")
.text((d) => d.name);
svg
.append("text")
.attr("transform", `translate(580, 360)rotate(85)`)
.attr("font-family", "Cormorant SC")
.attr("font-size", 20)
.attr("fill", line_color)
.attr("dy", ".35em")
.attr("letter-spacing", 10)
.text("CORSICA");
svg
.append("text")
.attr("transform", `translate(575, 640)rotate(75)`)
.attr("font-family", "Cormorant SC")
.attr("font-size", 25)
.attr("fill", line_color)
.attr("dy", ".35em")
.attr("letter-spacing", 10)
.text("SARDINIA");
svg
.append("text")
.attr("transform", `translate(870, 150)rotate(50)`)
.attr("font-family", "Cormorant SC")
.attr("font-size", 55)
.attr("fill", line_color)
.attr("dy", ".35em")
.attr("letter-spacing", 55)
.text("ITALY");
svg
.append("text")
.attr("transform", `translate(-120, 35)rotate(5)`)
.attr("font-family", "Cormorant SC")
.attr("font-size", 55)
.attr("fill", line_color)
.attr("dy", ".35em")
.attr("letter-spacing", 30)
.text("FRANCE");
// Borders
svg
.append("rect")
.style("fill", "none") // rect's fill color
.attr("stroke", "#e9e2d0")
.attr("stroke-width", 30)
.attr("height", height) // rect's height (in pixels)
.attr("width", width) // rect's width (in pixels)
.attr("x", 0) // x position of the top-left corner
.attr("y", 0); // y position of the top-left corner
svg
.append("rect")
.style("fill", "none") // rect's fill color
.attr("stroke", "#B9A37E")
.attr("stroke-width", 20)
.attr("height", height) // rect's height (in pixels)
.attr("width", width) // rect's width (in pixels)
.attr("x", 0) // x position of the top-left corner
.attr("y", 0); // y position of the top-left corner
svg
.append("rect")
.style("fill", "none") // rect's fill color
.attr("stroke", line_color)
.attr("stroke-width", 4)
.attr("stroke-dasharray", 15)
.attr("height", height - 25) // rect's height (in pixels)
.attr("width", width - 25) // rect's width (in pixels)
.attr("x", 12.5) // x position of the top-left corner
.attr("y", 12.5); // y position of the top-left corner
svg
.append("rect")
.style("fill", "none") // rect's fill color
.attr("stroke", line_color)
.attr("stroke-width", 2)
.attr("height", height - 20) // rect's height (in pixels)
.attr("width", width - 20) // rect's width (in pixels)
.attr("x", 10) // x position of the top-left corner
.attr("y", 10); // y position of the top-left corner
svg
.append("rect")
.style("fill", "none") // rect's fill color
.attr("stroke", line_color)
.attr("stroke-width", 2)
.attr("height", height - 30) // rect's height (in pixels)
.attr("width", width - 30) // rect's width (in pixels)
.attr("x", 15) // x position of the top-left corner
.attr("y", 15); // y position of the top-left corner
return svg.node();
}
projection = d3
.geoMercator()
.center([9, 42.5])
.scale(7000)
.translate([width / 2, height / 2])
itInner2 = innerBorder(it, 13)
itInner1 = innerBorder(it, 8)
frInner2 = innerBorder(fr, 13)
frInner1 = innerBorder(fr, 8)
turf = require("@turf/turf@6")
topojson = require("topojson")
topjson_simplify = require("topojson-simplify@3")
opacity = d3
.scalePow()
.exponent(3)
.domain([0, itBufferd.length - 1])
.range([1, 0.1])
stroke_width = d3
.scalePow()
.exponent(3)
.domain([0, itBufferd.length - 1])
.range(stroke_gradient_range) //0.6, 0.1
// {
// geojson: merged,
// total: 10,
// radial_distance: 105,
// spacing_change: 2
// }, // pass in the required libraries
itBufferd = Generators.observe(
worker(
create_buffered_polygons_inWorker,
{
geojson: merged,
total: 4,
radial_distance: 15,
spacing_change: 1.1
}, // pass in the required libraries
`importScripts(${await require
.resolve("@turf/turf@5")
.then(JSON.stringify)}, ${await require
.resolve("d3@5")
.then(JSON.stringify)});`
)
)
function toRadians(angle) {
return angle * (Math.PI / 180);
}
import { worker } from "@fil/worker"
stroke_gradient_range = [1.4, 0.3]
opacity_gradient = false
stroke_gradient = false
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.
