Fork of Scatter Plot with Shape

[{"_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/sirichandana017/2c3c2d2f9c7d4139927f4eafd5e481a0","author","sirichandana017","id","86a75dc8bdbe4965ba353a79d4bd44c8","title","Hello VizHub","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-sirichandana017","accountType","user","email","sirichandana017@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/35754130?v=4","oauthProvider","github","oauthId","35754130","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791491327121,"updatedAt","2c3c2d2f9c7d4139927f4eafd5e481a0","files",{"_74":75,"_76":77,"_78":79,"_80":81,"_82":83,"_84":85,"_86":87},"17624923",{"_88":102,"_90":103},"18880764",{"_88":100,"_90":101},"23625494",{"_88":98,"_90":99},"39518665",{"_88":96,"_90":97},"75408719",{"_88":94,"_90":95},"82599576",{"_88":92,"_90":93},"8dbc301e",{"_88":89,"_90":91},"name","index.html","text","\n\n \n Fork of Scatter Plot with Shape\n \n \n \n \n

\n \n \n\n","index.js","import { select } from 'd3';\nimport { viz } from './viz';\nconst container = select('#app').node();\nlet state = {};\n\nconst render = () => {\n viz(container, {\n state,\n setState,\n });\n};\n\nconst setState = (next) => {\n state = next(state);\n render();\n};\n\nrender();\n","shapeLegend.js","import { symbol } from 'd3';\n\nconst symbolGenerator = symbol();\n\nexport const shapeLegend = (\n selection,\n {\n shapeScale,\n shapeLegendLabel,\n shapeLegendX,\n shapeLegendY,\n tickSpacing = 30,\n tickPadding = 15,\n shapeLegendLabelX = -10,\n shapeLegendLabelY = -24,\n },\n) => {\n const shapeLegendG = selection\n .selectAll('g.shape-legend')\n .data([null])\n .join('g')\n .attr('class', 'shape-legend')\n .attr(\n 'transform',\n `translate(${shapeLegendX},${shapeLegendY})`,\n );\n\n shapeLegendG\n .selectAll('text.shape-legend-label')\n .data([null])\n .join('text')\n .attr('x', shapeLegendLabelX)\n .attr('y', shapeLegendLabelY)\n .attr('class', 'shape-legend-label')\n .attr('font-family', 'sans-serif')\n .text(shapeLegendLabel);\n\n shapeLegendG\n .selectAll('g.tick')\n .data(shapeScale.domain())\n .join((enter) =>\n enter\n .append('g')\n .attr('class', 'tick')\n .call((selection) => {\n selection.append('path');\n selection.append('text');\n }),\n )\n .attr(\n 'transform',\n (d, i) => `translate(0, ${i * tickSpacing})`,\n )\n .attr('font-size', 10)\n .attr('font-family', 'sans-serif')\n .call((selection) => {\n selection\n .select('path')\n .attr('d', (d) =>\n symbolGenerator.type(shapeScale(d)).size(200)(),\n );\n selection\n .select('text')\n .attr('dy', '0.32em')\n .attr('x', tickPadding)\n .text((d) => d);\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/INDU1998-GIT/datasets/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","axes.js","import { axisLeft, axisBottom } from 'd3';\n\nexport const axes = (\n selection,\n {\n xScale,\n yScale,\n xAxisLabel,\n yAxisLabel,\n xAxisLabelOffset = 25,\n yAxisLabelOffset = 30,\n },\n) => {\n selection\n .selectAll('g.y-axis')\n .data([null])\n .join('g')\n .attr('class', 'y-axis')\n .attr('transform', `translate(${xScale.range()[0]},0)`)\n .call(axisLeft(yScale));\n\n selection\n .selectAll('g.x-axis')\n .data([null])\n .join('g')\n .attr('class', 'x-axis')\n .attr('transform', `translate(0,${yScale.range()[0]})`)\n .call(axisBottom(xScale));\n\n selection\n .selectAll('text.x-axis-label')\n .data([null])\n .join('text')\n .attr('x', (xScale.range()[0] + xScale.range()[1]) / 2)\n .attr('y', yScale.range()[0] + xAxisLabelOffset)\n .attr('class', 'x-axis-label')\n .attr('alignment-baseline', 'hanging')\n .attr('text-anchor', 'middle')\n .attr('font-family', 'sans-serif')\n .text(xAxisLabel);\n\n selection\n .selectAll('text.y-axis-label')\n .data([null])\n .join('text')\n .attr('class', 'y-axis-label')\n .attr('text-anchor', 'middle')\n .attr('transform', 'rotate(-90)')\n .attr('font-family', 'sans-serif')\n .attr('x', -(yScale.range()[0] + yScale.range()[1]) / 2)\n .attr('y', xScale.range()[0] - yAxisLabelOffset)\n .text(yAxisLabel);\n};\n","scatterPlot.js","import {\n extent,\n scaleLinear,\n scaleOrdinal,\n schemeCategory10,\n symbolsFill,\n symbol,\n} from 'd3';\nimport { axes } from './axes';\nimport { shapeLegend } from './shapeLegend';\n\nconst symbolGenerator = symbol();\n\nexport const scatterPlot = (\n selection,\n {\n data,\n width,\n height,\n xValue,\n yValue,\n shapeValue,\n margin,\n xAxisLabel,\n yAxisLabel,\n shapeLegendLabel,\n shapeLegendX,\n shapeLegendY,\n },\n) => {\n const xScale = scaleLinear()\n .domain(extent(data, xValue))\n .range([margin.left, width - margin.right]);\n\n const yScale = scaleLinear()\n .domain(extent(data, yValue))\n .range([height - margin.bottom, margin.top]);\n\n const shapeScale = scaleOrdinal()\n .domain(data.map(shapeValue))\n .range(symbolsFill);\n\n selection.call(axes, {\n xScale,\n yScale,\n xAxisLabel,\n yAxisLabel,\n });\n\n selection.call(shapeLegend, {\n shapeScale,\n shapeLegendLabel,\n shapeLegendX,\n shapeLegendY,\n });\n\n selection\n .selectAll('path.mark')\n .data(data)\n .join('path')\n .attr('class', 'mark')\n .attr('transform', (d) => {\n const x = xScale(xValue(d));\n const y = yScale(yValue(d));\n return `translate(${x},${y})`;\n })\n .attr('d', (d) => {\n const shape = shapeScale(shapeValue(d));\n return symbolGenerator.type(shape).size(200)();\n });\n};\n","styles.css","body {\n margin: 0;\n overflow: hidden;\n}\n","slug","Activity8-Task3.2","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","6f8eae91096644a5abacfce35b388742","startCommitId","c0ff06bbde8648509956c33c5dca3ac2","forkedFrom","forkedFromVisibility",1712705907000,1712796774000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]