Information design enthousiast based in Amsterdam. Don't hesitate to get in touch
map2 = {
const svg = d3
.select(DOM.svg(width, height))
.style("background", "#f7ede2")
.style("border", "4px solid black");
const g = svg.append("g");
// var zoom = d3
// .zoom()
// .scaleExtent([1, 8])
// .on("zoom", function (event) {
// g.selectAll("path").attr("transform", event.transform);
// });
// svg.call(zoom);
// Countries stroke
g.append("path")
.datum(merged)
.attr("fill", "#e9e2d0")
.attr("stroke", "black")
.attr("opacity", 1)
.attr("d", path);
const countries_hue = g.selectAll("countries_hue").data(eu).enter();
countries_hue
.append("g")
.selectAll("path")
.data(eu)
.enter()
.append("path")
.attr("opacity", 0.02)
.attr("fill", (d) => colorScale(d.properties.name))
.attr("d", path);
const g_outer_borders = g.selectAll("g_outer_borders").data(abcd).enter();
g_outer_borders
.append("g")
.selectAll("path")
.data(abcd)
.enter()
.append("path")
.attr("opacity", 0.05)
.attr("fill", (d) => colorScale(d.properties.name))
.attr("d", path);
const g_inner_borders = g.selectAll("g_inner_borders").data(abc).enter();
g_inner_borders
.append("g")
.selectAll("path")
.data(abc)
.enter()
.append("path")
.attr("opacity", 0.8)
.attr("fill", (d) => colorScale(d.properties.name))
.attr("d", path);
// g_borders = svg.selectAll('g').
g.append("path")
.datum(borders)
.attr("fill", "none")
.attr("stroke", "#e9e2d0")
.attr("stroke-width", 3)
.attr("d", path);
g.append("path")
.datum(borders)
.attr("stroke-dasharray", 3)
.attr("fill", "none")
.attr("stroke", line_color)
.attr("stroke-width", 3)
.attr("d", path);
// Coastline
g.selectAll("path.landDots")
.data(itBufferd)
.enter()
.append("path")
.attr("d", path)
.attr("class", "landDots")
.style("fill", "none")
.attr("stroke-linecap", "round")
.attr("stroke-dasharray", 1 + " " + 30)
.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));
g.selectAll("path.waterLines")
.data(itBufferd2)
.enter()
.append("path")
.attr("d", path)
.attr("class", "waterLines")
.style("fill", "none")
.attr("stroke-linecap", "round")
.attr("stroke-dasharray", 100 + " " + 5)
.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));
g.append("path")
.datum(coastline)
.attr("stroke-linecap", "round")
.attr("fill", "none")
.attr("stroke", line_color)
.attr("stroke-width", 4)
.attr("opacity", 0.7)
.attr("d", path);
// Rivers
// g.append("path")
// .datum(rivers)
// .attr("stroke-linecap", "round")
// .attr("fill", "none")
// .attr("stroke", line_color)
// .attr("stroke-width", 2)
// .attr("d", path);
// Places;
const places = g
.append("g")
.selectAll("circle")
.data(cities)
.join("circle")
.attr("transform", (d) => `translate(${d})`)
.attr("r", 2)
.attr("fill", line_color);
const label = g
.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);
// Frame Border
svg
.append("rect")
.style("fill", "none") // rect's fill color
.attr("stroke", "#f7ede2")
.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", "#dab785")
.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();
}
height = width / 1.6
line_color = "#3C362A"
kleurtjes = ["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3"]
colors = ["#f6bd60", "#f5cac3", "#84a59d", "#f28482"]
colorScale = d3
.scaleOrdinal()
.domain(d3.map(eu, (d) => d.properties.name))
.range(colors)
viewof l1 = Inputs.range([1, 1000], { step: 1, label: "l1", value: 31 })
viewof l2 = Inputs.range([1, 1000], { step: 1, label: "l2", value: 4 })
path = d3.geoPath().projection(projection)
projection = d3
.geoMercator()
.center([-6.3, 35.94])
.scale(7500)
.translate([width / 2, height / 2])
abcd = d3.map(eu, (d) => innerBorder(d, 14))
abc = d3.map(eu, (d) => innerBorder(d, 8))
country_list = [
"Algeria",
"Spain",
"Portugal",
"Morocco",
// "United Kingdom",
// "Gibraltar"
]
eu = countries.features.filter((d) => country_list.includes(d.properties.name))
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
itBufferd = Generators.observe(
worker(
create_buffered_polygons_inWorker,
{
geojson: merged,
total: 30,
radial_distance: -350,
spacing_change: 4
}, // pass in the required libraries
`importScripts(${await require
.resolve("@turf/turf@5")
.then(JSON.stringify)}, ${await require
.resolve("d3@5")
.then(JSON.stringify)});`
)
)
itBufferd2 = Generators.observe(
worker(
create_buffered_polygons_inWorker,
{
geojson: merged,
total: 30,
radial_distance: 350,
spacing_change: 4
}, // pass in the required libraries
`importScripts(${await require
.resolve("@turf/turf@5")
.then(JSON.stringify)}, ${await require
.resolve("d3@5")
.then(JSON.stringify)});`
)
)
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.
