The avatar for @jwolondon
Jo Wood
Professor of Visual Analytics interested in design, geovisualization, visual storytelling and computational thinking.
Public
30 day map challenge 2024
Edited
Jan 3
Paused
Importers
10 stars
30 day map challenge 2024
30 Day Map challenge: 1. Points30 Day Map challenge: 2. Lines30 Day Map Challenge: 3. Polygons30 Day Map Challenge: 4. Hexagons30 Day Map Challenge: 5. A Journey30 Day Map Challenge: 6. Raster
30 Day Map Challenge: 7. Vintage style
30 Day Map Challenge: 8. Data: HDX30 Day Map Challenge: 9. AI Only30 Day Map Challenge: 10. Pen & Paper30 Day Map Challenge: 11. Arctic30 Day Map Challenge: 12. Time & Space30 Day Map Challenge: 13. A new tool30 Day Map Challenge: 14. A World Map30 Day Map Challenge: 15. Data: My Data30 Day Map Challenge: 16. Choropleth30 Day Map Challenge: 17. Collaborative Map30 Day Map Challenge: 18. 3D30 Day Map Challenge: 19. Typography30 Day Map Challenge: 20. Data: OpenStreetMap30 Day Map Challenge: 21. Conflict30 Day Map Challenge: 22. Two Colours30 Day Map Challenge: 23. Memory30 Day Map Challenge: 24. Only Circles30 Day Map Challenge: 25. Heat30 Day Map Challenge: 26. Map Projections30 Day Map Challenge: 27. Micromapping30 Day Map Challenge: 29. Data: Overture30 Day Map Challenge: 30. The final map30 Day Map Challenge: Utilities
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function createDashesRegular(id, options = {}) {
const {
stroke = "black",
strokeWidth = 1,
strokeDashArray = [3, 3],
opacity = 0.1,
spacing = 10, // Horizontal spacing
lineSpacing = 10, // Vertical distance between lines
rotate = 0
} = options;
return `
<pattern id="${id}" patternUnits="userSpaceOnUse" width="${spacing}" height="${lineSpacing}" patternTransform="rotate(${rotate})">
<line x1="0" x2="10" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-dasharray="${strokeDashArray}" opacity="${opacity}" />
</pattern>
`;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function createDotsRegular(id, options = {}) {
const {
fill = "black",
r = 0.4,
opacity = 0.1,
spacing = 10,
rotate = 0
} = options;
return `
<pattern id="${id}" patternUnits="userSpaceOnUse" width="${spacing}" height="${spacing}" patternTransform="rotate(${rotate})">
<circle cx="${spacing / 2}" cy="${spacing / 2}" r="${
(r * spacing) / 2
}" fill="${fill}" opacity="${opacity}" />
</pattern>
`;
}
Insert cell
Insert cell
Insert cell
function createVignette(id, options = {}) {
const { dark = "black", light = "white", r = 100, strength = 0.1 } = options;
return `
<radialGradient id=${id} cx="50%" cy="50%" r="${r}%">
<stop offset="0%" style="stop-color: ${light}; stop-opacity: ${strength}" />
<stop offset="100%" style="stop-color: ${dark}; stop-opacity: ${strength}" />
</radialGradient>
`;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function createGradient(id, options = {}) {
const {
dark = "black",
light = "white",
strength = 0.1,
rotate = 45,
start = 0, // Where the gradient starts
end = 1 // Where it ends (can be more than 1 for more subtle gradients)
} = options;
return `
<linearGradient id=${id} gradientTransform="rotate(${rotate})" x1="${
start * 100
}%" x2="${end * 100}%">
<stop offset="0%" style="stop-color: ${light}; stop-opacity: ${strength}" />
<stop offset="100%" style="stop-color: ${dark}; stop-opacity: ${strength}" />
</radialGradient>
`;
}
Insert cell
Insert cell
drawTest(drawFillTexture(testGeo, { fill: "url(#seGradientTest)" }))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
drawTest([
drawShadow(testGeo, { fill: "oklch(70% 0.2 50deg)" }),
drawFillTexture(testGeo, { fill: "url(#dashesCombined)" }),
drawFillTexture(testGeo, { fill: "url(#dotsBuilding)" }),
drawFillTexture(testGeo, { fill: "url(#vignetteCombined)" }),
drawFillTexture(testGeo, { fill: "url(#seGradientCombined)" }),
drawOutline(testGeo)
])
Insert cell
Insert cell
Insert cell
fnt = ({
script: "Pinyon Script",
serif: "Old Standard TT",
display: "Rye"
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more