Fork of Scatter Plot with Shape

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_126":-5,"_63":16,"_127":-5,"_128":129,"_130":131},"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,"_105":72,"_44":106,"_107":-7,"_108":52,"_109":50,"_110":-5,"_111":112,"_113":16,"_114":115,"_116":117,"_118":43,"_119":-7,"_69":120,"_71":121,"_122":-5,"_123":68,"_124":125},"vizContent",{"_42":72,"_73":74,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":16,"_64":-7,"_65":41,"_66":41,"_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/images/94e83e0531b96737b1cf2546118c5d3f8425813ff20c45897e6f12763a9b2944.png","sourceType","v3","originalUrl","https://vizhub.com/lakshmi-keerthi/9be0d2b41c894ba1b36a5e1810c8adf3","author","lakshmi-keerthi","id","86a75dc8bdbe4965ba353a79d4bd44c8","title","Hello VizHub","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-lakshmi-keerthi","accountType","user","email","keerthi16101996@gmail.com","displayName","Lakshmi Keerthi","avatar","https://avatars.githubusercontent.com/u/37924779?v=4","oauthProvider","github","oauthId","37924779","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791491328402,"updatedAt","9be0d2b41c894ba1b36a5e1810c8adf3","files",{"_75":76,"_77":78,"_79":80,"_81":82,"_83":84,"_85":86,"_87":88},"11148014",{"_89":103,"_91":104},"11709643",{"_89":101,"_91":102},"53661440",{"_89":99,"_91":100},"56364756",{"_89":97,"_91":98},"93691573",{"_89":95,"_91":96},"270fdb6c",{"_89":93,"_91":94},"8dbc301e",{"_89":90,"_91":92},"name","index.html","text","\n\n \n Fork of Scatter Plot with Shape\n \n \n \n \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","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', 15)\n .attr('font-family', 'sans-serif')\n .call((selection) => {\n selection\n .select('path')\n .attr('d', (d) =>\n symbolGenerator.type(shapeScale(d)).size(100)(),\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://gist.githubusercontent.com/lakshmi-keerthi/ad9bf776cb02d15f7d5a436a24083137/raw/8d0af429712ac4f0290890add3959678c3aa08d7/iris_ex8.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","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","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","style.css","body {\n margin: 0;\n overflow: hidden;\n}\n","slug","Activity8_Task3_2","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","b35d01f8ec3a40ea8dff1e17f886c8fb","startCommitId","154ba54eae5a429a812d1c2872e4eb3e","forkedFrom","forkedFromVisibility",1712732360000,1712744763000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]