Change to docs

website/src/App.css → docs/src/App.css

@@ -28,13 +28,6 @@
   color: #61dafb;
 }
 
-.map-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 20px;
-}
-
 
 @keyframes App-logo-spin {
   from {

docs/src/Example.js

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef } from 'react';
+import * as d3 from 'd3';
+
+function Example() {
+    const d3Container = useRef(null);
+
+    useEffect(() => {
+        if (d3Container.current) {
+            // Sample data
+            const data = [2, 4, 8, 10, 15, 20, 25];
+
+            // Set dimensions and margins of the graph
+            const margin = { top: 20, right: 30, bottom: 40, left: 90 },
+                  width = 460 - margin.left - margin.right,
+                  height = 400 - margin.top - margin.bottom;
+
+            // Append the svg object to the div called 'd3Container'
+            const svg = d3.select(d3Container.current)
+                          .append("svg")
+                            .attr("width", width + margin.left + margin.right)
+                            .attr("height", height + margin.top + margin.bottom)
+                          .append("g")
+                            .attr("transform", `translate(${margin.left},${margin.top})`);
+
+            // X axis
+            const x = d3.scaleLinear()
+                        .domain([0, 30])
+                        .range([ 0, width]);
+            svg.append("g")
+               .attr("transform", `translate(0,${height})`)
+               .call(d3.axisBottom(x));
+
+            // Y axis
+            const y = d3.scaleBand()
+                        .range([ 0, height ])
+                        .domain(data.map((d, i) => i))
+                        .padding(.1);
+            svg.append("g")
+               .call(d3.axisLeft(y));
+
+            // Bars
+            svg.selectAll("myRect")
+               .data(data)
+               .enter()
+               .append("rect")
+               .attr("x", x(0) )
+               .attr("y", (d, i) => y(i))
+               .attr("width", (d) => x(d))
+               .attr("height", y.bandwidth())
+               .attr("fill", "#69b3a2");
+        }
+    }, []); // Empty dependency array means this effect will only run once (like componentDidMount in classes)
+
+    return (
+        <div>
+            <p>This is another component.</p>
+            <div ref={d3Container} />
+        </div>
+    );
+}
+
+export default Example;

docs/src/InteractiveMap.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from 'react';
+import * as d3 from 'd3';
+import { geoMercator, geoPath } from 'd3-geo';
+import { feature } from 'topojson-client';
+
+const InteractiveMap = () => {
+    const [mapData, setMapData] = useState(null);
+    const mapRef = useRef();
+
+    useEffect(() => {
+        fetch('europe.topojson')
+            .then(response => response.json())
+            .then(topojsonData => {
+                setMapData(feature(topojsonData, topojsonData.objects.countries));
+            })
+            .catch(error => console.error('Error loading the map data: ', error));
+    }, []);
+
+    useEffect(() => {
+        if (!mapData) return;
+
+        const svg = d3.select(mapRef.current);
+        const projection = geoMercator().scale(700).center([20, 60]);
+        const pathGenerator = geoPath().projection(projection);
+
+        svg.selectAll('.country')
+            .data(mapData.features)
+            .enter()
+            .append('path')
+            .attr('class', 'country')
+            .attr('d', pathGenerator)
+            .attr('fill', 'grey')
+            .attr('stroke', 'white');
+
+    }, [mapData]);
+
+    return( 
+    <div>
+        <svg ref={mapRef} style={{ width: '100%', height: 'auto' }}></svg>
+        <p>This is an interactive map</p>
+    </div>
+
+    );
+};
+
+export default InteractiveMap;