Fork of Scatter Plot with Shape

\n \n \n\n","viz.js","import { csvParse, select } from 'd3';\nimport { scatterPlot } from './scatterPlot';\n\nexport const viz = (container, { state, setState }) => {\n const width = window.innerWidth;\n const height = window.innerHeight;\n\n const svg = select(container)\n .selectAll('svg')\n .data([null])\n .join('svg')\n .attr('width', width)\n .attr('height', height);\n\n // state.data could be:\n // * undefined\n // * 'LOADING'\n // * An array of objects\n const { data } = state;\n\n if (data && data !== 'LOADING') {\n svg.call(scatterPlot, {\n data,\n width,\n height,\n xValue: (d) => d.sepal_length,\n yValue: (d) => d.petal_length,\n shapeValue: (d) => d.species,\n xAxisLabel: 'Sepal Length',\n yAxisLabel: 'Petal Length',\n shapeLegendLabel: 'Species',\n margin: {\n top: 10,\n right: 10,\n bottom: 50,\n left: 50,\n },\n shapeLegendX: 850,\n shapeLegendY: 320,\n });\n }\n\n if (data === undefined) {\n setState((state) => ({\n ...state,\n data: 'LOADING',\n }));\n fetch(\n 'https://raw.githubusercontent.com/vishnupriya439/Iris/main/iris.csv',\n )\n .then((response) => response.text())\n .then((csvString) => {\n const data = csvParse(csvString);\n\n for (const d of data) {\n d.petal_length = +d.petal_length;\n d.petal_width = +d.petal_width;\n d.sepal_length = +d.sepal_length;\n d.sepal_width = +d.sepal_width;\n }\n\n setState((state) => ({\n ...state,\n data,\n }));\n });\n }\n};\n","slug","Activity6_Task3.2","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","13e7364b4e0446e79eafd73df855e0d7","startCommitId","79d3d66b299a45bdbe7fc849d580353b","forkedFrom","forkedFromVisibility",1712787353000,1712788985000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]