Activity 6

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_121":-5,"_62":16,"_122":-5,"_123":124,"_125":126},"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":72,"_101":72,"_44":45,"_102":-7,"_103":52,"_104":50,"_105":-5,"_106":107,"_108":16,"_109":110,"_111":112,"_113":43,"_114":-7,"_69":115,"_71":116,"_117":-5,"_118":68,"_119":120},"vizContent",{"_42":72,"_73":74,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":16,"_63":-7,"_64":41,"_65":66,"_67":68,"_69":70,"_71":70},"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/Msahith123/9732db4b502e44d286bec8b33092a159","author","Msahith123","id","1cb07e91ab2143cc9fe0327d0c404542","title","Activity-6","ownerHandle","Sunnyvulli","ownerDisplayName","vullihanumantharao@gmail.com","v3-user-msahith123","accountType","user","email","manisahiths54321@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/157946101?v=4","oauthProvider","github","oauthId","157946101","isAdmin","stripeCustomerId","handle","handleNormalized","msahith123","lifecycleEmailsEnabled",true,"createdAt",1791491324274,"updatedAt","9732db4b502e44d286bec8b33092a159","files",{"_75":76,"_77":78,"_79":80,"_81":82,"_83":84,"_85":86},"33252683",{"_87":99,"_89":100},"94121496",{"_87":97,"_89":98},"09158693",{"_87":95,"_89":96},"270fdb6c",{"_87":93,"_89":94},"29fbc049",{"_87":91,"_89":92},"8dbc301e",{"_87":88,"_89":90},"name","index.html","text","\n\n \n Activity 6\n \n \n \n \n \n \n \n

\n \n \n\n","README.md","A demonstration of how to start using D3 version 6.A\ndemonstration of how to start using D3 version 6.\n\n\n","index.js","import React, {\n useState,\n useCallback,\n useEffect,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n csv,\n arc,\n pie,\n scaleBand,\n scaleLinear,\n max,\n format,\n} from 'd3';\nimport { useData } from './useData';\nimport { AxisBottom } from './AxisBottom';\nimport { AxisLeft } from './AxisLeft';\nimport { Marks } from './Marks';\n\nconst width = 960;\nconst height = 500;\nconst margin = {\n top: 20,\n right: 30,\n bottom: 65,\n left: 220,\n};\nconst xAxisLabelOffset = 50;\n\nconst App = () => {\n const data = useData();\n\n if (!data) {\n return

Loading...

;\n }\n\n const innerHeight = height - margin.top - margin.bottom;\n const innerWidth = width - margin.left - margin.right;\n\n const yValue = (d) => d.Country;\n const xValue = (d) => d.Population;\n\n const siFormat = format('.2s');\n const xAxisTickFormat = (tickValue) =>\n siFormat(tickValue).replace('G', 'B');\n\n const yScale = scaleBand()\n .domain(data.map(yValue))\n .range([0, innerHeight])\n .paddingInner(0.15);\n\n const xScale = scaleLinear()\n .domain([0, max(data, xValue)])\n .range([0, innerWidth]);\n\n return (\n \n );\n};\nconst rootElement = document.getElementById('root');\nReactDOM.render(, rootElement);\n","Marks.js","export const Marks = ({\n data,\n xScale,\n yScale,\n xValue,\n yValue,\n tooltipFormat,\n}) =>\n data.map((d) => (\n \n {tooltipFormat(xValue(d))}\n \n ));\n","AxisLeft.js","export const AxisLeft = ({ yScale }) =>\n yScale.domain().map((tickValue) => (\n \n \n {tickValue}\n \n \n ));\n","useData.js","import React, { useState, useEffect } from 'react';\nimport { csv } from 'd3';\n\nconst csvUrl =\n 'https://raw.githubusercontent.com/INDU1998-GIT/datasets/main/Activity7_Population.csv';\n\nexport const useData = () => {\n const [data, setData] = useState(null);\n\n useEffect(() => {\n const row = (d) => {\n d.Population = +d['2020'] * 1000;\n return d;\n };\n csv(csvUrl, row).then((data) => {\n setData(data.slice(0, 30));\n });\n }, []);\n\n return data;\n};\n","slug","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","deae77c75d3c4f538651e6e5ac29372e","startCommitId","4b7c954521f6413bbac67996ae45ecd7","forkedFrom","forkedFromVisibility",1712713358000,1712714055000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]