21:null 22:["$","title",null,{"children":"How a single vote can skew decisions in a decentralized network (D3 DATAVIZ) | Michael Fasani | Observable"}] 27:Ta4d,chart = { // Set the dimensions and margins of the graph const chartHeight = 500; const svg = d3.select(DOM.svg(width, chartHeight)); var margin = { top: 10, right: 10, bottom: 50, left: 60 }; var chartWidth = width - margin.left - margin.right; var height = chartHeight - margin.top - margin.bottom; var wColor = "#FFC300"; var aColor = "#FF5733"; // Set the ranges var x = d3.scaleBand().range([0, chartWidth]).padding(0.2); var y = d3.scaleLinear().range([height, 0]) // Add margins to the SVG to allow room for the Axes svg.attr("width", chartWidth + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); // Inner Chart var chart = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Create scales for the range of data // Scale the range of the data in the domains x.domain(voterDomain); y.domain([0, include100kVotes ? 105000 : 12000]); chart.selectAll(".bar") .data(votes) .enter() .append("rect") .style("fill", function(d) { return d.voted === 'AGAINST' ? aColor : wColor ; }) .attr("x", function(d, i) { return x(i+1); }) .attr("y", function(d) { return y(d.votes); }) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.votes); }) .attr("data-legend",function(d) { return d.voted}) // Add the X Axis chart.append("g") .attr("transform", "translate(0, " + height + ")") .call(d3.axisBottom(x).tickFormat(d3.format(0))) // text label for the x axis chart.append("text") .attr("x", chartWidth / 2 ) .attr("y", height + (margin.bottom - 10)) .style("text-anchor", "middle") .style("font-family", "sans-serif") .style("font-size", "11px") .text("Number of BTRST votes per voter"); // Add the Y Axis chart.append("g") .attr("transform", "translate(0, 0)") .call(d3.axisLeft(y)); // Hardcoded Legend var legend = chart.append("g") .attr("class", "legend") .attr("transform", "translate(10,0)"); legend.append("rect") .style("fill", aColor) .attr("width", 10) .attr("height", 10) .attr("transform", "translate(0, 0)"); legend.append("rect") .style("fill", wColor) .attr("width", 10) .attr("height", 10) .attr("transform", "translate(0, 15)"); legend.append("text") .text("AGAINST") .style("font-size", "12px") .attr("transform", "translate(13, 9)"); legend.append("text") .text("WITH") .style("font-size", "12px") .attr("transform", "translate(13, 24)"); return svg.node(); }28:Te86,votes = [ { ...(!!include100kVotes && { wallet: "0x9448...576F", voted: "WITH", votes: 102000, }) }, { wallet: "0xF6B3...c778", voted: "AGAINST", votes: 10000, }, { wallet: "0xC6eD...CEcE", voted: "AGAINST", votes: 5700, }, { wallet: "0xdd89...c749", voted: "AGAINST", votes: 5500, }, { wallet: "0xA0F8...9711", voted: "AGAINST", votes: 4200, }, { wallet: "0x9601...992d", voted: "AGAINST", votes: 2100, }, { wallet: "0x9D30...A05D", voted: "AGAINST", votes: 2100, }, { wallet: "0x7e83...E66e", voted: "WITH", votes: 2000, }, { wallet: "boyson.eth", voted: "WITH", votes: 1300, }, { wallet: "0x33F3...77f3", voted: "WITH", votes: 1100, }, { wallet: "davidh.eth", voted: "AGAINST", votes: 999, }, { wallet: "0x1Ff6...db4e", voted: "AGAINST", votes: 610, }, { wallet: "0x0158...f368", voted: "WITH", votes: 576, }, { wallet: "0x1b0F...5a73", voted: "AGAINST", votes: 510, }, { wallet: "0xC33a...CbF2", voted: "AGAINST", votes: 410, }, { wallet: "0x3BC4...5BA0", voted: "AGAINST", votes: 314, }, { wallet: "0xD12c...d8bd", voted: "AGAINST", votes: 220, }, { wallet: "0xEF56...E30b", voted: "AGAINST", votes: 130, }, { wallet: "0xEB3d...97Bd", voted: "AGAINST", votes: 100, }, { wallet: "0xF6e6...6aBF", voted: "AGAINST", votes: 100, }, { wallet: "0xc356...Df81", voted: "AGAINST", votes: 100, }, { wallet: "0xa46f...E1CF", voted: "AGAINST", votes: 100, }, { wallet: "0x3150...bEAe", voted: "AGAINST", votes: 100, }, { wallet: "0xD8A8...919C", voted: "AGAINST", votes: 100, }, { wallet: "0x65D3...E442", voted: "WITH", votes: 100, }, { wallet: "0x1fb8...C924", voted: "AGAINST", votes: 100, }, { wallet: "0xFC81...5C11", voted: "AGAINST", votes: 100, }, { wallet: "0x09b9...e7f1", voted: "AGAINST", votes: 100, }, { wallet: "0x9DEF...51A4", voted: "AGAINST", votes: 100, }, { wallet: "0xF0B2...7a14", voted: "AGAINST", votes: 100, }, { wallet: "0x7940...be14", voted: "AGAINST", votes: 98, }, { wallet: "0xeEd4...2Aef", voted: "WITH", votes: 91, }, { wallet: "0xB5d0...09aE", voted: "AGAINST", votes: 25, }, { wallet: "0x7C51...06d2", voted: "AGAINST", votes: 20, }, { wallet: "0xE8D3...1424", voted: "WITH", votes: 20, }, { wallet: "0x3CF8...d3b3", voted: "AGAINST", votes: 10, }, { wallet: "0x8f79...33b7", voted: "AGAINST", votes: 10, }, { wallet: "0x106a...b537", voted: "AGAINST", votes: 10, }, ] .sort((a, b) => a.votes - b.votes) .filter(element => { // Remove empty object {} if (Object.keys(element).length !== 0) { return true; } return false; });29:[] 25:{"id":"3c9f0440ab2c876f","slug":"how-a-single-vote-can-skew-decisions-in-a-decentralized-network-d3-dataviz","title":"How a single vote can skew decisions in a decentralized network (D3 DATAVIZ)","thumbnail":"c47a6e362fbddd728d1f18e324ff8ec8c3018897c5f7e47ccd458635d2b1c5f6","access_level":"public","create_time":"$D2022-03-15T10:30:24.511Z","update_time":"$D2022-03-15T22:02:16.530Z","view_time":null,"first_public_time":"$D2022-03-15T21:54:35.276Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6a949d2df2fe1e03","login":"fasani","name":"Michael Fasani","avatar_url":"https://avatars-next.observableusercontent.com/c0f23baf0ebc3d7464d5e4bccfd30a20fb923dfa0793e18cbc01194f84c573e6","tier":"starter_2024","bio":"I have been working as a \"webmaster\" since 1999. Mostly I write JavaScript. I currently like React, Redux, ApolloClient, WebVR, D3, Three.js."},"version":496,"publish_version":496,"role":null,"authored":false,"authors":[{"type":"individual","id":"2ff10d2d472b94ec","login":"fasani","name":"Michael Fasani","avatar_url":"https://avatars-next.observableusercontent.com/c0f23baf0ebc3d7464d5e4bccfd30a20fb923dfa0793e18cbc01194f84c573e6","tier":null,"bio":"I have been working as a \"webmaster\" since 1999. Mostly I write JavaScript. I currently like React, Redux, ApolloClient, WebVR, D3, Three.js."}],"members":[{"type":"individual","id":"2ff10d2d472b94ec","login":"fasani","name":"Michael Fasani","avatar_url":"https://avatars-next.observableusercontent.com/c0f23baf0ebc3d7464d5e4bccfd30a20fb923dfa0793e18cbc01194f84c573e6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How a single vote can skew decisions in a decentralized network (D3 DATAVIZ)","cells":[{"id":0,"value":"# How a single vote can skew decisions in a decentralized network (D3 DATAVIZ)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":487,"value":"Data from [Implementing staking token holding](https://snapshot.org/#/usebraintrust.eth/proposal/0xb94564083a13de17b308f3164fbaae8b4d925dc94f0bf5e139d410ab0472ec8f) - Braintrust Snaphot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":412,"value":"Visualization belongs to this post:
\n[How a single vote can skew decisions in a decentralized network (D3 DATAVIZ)](https://www.michaelfasani.com/2022/single-vote-can-skew-decisions-decentralized-network-d3-dataviz/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"viewof include100kVotes = Inputs.toggle({label: \"Include 102k Vote?\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"When counting ${totalVoters}/38 voters:
\n${totalVotersAgainst} voters (${populationAgainst}) used ${btrstAgainst} tokens (${btrstPercentAgainst}) and voted AGAINST.
\n${totalVotersWith} voters (${populationWith} of the population) used ${btrstWith} tokens (${btrstPercentWith}) and voted WITH.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"summary","database":"$undefined"},{"id":196,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"## Votes sorted by BTRST amount (${totalVoters}/38)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"container = { \n const container = d3.select(html`

`);\n //headers\n container\n .selectAll('span')\n .data(votes)\n .enter()\n .append('div')\n .attr('class', 'row')\n .append('span')\n .attr('class', 'wallet')\n .text(d => d.wallet)\n .select(function(){\n return this.parentNode;\n })\n .append('span')\n .attr('class', 'voted')\n .text(d => d.voted)\n .select(function(){\n return this.parentNode;\n })\n .append('span')\n .attr('class', 'votes')\n .text(d => d.votes);\n\n return container.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"### Population Votes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"totalVoters = votes.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"totalVotersWith = votesWith.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"totalVotersAgainst = votesAgainst.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"populationWith = ((votesWith.length / votes.length) * 100).toFixed(2) + \"%\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"populationAgainst = ((votesAgainst.length / votes.length) * 100).toFixed(2) + \"%\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"### Btrst Votes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"btrstTotal = btrstWith + btrstAgainst","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"btrstWith = votesWith.reduce((accumulator, currentValue) => {\n return accumulator + currentValue.votes;\n}, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"btrstAgainst = votesAgainst.reduce((accumulator, currentValue) => {\n return accumulator + currentValue.votes;\n}, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"btrstPercentWith = ((btrstWith / btrstTotal) * 100).toFixed(2) + \"%\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"btrstPercentAgainst = ((btrstAgainst / btrstTotal) * 100).toFixed(2) + \"%\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"votesWith = votes.filter(vote => vote.voted === 'WITH')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"votesAgainst = votes.filter(vote => vote.voted === 'AGAINST')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"voterDomain = {\n var voters = [];\n \n for (var i = 1; i <= votes.length; i++) {\n voters.push(i);\n }\n \n return voters\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"d3 = require(\"https://d3js.org/d3.v7.min.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"style = {\n return html`\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W29","stdlib":"1"}} 26:"$25:body"