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",1,"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/AsheshPinisetti/7cea515a43134181bc3f8e33276a2092","author","AsheshPinisetti","id","f3decaf872354043abe788816e2458e4","title","tutorial 3.2","ownerHandle","ownerDisplayName","asheshpinisetti@my.unt.edu","v3-user-asheshpinisetti","accountType","user","email","displayName","avatar","https://avatars.githubusercontent.com/u/143632065?v=4","oauthProvider","github","oauthId","143632065","isAdmin","stripeCustomerId","handle","handleNormalized","asheshpinisetti","lifecycleEmailsEnabled",true,"createdAt",1791491416172,"updatedAt","7cea515a43134181bc3f8e33276a2092","files",{"_73":74,"_75":76,"_77":78,"_79":80,"_81":82,"_83":84,"_85":86},"25552785",{"_87":101,"_89":102},"32294024",{"_87":99,"_89":100},"54502426",{"_87":97,"_89":98},"61163237",{"_87":95,"_89":96},"64839446",{"_87":93,"_89":94},"66842874",{"_87":91,"_89":92},"8dbc301e",{"_87":88,"_89":90},"name","index.html","text","\n\n \n Fork of Scatter Plot with Shape\n \n \n \n \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","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 const { data } = state;\n\n if (data && data !== 'LOADING') {\n svg.call(scatterPlot, {\n data,\n width,\n height,\n xValue: (d) => d.horsepower,\n yValue: (d) => d.highway_mpg,\n shapeValue: (d) => d.make,\n xAxisLabel: 'Horsepower',\n yAxisLabel: 'Highway MPG',\n shapeLegendLabel: 'Make',\n margin: {\n top: 10,\n right: 10,\n bottom: 50,\n left: 120,\n },\n colorLegendX: 850,\n colorLegendY: 420,\n });\n }\n\n if (data === undefined) {\n setState((state) => ({\n ...state,\n data: 'LOADING',\n }));\n fetch(\n 'https://gist.githubusercontent.com/AsheshPinisetti/7fb5d931276225cbc78064bd197a5948/raw/81314dd7a8c09f1d8a3cb00952942c7ece18c918/bubble.csv',\n )\n .then((response) => response.text())\n .then((csvString) => {\n const data = csvParse(csvString);\n\n for (const d of data) {\n d.horsepower = +d.horsepower;\n d.torque = +d.torque;\n d.highway_mpg = +d.highway_mpg;\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","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","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 = 40,\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","styles.css","body {\n margin: 0;\n overflow: hidden;\n}\n","slug","question 3","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","9bda7e3ffa8842969ba46547c2f05057","startCommitId","a44abe3fe97249f996999f56846e6427","forkedFrom","forkedFromVisibility",1713150038000,1713153211000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]