+ {/*
*/}
wavelength vs absorbance
diff --git a/src/components/TestAnalyticsPie.js b/src/components/TestAnalyticsPie.js
index ab9a842..95726e9 100644
--- a/src/components/TestAnalyticsPie.js
+++ b/src/components/TestAnalyticsPie.js
@@ -17,7 +17,7 @@ class TestAnalyticsPie extends Component {
drawChart(data) {
if (!data) return;
-
+
var margin = { top: 60, right: 20, bottom: 30, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
@@ -56,12 +56,23 @@ class TestAnalyticsPie extends Component {
.enter().append("g")
.attr("class", "arc");
+ var tooltip = d3.select("#category-diagram")
+ .append("div")
+ .style("position", "absolute")
+ .style("z-index", "10")
+ .style("visibility", "hidden")
+ .style("background", "#fff")
+ .text("a simple tooltip");
+
arc.append("path")
.attr("d", path)
- .attr("fill", function (d) { return color(d.data.category); });
+ .attr("fill", function (d) { return color(d.data.category); })
+ .on('mouseover', (event, d) => { tooltip.text(`${d.data.category} (${d.data.count})`); console.log(d.data.count); return tooltip.style("visibility", "visible"); });
console.log(arc)
+
+
arc.append("text")
.attr("transform", function (d) {
return "translate(" + label.centroid(d) + ")";
diff --git a/src/components/WorldMap.js b/src/components/WorldMap.js
new file mode 100644
index 0000000..4627498
--- /dev/null
+++ b/src/components/WorldMap.js
@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from "react"
+import { geoEqualEarth, geoPath } from "d3-geo"
+import { feature } from "topojson-client"
+
+const cities = [
+ { name: "Tokyo", coordinates: [139.6917,35.6895], population: 37843000 },
+ { name: "Jakarta", coordinates: [106.8650,-6.1751], population: 30539000 },
+ { name: "Delhi", coordinates: [77.1025,28.7041], population: 24998000 },
+ { name: "Manila", coordinates: [120.9842,14.5995], population: 24123000 },
+ { name: "Seoul", coordinates: [126.9780,37.5665], population: 23480000 },
+ { name: "Shanghai", coordinates: [121.4737,31.2304], population: 23416000 },
+ { name: "Karachi", coordinates: [67.0099,24.8615], population: 22123000 },
+ { name: "Beijing", coordinates: [116.4074,39.9042], population: 21009000 },
+ { name: "New York", coordinates: [-74.0059,40.7128], population: 20630000 },
+ { name: "Guangzhou", coordinates: [113.2644,23.1291], population: 20597000 },
+ { name: "Sao Paulo", coordinates: [-46.6333,-23.5505], population: 20365000 },
+ { name: "Mexico City", coordinates: [-99.1332,19.4326], population: 20063000 },
+ { name: "Mumbai", coordinates: [72.8777,19.0760], population: 17712000 },
+ { name: "Osaka", coordinates: [135.5022,34.6937], population: 17444000 },
+ { name: "Moscow", coordinates: [37.6173,55.7558], population: 16170000 },
+ { name: "Dhaka", coordinates: [90.4125,23.8103], population: 15669000 },
+ { name: "Greater Cairo", coordinates: [31.2357,30.0444], population: 15600000 },
+ { name: "Los Angeles", coordinates: [-118.2437,34.0522], population: 15058000 },
+ { name: "Bangkok", coordinates: [100.5018,13.7563], population: 14998000 },
+ { name: "Kolkata", coordinates: [88.3639,22.5726], population: 14667000 },
+ { name: "Buenos Aires", coordinates: [-58.3816,-34.6037], population: 14122000 },
+ { name: "Tehran", coordinates: [51.3890,35.6892], population: 13532000 },
+ { name: "Istanbul", coordinates: [28.9784,41.0082], population: 13287000 },
+ { name: "Lagos", coordinates: [3.3792,6.5244], population: 13123000 },
+ { name: "Shenzhen", coordinates: [114.0579,22.5431], population: 12084000 },
+ { name: "Rio de Janeiro", coordinates: [-43.1729,-22.9068], population: 11727000 },
+ { name: "Kinshasa", coordinates: [15.2663,-4.4419], population: 11587000 },
+ { name: "Tianjin", coordinates: [117.3616,39.3434], population: 10920000 },
+ { name: "Paris", coordinates: [2.3522,48.8566], population: 10858000 },
+ { name: "Lima", coordinates: [-77.0428,-12.0464], population: 10750000 },
+]
+
+const projection = geoEqualEarth()
+ .scale(160)
+ .translate([ 800 / 2, 450 / 2 ])
+
+const WorldMap = () => {
+ const [geographies, setGeographies] = useState([])
+
+ useEffect(() => {
+ fetch("/world-110m.json")
+ .then(response => {
+ if (response.status !== 200) {
+ console.log(`There was a problem: ${response.status}`)
+ return
+ }
+ response.json().then(worlddata => {
+ setGeographies(feature(worlddata, worlddata.objects.countries).features)
+ })
+ })
+ }, [])
+
+ const handleCountryClick = countryIndex => {
+ console.log("Clicked on country: ", geographies[countryIndex])
+ }
+
+ const handleMarkerClick = i => {
+ console.log("Marker: ", cities[i])
+ }
+
+ return (
+
+ )
+}
+
+export default WorldMap
\ No newline at end of file
diff --git a/src/firebase.js b/src/firebase.js
index aecdba5..636613a 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -1,4 +1,4 @@
-import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "firebase/firestore";
+import { getFirestore} from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
diff --git a/src/index.js b/src/index.js
index 9a3cd56..22e3a57 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,6 +9,8 @@ import App from './App';
import reportWebVitals from './reportWebVitals';
import Devices from './components/Devices';
import TestAnalytics from './components/TestAnalytics';
+import WorldMap from './components/WorldMap';
+import RegistraionChart from './RegistraionChart';
const router = createBrowserRouter([
{
@@ -26,6 +28,10 @@ const router = createBrowserRouter([
{
path: "/analytics",
element:
,
+ },
+ {
+ path: "/map",
+ element:
,
}
]);