D3 map with countries (without data display)

frontend/src/App.js

@@ -4,6 +4,7 @@ import 'primereact/resources/themes/lara-light-cyan/theme.css'
 import ModelTable from './components/ModelTable'
 import LanguageTable from './components/LanguageTable'
 import DatasetTable from './components/DatasetTable'
+import WorldMap from './components/WorldMap'
 import AutoComplete from './components/AutoComplete'
 
 function App () {
@@ -12,7 +13,7 @@ function App () {
   const [error, setError] = useState(null)
   const [allSuggestions, setAllSuggestions] = useState([])
   const [filters, setFilters] = useState([])
-
+  const [topology, setTopology] = useState(null)
   useEffect(() => {
     fetch('/results.json')
       .then(response => {
@@ -31,6 +32,22 @@ function App () {
       })
   }, [])
 
+  useEffect(() => {
+    fetch('/countries.json')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok')
+        }
+        return response.json()
+      })
+      .then(jsonData => {
+        setTopology(jsonData)
+      })
+      .catch(err => {
+        setError(err.message)
+        setLoading(false)
+      })
+  }, [])
   useEffect(() => {
     if (data) {
       const models = data.model_table.map(item => ({ type: 'Model', value: item.model, detail: item.provider, searchText: item.provider.toLowerCase() + ' ' + item.model.toLowerCase() }))
@@ -87,6 +104,17 @@ function App () {
         {error && <p>Error: {error}</p>}
         {data && (
           <>
+            <div
+              style={{
+                flex: '100vw 100vw 100vw',
+                maxWidth: 'min(100vw, 900px)',
+                marginBottom: '2rem'
+              }}
+            >
+              <div id='figure'>
+                <WorldMap data={data} topology={topology} />
+              </div>
+            </div>
             <div
               style={{
                 flex: '60vw 100vw 40vw',

frontend/src/components/WorldMap.js

@@ -0,0 +1,58 @@
+import { useRef, useEffect } from 'react';
+import * as d3 from 'd3';
+import { feature } from 'topojson-client';
+
+const WorldMap = ({ data, topology }) => {
+  const svgRef = useRef(null);
+
+  useEffect(() => {
+    const createMap = async () => {
+      // Clear any existing SVG content
+      d3.select(svgRef.current).selectAll("*").remove();
+      
+      // Set dimensions
+      const width = 800;
+      const height = 450;
+      
+      // Create SVG
+      const svg = d3.select(svgRef.current)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("viewBox", [0, 0, width, height])
+        .attr("style", "max-width: 100%; height: auto;");
+        
+      // Create a projection
+      const projection = d3.geoNaturalEarth1()
+        .scale(width / 2 / Math.PI)
+        .translate([width / 2, height / 2]);
+        
+      // Create a path generator
+      const path = d3.geoPath()
+        .projection(projection);
+      
+      // Convert TopoJSON to GeoJSON
+      const countries = feature(topology, topology.objects.countries);
+      
+      // Draw the map
+      svg.append("g")
+        .selectAll("path")
+        .data(countries.features)
+        .join("path")
+        .attr("fill", "#ccc")  // Grey background
+        .attr("d", path)
+        .attr("stroke", "#fff")
+        .attr("stroke-width", 0.5);
+    };
+    
+    createMap();
+  }, [data, topology]);
+
+  return (
+    <div className="world-map-container">
+      <h2>World Language Distribution</h2>
+      <svg ref={svgRef}></svg>
+    </div>
+  );
+};
+
+export default WorldMap; 

frontend/src/index.css

@@ -58,6 +58,15 @@ html, body, #root {
   color: white;
 }
 
+#figure {
+  width: 100%;
+  min-width: 600px;
+  height: 600px;
+  border: 1px solid #bdbdbd;
+  border-radius: 10px;
+  padding: 10px;
+}
+
 .p-autocomplete-input {
   width: max(100%, 40vw);
   margin-top: 2vh;