Fork of Scatter Plot with Shape

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_124":-5,"_60":16,"_125":-5,"_126":127,"_128":129},"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":70,"_103":70,"_44":104,"_105":-7,"_106":51,"_107":49,"_108":-5,"_109":110,"_111":16,"_112":113,"_114":115,"_116":43,"_117":-7,"_67":118,"_69":119,"_120":-5,"_121":66,"_122":123},"vizContent",{"_42":70,"_71":72,"_28":29},"ownerAccount",{"_42":49,"_50":51,"_52":48,"_53":48,"_54":55,"_56":57,"_58":59,"_60":16,"_61":-7,"_62":41,"_63":64,"_65":66,"_67":68,"_69":68},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":41,"_47":48},"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/PragnaSahas/8a56ceb631e14fc3b9ccd09e15294946","author","PragnaSahas","id","b1c97fc3353140c597cc17f790f06cd8","title","Activity_6_3-2","ownerHandle","ownerDisplayName","sahaspragna6@gmail.com","v3-user-pragnasahas","accountType","user","email","displayName","avatar","https://avatars.githubusercontent.com/u/163632143?v=4","oauthProvider","github","oauthId","163632143","isAdmin","stripeCustomerId","handle","handleNormalized","pragnasahas","lifecycleEmailsEnabled",true,"createdAt",1791491332444,"updatedAt","8a56ceb631e14fc3b9ccd09e15294946","files",{"_73":74,"_75":76,"_77":78,"_79":80,"_81":82,"_83":84,"_85":86},"12710516",{"_87":101,"_89":102},"21071970",{"_87":99,"_89":100},"31992752",{"_87":97,"_89":98},"65013004",{"_87":95,"_89":96},"270fdb6c",{"_87":93,"_89":94},"8dbc301e",{"_87":91,"_89":92},"b809c858",{"_87":88,"_89":90},"name","styles.css","text","body {\n margin: 0;\n overflow: hidden;\n}\n","index.html","\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","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","viz.js","import { csvParse, select } from 'd3';\nimport { scatterPlot } from './scatterPlot';\n\nexport const viz = (\n container,\n { state, setState }\n) => {\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('https://raw.githubusercontent.com/INDU1998-GIT/datasets/main/iris.csv')\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","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","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","slug","Fork of Activity_6_3-2","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","3eb133fb3805434784d38d222d8b7a8a","startCommitId","6160a80780f54520a2526d9a2cb808ba","forkedFrom","forkedFromVisibility",1712723105000,1712723851000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]