Data

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_108":-5,"_61":16,"_109":-5,"_110":111,"_112":113},"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,"_87":70,"_44":88,"_89":-7,"_90":51,"_91":49,"_92":-5,"_93":94,"_95":16,"_96":97,"_98":99,"_100":43,"_101":-7,"_67":102,"_69":103,"_104":-5,"_105":66,"_106":107},"vizContent",{"_42":70,"_71":72,"_28":29},"ownerAccount",{"_42":49,"_50":51,"_52":53,"_54":48,"_55":56,"_57":58,"_59":60,"_61":16,"_62":-7,"_63":41,"_64":41,"_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/ax-va/803e93c8077e4765a07d5242abaac49c","author","ax-va","id","f29cb9fc90c5429f835d700315a9664c","title","D3.js - data(), join(), transition(), duration(), and key functions","ownerHandle","ownerDisplayName","AxVa 🐍 💪","v3-user-ax-va","accountType","user","email","alexander.informatics@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/85578981?v=4","oauthProvider","github","oauthId","85578981","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791073205062,"updatedAt","803e93c8077e4765a07d5242abaac49c","files",{"_73":74,"_75":76,"_77":78},"59340103",{"_79":85,"_81":86},"29fbc049",{"_79":83,"_81":84},"8dbc301e",{"_79":80,"_81":82},"name","index.html","text","\n\n \n Data\n \n \n

\n \n \n \n

\n \n \n \n \n\n","README.md","Demonstrate using D3's `join()` with `enter`, `update`, and\n`exit`.\n\nVisit also my repo\nhttps://github.com/ax-va/JavaScript-Crash-Course-Morgan-2024.\n","script.js","let numbers = [3, 2, 1];\n\nfunction update(data) {\n d3.select('svg')\n // The next line is needed, even though the first time\n // this is called there are no `circle` elements to select.\n .selectAll('circle')\n // Binds the array of numbers to the selection of circles, one by one.\n // A *key function* helps change the default *join-by-index* mode that assumes\n // that every index in the array will always map to the same index in the selection.\n // The `d => d` key function sets that given a datum, the datum itself is the unique identifier.\n // Another better example would be `d => d.employeeId`.\n .data(data, (d) => d)\n // Add or remove elements:\n // if there aren't enough circle elements in the `svg` element\n // for all the items in `data`, then D3 should add more\n // or conversely, if there are too many, D3 should remove some.\n .join(\n // Add a new element:\n // `enter` is a selection of temporary placeholders for each of the entering elements.\n (enter) =>\n enter\n .append('circle')\n // Set positions immediately because they are *before* the transition\n .attr('cx', (d, i) => (i + 1) * 50)\n .attr('cy', 50)\n // Set color to black immediately\n .attr('fill', 'black')\n // Then animate the radius from zero (the default value)\n // to the value calculated from the datum.\n .transition()\n .duration(500) // ms\n // The radius increase will be animated because it is *after* the transition\n .attr('r', (d, i) => d * 5)\n // Animate the color change to hotpink\n .attr('fill', 'hotpink'),\n // -> Any new circle will appear in the right position immediately, and\n // the change in size (from zero to the desired radius) will animate.\n // Modify an existing element:\n // `update` is a selection containing all the existing elements that are already bound to a datum.\n (update) =>\n update\n .transition()\n .duration(500)\n // Animate only the `cx` attribute to move the circle to the right\n .attr('cx', (d, i) => (i + 1) * 50),\n // Remove an existing element:\n // `exit` is a selection containing all the elements that should be removed.\n (exit) =>\n exit\n .transition()\n .duration(500)\n // Animate the circle radius back to zero before removing it\n .attr('r', 0)\n // Remove the element after waiting for animation\n .remove(),\n );\n}\n\nupdate(numbers);\n\nfunction getRandomNumber() {\n // `Math.random()` returns a number in the range [0, 1)\n return 1 + Math.random() * 3;\n}\n\nd3.select('#append').on('click', () => {\n // Push a random number onto the end of the numbers array\n numbers.push(getRandomNumber());\n update(numbers);\n});\n\nd3.select('#prepend').on('click', () => {\n // Place a random number onto the front of the numbers array\n numbers.unshift(getRandomNumber());\n update(numbers);\n});\n\nd3.select('#drop').on('click', () => {\n // Pop the last number from the array\n numbers.pop();\n update(numbers);\n});\n","slug","D3.js - join() with enter, update, and exit","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","ed258321df7940bc839df754dd290152","startCommitId","457382c6500f463d9b6e82c7ca5cd64b","forkedFrom","forkedFromVisibility",1731359327000,1731359404000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]