World Map

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_125":-5,"_62":16,"_126":-5,"_127":128,"_129":130},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":71,"_104":71,"_44":105,"_106":-7,"_107":52,"_108":50,"_109":-5,"_110":111,"_112":16,"_113":114,"_115":116,"_117":43,"_118":-7,"_68":119,"_70":120,"_121":-5,"_122":67,"_123":124},"vizContent",{"_42":71,"_72":73,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":16,"_63":-7,"_64":41,"_65":41,"_66":67,"_68":69,"_70":69},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":47,"_48":49},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/sagam929/433f1d3afe4d482a9920bb56bc5c20ae","author","sagam929","id","40b52eef84c342d4be796d7c200011fc","title","World Map","ownerHandle","matiasconde","ownerDisplayName","Matias Conde","v3-user-sagam929","accountType","user","email","vinodreddysagam929@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/38060879?v=4","oauthProvider","github","oauthId","38060879","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791333390066,"updatedAt","433f1d3afe4d482a9920bb56bc5c20ae","files",{"_74":75,"_76":77,"_78":79,"_80":81,"_82":83,"_84":85,"_86":87},"1f928926",{"_88":102,"_90":103},"29fbc049",{"_88":100,"_90":101},"78052a1c",{"_88":98,"_90":99},"8dbc301e",{"_88":96,"_90":97},"a61fb05b",{"_88":94,"_90":95},"d54c2a3f",{"_88":92,"_90":93},"fd09e543",{"_88":89,"_90":91},"name","index.js","text","import React, {\n useState,\n useCallback,\n useEffect,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport {scaleSqrt, max} from 'd3'\n// import { csv, scaleTime, scaleLinear, max, timeFormat, extent } from 'd3';\nimport { useWorldAtlas } from './useWorldAtlas';\nimport { useCities } from './useCities';\n\nimport { Marks } from './Marks';\nconst json_url2 = 'https://unpkg.com/world-atlas@2.0.2/countries-50m.json'\n\nconst csv_url =\n 'https://gist.githubusercontent.com/curran/0ac4077c7fc6390f5dd33bf5c06cb5ff/raw/605c54080c7a93a417a3cea93fd52e7550e76500/UN_Population_2019.csv';\nconsole.log(json_url2)\n\nconst width = 960;\nconst height = 500;\n\nconst App = () => {\n const worldAtlas = useWorldAtlas();\n const cities = useCities();\n\n if (!worldAtlas || !cities) {\n return

Loading...

;\n }\n \n const sizeValue = d => d.population\n const maxRadius = 15\n const sizeScale = scaleSqrt()\n \t.domain([0, max(cities, sizeValue)])\n \t.range([0,maxRadius])\n\n return (\n \n );\n};\n\nconst rootElement = document.getElementById(\n 'root'\n);\nReactDOM.render(, rootElement);\n","useWorldAtlas.js","import React, {\n useState,\n useEffect,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport {json} from 'd3';\nimport {feature, mesh} from 'topojson';\nconst json_url = 'https://unpkg.com/world-atlas@2.0.2/countries-50m.json'\nexport const useWorldAtlas = () => {\n \n\tconst [data, setData] = useState(null);\n\n useEffect(() => {\n json(json_url).then(topology => {\n const {countries, land} = topology.objects;\n setData({\n land: feature(topology,land),\n \tinteriors: mesh(topology, countries, (a, b) => a !== b)\n \t});\n });\n }, []);\n return data\n}","Marks.js","import {\n geoEqualEarth,\n geoNaturalEarth1,\n geoPath,\n geoGraticule,\n} from 'd3';\n\nconst projection = geoNaturalEarth1();\nconst path = geoPath(projection);\nconst graticule = geoGraticule();\n\nexport const Marks = ({\n sizeScale,\n sizeValue,\n worldAtlas: { land, interiors },\n cities,\n}) => (\n \n \n \n {land.features.map((feature) => (\n \n ))}\n\n \n {cities.map((d) => {\n const [x, y] = projection([d.lng, d.lat]);\n return (\n \n );\n })}\n \n);\n","index.html","\n\n \n World Map\n \n\n\n\n \n \n \n \n \n \n \n

\n \n \n","style.css","body {\n margin: 0;\n overflow: hidden;\n font-family: 'Poppins', sans-serif;\n background-color: #f0f0f0; /* Set background color */\n}\n\n#cricket-map {\n width: 100%;\n height: 600px; /* Adjust height as needed */\n border: 1px solid black;\n}\n\n/* Customize the colors for map features */\n.marks .land {\n fill: #c3c3c3; /* Adjust land color */\n stroke: none; /* Remove land stroke */\n}\n\n.marks .sphere {\n fill: #e4e4e2; /* Adjust sphere color */\n stroke: none; /* Remove sphere stroke */\n}\n\n.marks .interiors {\n fill: none;\n stroke: #c3c3c3; /* Adjust interior stroke color */\n}\n\n.marks .graticules {\n fill: none;\n stroke: #d5d5d5; /* Adjust graticules stroke color */\n}\n\ncircle {\n fill: #ff0000; /* Adjust circle color */\n opacity: 0.3;\n}\n","README.md","A program that loads in some [data CSS Named Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) using D3 utilities and uses React state to Keep track of the data. ","useCities.js","import { useState, useEffect } from 'react';\nimport { csv } from 'd3';\n\nconst csv_url =\n 'https://gist.githubusercontent.com/sagam929/e0381791c04f868adf08a5ebe7614b9f/raw/7cb5e65363713a9d1173eac3137088c0ee117627/cityInWorld.csv';\n\nconst row = (d) => {\n d.lat = +d.lat;\n d.lng = +d.lng;\n d.population = +d.population;\n return d;\n};\nexport const useCities = () => {\n const [data, setData] = useState(null);\n\n useEffect(() => {\n csv(csv_url, row).then(setData);\n }, []);\n console.log(data);\n return data;\n};\n","slug","ICE-8:World Map of Different cites and Loacations","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","2bdaf8dd68db4c8a90f8129f0535ef8c","startCommitId","1d609aaead724cc587f1668db91b5a41","forkedFrom","forkedFromVisibility",1712088555000,1712088963000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]