30:T950,chart = { const root = tree(data); const svg = d3.create("svg") // .attr("width", width) // .attr("height", height) // .attr("viewBox", [-width / 2, -height / 2, width, height]) const g = svg.append("g") const links = g.selectAll("path") .data(root.links()) .join("path") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.3) // .attr("stroke-opacity",d=> step==2 && d.source.data.id.split('-')[0]!=='796' ? 0 : step>0 && d.source.data.id.split('-')[0]!=='796'? 0.1 :0.3) .attr("stroke-width", 1.5) .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)); const node = g.selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`) node.append('circle') .attr("fill", d => step==0 ? '#333': (step==1 && (progress==3 || d.data.property?.method==selection[progress]) || step==2) ? colorScale(d.data.property?.method) :'#333') .attr('opacity', d => step==0 ? '0.5': (step==1 && (progress==3 || d.data.property?.method==selection[progress]) || step==2) ? 1 : '0.2') .attr("r", 3); // node.append('circle') // .attr("fill", d => step==2 && d.data.id.split('-')[0]=='796' ? colorScale(d.data.property.method): '#333') // .attr('opacity', d => step==2 && d.data.id.split('-')[0]!=='796' ? 0 : step>0 && d.data.id.split('-')[0]!=='796'? 0.2 :1) // .attr("r",d => step==2 && d.data.id.split('-')[0]=='796' ? 10: 2); node.append("title").text((d, i) => d.id) // svg.append("g") // .attr("font-family", "sans-serif") // .attr("font-size", 10) // .attr("stroke-linejoin", "round") // .attr("stroke-width", 3) // .selectAll("text") // .data(root.descendants()) // .join("text") // .attr("transform", d => ` // rotate(${d.x * 180 / Math.PI - 90}) // translate(${d.y},0) // rotate(${d.x >= Math.PI ? 180 : 0}) // `) // .attr("dy", "0.31em") // .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6) // .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end") // .text(d => d.data.name) // .clone(true).lower() // .attr("stroke", "white"); return svg.attr("viewBox", autoBox).node(); }31:[{"id":"e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","href":"https://static.observableusercontent.com/files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","name":"flare-2.json","type":"application/octet-stream","lastModified":1641513010156.062,"size":11634},{"id":"fc6dec68b96931b75d911d1144f298568b16892efe148d6034073722d8d4f9075bf3a7e3508f1bc2242e9671e9322da5e8757bdb2d093470da2b73835819cf7f","href":"https://static.observableusercontent.com/files/fc6dec68b96931b75d911d1144f298568b16892efe148d6034073722d8d4f9075bf3a7e3508f1bc2242e9671e9322da5e8757bdb2d093470da2b73835819cf7f","name":"tree.json","type":"application/json","lastModified":1641513872423.122,"size":167493},{"id":"436a343383711804a142a80d73c549ea1d7d90d44a78cc4a8765a55e04ce19cfd99a97ead81aed7405201cfd4f2a9e74207c32d81647accd8544fff2cfffc830","href":"https://static.observableusercontent.com/files/436a343383711804a142a80d73c549ea1d7d90d44a78cc4a8765a55e04ce19cfd99a97ead81aed7405201cfd4f2a9e74207c32d81647accd8544fff2cfffc830","name":"allTransactions.csv","type":"text/csv","lastModified":1641806295446.836,"size":5489331},{"id":"0f665dc25068af85d544ccd6808ec9367a18f85153fcd660e172c8988711d1a21a2bc1ab88c08113d2c87a99b015494ed0a8380fdc66604a75de4225363c699d","href":"https://static.observableusercontent.com/files/0f665dc25068af85d544ccd6808ec9367a18f85153fcd660e172c8988711d1a21a2bc1ab88c08113d2c87a99b015494ed0a8380fdc66604a75de4225363c699d","name":"tree@1.json","type":"application/json","lastModified":1641856712125.723,"size":70166}] 2e:{"title":"NFTs Transactions","cells":[{"id":1,"value":"# NFTs Transactions","pinned":false,"hidden":false,"mode":"md"},{"id":635,"value":"Visualizations for data story: https://nfts-cost-story.vercel.app/","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"streamgraph = Plot.plot({\n width: width,\n height: width/2,\n marginBottom: 40, \n x:{\n tickRotate: -45,\n },\n y: {\n label: \"number of transactions\",\n axis: \"right\",\n tickFormat: \"~s\",\n tickSize: 0\n },\n marks: [\n Plot.areaY(transactions, Plot.groupX({y: \"sum\"},{\n filter: d => d.date >= new Date(\"2018-01-01\") && d.date <= new Date(\"2021-12-31\"),\n x: \"month\",\n y: \"tx\",\n fill: \"platform\",\n // order: order,\n title: d=>d.platform,\n offset: \"silhouette\",\n curve: \"catmull-rom\"\n })),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"viewof step = Inputs.range([0, 2], {value : 0,step: 1, label: \"step\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"viewof progress = Inputs.range([0, 2], {value : 0,step: 1, label: \"progress\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"selection = ['mint', 'sale', 'transfer', 'all']","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"Swatches(colorScale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"colors = [\"#875cc3\",\"#08a6bf\", \"#ffb114\", \"#EF2E61\",\"#967494\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"colorScale = d3.scaleOrdinal(['mint', 'sale', \"transfer\", \"bid\", \"cancel\"], colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"treemap = Treemap(transactionTypes, {\n path: d => d.type, // e.g., \"flare/animate/Easing\"\n value: d => d?.consumption, // size of each node (file); null for internal nodes (folders)\n group: d => d.type, // e.g., \"animate\" in \"flare.animate.Easing\"; for color\n label: (d, n) =>`${d.label}\\n\\n${d.consumption}kWH\\n${d.emission}kCO2`,\n // title: (d, n) => `${d.type}\\n${d.emission}`, // text to show on hover\n // link: (d, n) => `https://github.com/prefuse/Flare/blob/master/flare/src${n.id}.as`,\n tile: d3.treemapBinary, // e.g., d3.treemapBinary; set by input above\n colors,\n width: size,\n height:size\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"size = width * 0.45","pinned":true,"hidden":false,"mode":"ojs"},{"id":556,"value":"colorsOther = ['#e0f0ea', '#95adbe']","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"areaCapita = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"areaFlight = htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"sizePerson = Math.sqrt(capitaConsumption/nftConsumption) * size","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"sizeFlight = Math.sqrt(flightEmission/nftEmission) * size","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"capitaConsumption = 16.49863014","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"flightEmission = 140","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"import {Treemap} from \"@mydu/treemap\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"nftEmission = d3.sum(transactionTypes, d=>d.emission)","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"nftConsumption = d3.sum(transactionTypes, d=>d.consumption)","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"transactionTypes = [\n { \"label\": \"Minting\",\"type\":\"mint\", \"emission\": 83, \"consumption\":142},\n { \"label\": \"Sale\",\"type\":\"sale\", \"emission\": 51, \"consumption\":87}, \n { \"label\": \"Transfer\", \"type\":\"transfer\",\"emission\": 30, \"consumption\":52},\n { \"label\": \"Bids\",\"type\":\"bid\", \"emission\": 24, \"consumption\":41},\n { \"label\": \"Cancel\\nBid\",\"type\":\"cancel\", \"emission\": 7, \"consumption\":12},\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"chainColors = d3.scaleOrdinal([\"On-going from PoW to PoS\", \"Proof-of-Work\", \"Proof-of-Stake\"], [\"#95adbe\",\"#e08e79\",\"#83af9b\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"chainlegends = Swatches(chainColors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"volumeChart = Treemap(volumes, {\n path: d => d.id, // e.g., \"flare/animate/Easing\"\n value: d => d?.value, // size of each node (file); null for internal nodes (folders)\n group: d => d.chainType, // e.g., \"animate\" in \"flare.animate.Easing\"; for color\n label: (d, n) =>`${d.platform}\\n${d.volume}`,\n title: (d, n) => `${d.platform}\\nBlockChain: ${d.blockchain}\\nVolume: $${d.volume}`, // text to show on hover\n fontSize: 20,\n colors: [\"#95adbe\",\"#83af9b\", \"#e08e79\"],\n // link: (d, n) => `https://github.com/prefuse/Flare/blob/master/flare/src${n.id}.as`,\n tile: d3.treemapBinary, // e.g., d3.treemapBinary; set by input above\n width,\n height: width/3 * 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"d3.sum(volumes.filter(d => d.chainType==\"POS\"), d=>d.value) / d3.sum(volumes, d=>d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"import {transactions, volumes} from '@mydu/nfts-emissions'","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"function autoBox() {\n document.body.appendChild(this);\n const {x, y, width, height} = this.getBBox();\n document.body.removeChild(this);\n return [x, y, width, height];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"data.children.filter(d => d.data.id.split('-')[0]=='796')","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"data = d3.hierarchy(treeData)\n .sort((a, b) => d3.ascending(a.data.name, b.data.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"treeData = await FileAttachment(\"tree@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"tree = d3.tree()\n .size([2 * Math.PI, radius])\n .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"radius = width / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"// transactionsMonth = d3.flatRollup(transactions, v=>d3.sum(v,d=>d.tx), d=>d.month, d=>d.platform).map(([month, platform, tx]) =>({month, platform, tx}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"data.descendants()","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}