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/f29cb9fc90c5429f835d700315a9664c","author","ax-va","id","59f22074bbed432da501d82590a297a0","title","D3.js - selectAll(), select(), insert(), and attr()","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","f29cb9fc90c5429f835d700315a9664c","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 `data()`, `join()`, `transition()`,\n`duration()`, and key functions.\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('circle')\n .transition()\n .duration(500) // ms\n .attr('cx', (d, i) => (i + 1) * 50)\n .attr('cy', 50)\n .attr('r', (d, i) => d * 5);\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 - data(), join(), transition(), duration(), and key functions","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","cd2e4f81e66442f5b176740251797f5f","startCommitId","aa7cff335c014583afb2f69cf48a7bc7","forkedFrom","forkedFromVisibility",1731257835000,1731258043000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]