diff --git a/index.html b/index.html index 872c7bf..b971d68 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - map-journal + Map Journal
diff --git a/public/favicon.svg b/public/favicon.svg deleted file mode 100644 index 6893eb1..0000000 --- a/public/favicon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/icons.svg b/public/icons.svg deleted file mode 100644 index e952219..0000000 --- a/public/icons.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..d2ccc01 Binary files /dev/null and b/public/logo.png differ diff --git a/public/profile.jpg b/public/profile.jpg new file mode 100644 index 0000000..fe57389 Binary files /dev/null and b/public/profile.jpg differ diff --git a/src/App.svelte b/src/App.svelte index 0675830..c09a368 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,5 +1,19 @@ - + + {#if screen === 'worldmap'} + + {:else} + + {/if} + diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte new file mode 100644 index 0000000..dcbd363 --- /dev/null +++ b/src/lib/Footer.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/Layout.svelte b/src/lib/Layout.svelte new file mode 100644 index 0000000..aafed57 --- /dev/null +++ b/src/lib/Layout.svelte @@ -0,0 +1,29 @@ + + +
+ +
+ {@render children()} +
+
+
+ + diff --git a/src/lib/Timeline.svelte b/src/lib/Timeline.svelte new file mode 100644 index 0000000..40386ff --- /dev/null +++ b/src/lib/Timeline.svelte @@ -0,0 +1,15 @@ +
+

Timeline — coming soon

+
+ + diff --git a/src/lib/TopBar.svelte b/src/lib/TopBar.svelte new file mode 100644 index 0000000..529a52e --- /dev/null +++ b/src/lib/TopBar.svelte @@ -0,0 +1,109 @@ + + +
+
+ + Map Journal +
+ +
+
+
+ + +
+
+ +
+ Profile +
+
+ + diff --git a/src/lib/WorldMap.svelte b/src/lib/WorldMap.svelte index 4386bfd..a2af2f8 100644 --- a/src/lib/WorldMap.svelte +++ b/src/lib/WorldMap.svelte @@ -4,21 +4,27 @@ import { feature } from 'topojson-client'; import worldData from 'world-atlas/countries-110m.json'; - let container; + let frameEl; + + function fitProjection(proj, w, h) { + proj.fitSize([w, h], { type: 'Sphere' }); + const s = proj.scale() * 1.5; + proj.scale(s).translate([w / 2, h * 0.70]); + } onMount(() => { - const width = container.clientWidth; - const height = container.clientHeight; + const width = frameEl.clientWidth; + const height = frameEl.clientHeight; - const projection = d3.geoMercator() - .fitSize([width, height], { type: 'Sphere' }); + const projection = d3.geoMercator(); + fitProjection(projection, width, height); const path = d3.geoPath().projection(projection); const countries = feature(worldData, worldData.objects.countries) .features.filter(f => f.id !== '010'); - const svg = d3.select(container) + const svg = d3.select(frameEl) .append('svg') .attr('width', width) .attr('height', height); @@ -26,25 +32,21 @@ const g = svg.append('g'); const selected = new Set(); - const tooltip = d3.select(container) + const tooltip = d3.select(frameEl) .append('div') .attr('class', 'tooltip') .style('display', 'none'); - function color(d) { - return selected.has(d.id) ? '#4ade80' : '#e0e0e0'; - } - function updateFill(sel) { - sel.attr('fill', d => selected.has(d.id) ? '#4ade80' : '#e0e0e0'); + sel.attr('fill', d => selected.has(d.id) ? '#22c55e' : '#ffffff'); } g.selectAll('path') .data(countries) .join('path') .attr('d', path) - .attr('fill', color) - .attr('stroke', '#999') + .attr('fill', '#ffffff') + .attr('stroke', '#d4d4d4') .attr('stroke-width', 0.5) .on('click', (event, d) => { if (selected.has(d.id)) { @@ -55,15 +57,15 @@ updateFill(d3.select(event.currentTarget)); }) .on('mouseenter', (event, d) => { - d3.select(event.currentTarget).attr('fill', selected.has(d.id) ? '#6ee7a0' : '#d0d0d0'); + d3.select(event.currentTarget).attr('fill', selected.has(d.id) ? '#16a34a' : '#f0f6fa'); tooltip.style('display', 'block').text(d.properties.name); }) .on('mousemove', (event) => { - const [x, y] = d3.pointer(event, container); + const [x, y] = d3.pointer(event, frameEl); tooltip.style('left', (x + 10) + 'px').style('top', (y - 28) + 'px'); }) .on('mouseleave', (event, d) => { - d3.select(event.currentTarget).attr('fill', selected.has(d.id) ? '#4ade80' : '#e0e0e0'); + d3.select(event.currentTarget).attr('fill', selected.has(d.id) ? '#22c55e' : '#ffffff'); tooltip.style('display', 'none'); }); @@ -79,14 +81,14 @@ for (const entry of entries) { const { width, height } = entry.contentRect; svg.attr('width', width).attr('height', height); - projection.fitSize([width, height], { type: 'Sphere' }); - const paths = svg.selectAll('path'); - paths.attr('d', path); - updateFill(paths); + fitProjection(projection, width, height); + const countryPaths = g.selectAll('path'); + countryPaths.attr('d', path); + updateFill(countryPaths); } }); - observer.observe(container); + observer.observe(frameEl); return () => { observer.disconnect(); @@ -95,32 +97,44 @@ }); -
+
+
+