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/59f22074bbed432da501d82590a297a0","author","ax-va","id","d5e4a7d5541f4330ade9f4e982fd2c61","title","D3 select() and selectAll() examples","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","59f22074bbed432da501d82590a297a0","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","README.md","Demonstrate manipulating the DOM through D3's `selectAll()`,\n`select()`, `insert()`, and `attr()`.\n\nVisit also my repo\nhttps://github.com/ax-va/JavaScript-Crash-Course-Morgan-2024.\n","script.js","/*\nDemonstrate manipulating the DOM through D3's `selectAll()`, `select()`, and `insert()`.\n */\n\n// Select all the SVG circles by a CSS selector (`circle`) and set the \"fill\" attribute\n// of every element in the selection to \"hotpink\" to change their colors.\nd3.selectAll('circle').attr('fill', 'hotpink');\n\nd3.selectAll('circle')\n .attr('fill', 'hotpink') // `.attr` returns the selection itself.\n // Make the radius of each circle greater than the previous one.\n .attr('r', (d, i) => 10 + i * 5); // `d` for datum, `i` for index of the element in the selection, starting from 0\n\n// First select the `body` element\nd3.select('body')\n // Then insert the `h1` element before the `svg` element\n .insert('h1', 'svg')\n // Add the text content to the inserted element in that selection\n .text('Hello, D3!');\n","slug","D3.js - selectAll(), select(), insert(), and attr()","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","427f9f67bbc846d887840153d6e71f5c","startCommitId","7dbef825ca3c4ec787fa3ec23a28cd50","forkedFrom","forkedFromVisibility",1731105250000,1731190921000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]