31:T695,{ const data = donationStats; const width = 650 const chartWidth = 500 const height = 470 const margin = 50 const dotColumns = 13 let layout = iconarray.layout() .width(dotColumns); let dotCount = Math.pow(dotColumns, 2); let radius = 11; let dataArray = generateDots(data, dotCount, totalDonations); let grid = layout(dataArray); let svg = generateResponsiveSvg(width, height) let arrayScale = d3.scaleLinear() .domain([0, Math.sqrt(dataArray.length)]) .range([0+margin, chartWidth-margin]); svg.append("g") .attr("transform", "translate(" + margin + ", " + margin + ")"); svg.selectAll('circle') .data(grid) .enter() .append('circle') .attr('cx', function(d){ return arrayScale(d.position.x); }) .attr('cy', function(d){ return height - arrayScale(d.position.y); }) .attr('r', radius) .attr('fill',function(d){ return d.data; }) svg.append('g') .attr('transform','translate('+ (chartWidth)+',' + (height - 300) + ')') .selectAll('g.key-element') .data(data) .enter() .append('g') .attr('transform',function(d,i){ return 'translate(0,'+(i*60)+')'; }) .attr('class','key-element') .call( function(parent) { parent.append('circle') .attr('r', radius) .attr('cx', -radius*2) .attr('cy', -radius) .attr('fill', d => color(d.id)) parent.append('text') .attr("style", "font-family: Roboto Condensed,sans-serif; font-size: 18px;") .attr('dx', 0) .attr('dy', -0.4) .text(function(d){ return d.label; }) .call(wrap, margin.right-20); }) return svg.node(); }32:T62c,{ const data = killStats; const width = 650 const chartWidth = 500 const height = 470 const margin = 50 const dotColumns = 13 let layout = iconarray.layout() .width(dotColumns); let dotCount = Math.pow(dotColumns, 2); let radius = 11; let svg = generateResponsiveSvg(width, height); let dataArray = generateDots(data, dotCount, totalAnimalsKilled); let grid = layout(dataArray); let arrayScale = d3.scaleLinear() .domain([0, Math.sqrt(dataArray.length)]) .range([0+margin, chartWidth-margin]); svg.append("g") .attr("transform", "translate(" + margin + ", " + margin + ")"); svg.selectAll('circle') .data(grid) .enter() .append('circle') .attr('cx', function(d){ return arrayScale(d.position.x); }) .attr('cy', function(d){ return height - arrayScale(d.position.y); }) .attr('r', radius) .attr('fill',function(d){ return d.data; }) svg.append('g') .attr('transform','translate('+ (chartWidth)+',' + (height - 300) + ')') .selectAll('g.key-element') .data(data) .enter() .append('g') .attr('transform',function(d,i){ return 'translate(0,'+(i*60)+')'; }) .attr('class','key-element') .call(function(parent){ parent.append('circle') .attr('r', radius) .attr('cx', -radius*2) .attr('cy', -radius) .attr('fill', d => color(d.id)) parent.append('text') .attr('dx', 0) .attr('dy', -0.4) .attr("style", "font-family: Roboto Condensed,sans-serif; font-size: 18px;") .text(d => d.label) .call(wrap, margin.right-20); }) return svg.node(); }33:T667,{ const width = 850 const height = 500 // Practically, we can't render events more often than every 10ms, which is too slow for // the numbers we're dealing with (290 events per second: every 3.44ms). // // Instead, we'll create a function that renders 29 dots, and call it every 100ms. // In reality, we need to call this function slightly more often to get 290 events // per second. var interval d3.select("#startAnimalsKilledVis").on( "click", function() { interval = d3.interval(paint29, 75) // call paint29() every ~75ms } ) d3.select("#stopAnimalsKilledVis").on( "click", function() { interval.stop(); } ) let svg = generateResponsiveSvg(width, height); let canvas = svg.append("g") let counter=0 let paintOne = function() { canvas.insert("circle", "rect") .attr("cx", Math.random() * width) .attr("cy", Math.random() * height) .attr("r", 1) .style("fill", "#AA0000") .transition() .duration(3000) .ease(Math.sqrt) .attr("r", 150) .style("fill", "white") .remove(); if (debug == true) { counter++; if (counter % 290 == 0) { let d = new Date; console.log("---"); console.log(":" + d.getSeconds()) console.log(counter); console.log("---"); } } } let paintTen = function() { let i = 0; do { i += 1; paintOne(); } while (i < 10); } let paint29 = function() { let i = 0; do { i += 1; paintTen(); } while (i < 2); paintOne(); } return svg.node(); }34:[] 2f:{"title":"Where we donate, and why it matters","cells":[{"id":0,"value":"md`# Where we donate, and why it matters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"md`See [here](http://recurse.henrystanley.com/post/scope-insensitivity-and-d3/) for the motivation behind this piece.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`Americans give away **$${(totalDonations/1e9).toFixed(1)} billion** to charities that help animals every year. But what kind of charities are they supporting?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"{\n let pp = function(number) {\n if (number > 1e9) {\n return \"$\" + (number / 1e9).toFixed(2) + \" billion\"\n } else {\n return \"$\" + (number / 1e6).toFixed(2) + \" million\"\n }\n }\n \n let tableRow = function(element) {\n let amount = pp(element.amount)\n \n return \"\" +\n \"\" +\n element.label +\n \"\" +\n \"\" +\n amount +\n \"\"\n }\n \n let stats = donationStats.map(x => tableRow(x) )\n return html`\n \n \n ${stats.join(\"\\n\")}\n

	Amount donated

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`Stacked up, that looks like this. Notice how animal shelters are by far the largest recipients of donations; farm and lab animal charities get almost nothing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"md`People clearly want to help animals in need. But a crucial question to ask is: which animals need our help most? Looking at the number of animals killed each year by different industries gives a very different picture to the one above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"md`The number of animals killed in shelters, in labs, or for fur and other uses is dwarfed by the scale of animal agriculture and factory farming. But this isn't reflected in the way people donate.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"md`In the US alone, ${totalAnimalsKilled / 1e9} billion farmed animals were killed in 2015 – **equivalent to ${animalsKilledPerSecond.toFixed()} animals per second** (${Math.round(animalsKilledSincePageOpen).toLocaleString()} since you opened this page). The scale of this is hard to fathom; thanks to [scope insensitivity](https://en.wikipedia.org/wiki/Scope_neglect), our brains aren't up to the challenge of realising quite how enormous a number this is.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"md`The below visualisation paints a dot for each animal killed, to give some sense of how many ${animalsKilledPerSecond.toFixed()} per second is.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"html` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"md`Helping these animals is within your power – there are [highly effective charities](https://animalcharityevaluators.org/donation-advice/recommended-charities/) working to improve welfare conditions in factory farms, and encourage individuals and companies to phase out animal products.\n\nIf we want to make the biggest difference we can, we have to put our money where it's needed most.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"md`_Comment on this piece on [Hacker News](https://news.ycombinator.com/item?id=17324569)._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"md`Data taken from [_Why Farmed Animals?_](https://animalcharityevaluators.org/donation-advice/why-farmed-animals/) by Animal Charity Evaluators.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"totalAnimalsKilled = 9.2e9","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"animalsKilledSincePageOpen = {\n let i = 0;\n while (true) {\n yield Promises.delay(1000, i += (animalsKilledPerSecond));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"pageOpened = Date.now()","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"animalsKilledPerSecond = totalAnimalsKilled / (60*60*24*365)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"killStats = {\n let stats = [\n {id: 1, label: \"farmed animals\", amount: (totalAnimalsKilled * 0.996)},\n {id: 2, label: \"clothing\", amount: (totalAnimalsKilled * 0.0007)},\n {id: 3, label: \"lab animals\", amount: (totalAnimalsKilled * 0.002)},\n {id: 4, label: \"animal shelters\", amount: (totalAnimalsKilled * 0.0003)}\n ]\n\n return stats.sort((a, b) => a.amount - b.amount)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"donationStats = {\n let stats = [\n {id: 1, label: \"farmed animals\", amount: totalDonations * 0.008},\n {id: 2, label: \"other/mixed\", amount: totalDonations * 0.32},\n {id: 3, label: \"lab animals\", amount: totalDonations * 0.007},\n {id: 4, label: \"animal shelters\", amount: totalDonations * 0.66}\n ]\n \n return stats.sort((a, b) => a.amount - b.amount)\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"\nanimalShelterDonations = 1.2e9 // $1.2bn\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"// animal shelter donations represent 66% of all animal charity donations in the US.\ntotalDonations = (animalShelterDonations / 66) * 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"color = d3.scaleOrdinal(d3.schemeCategory10).domain([0,4])","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"function wrap(text, width) {\n \n //wrapping long labels https://bl.ocks.org/mbostock/7555321\n \n text.each(function() {\n var text = d3.select(this),\n words = text.text().split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.1, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")),\n tspan = text.text(null).append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", dy + \"em\");\n while (word = words.pop()) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (tspan.node().getComputedTextLength() > width) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text.append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\").text(word);\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"generateDots = function(data, dotCount, total) {\n let dataArray = data.reduce(function(value, d) {\n let proportionOfDots = d.amount/total\n let numberOfDots = dotCount * proportionOfDots;\n\n for (var i = 0; i < Math.max(1,numberOfDots); i++) {\n value.push(color(d.id));\n }\n \n return value;\n }, []);\n\n while (dataArray.length > dotCount) {\n // additional dots have been added due to rounding, and need to be removed\n // find the biggest category, and drop dots until we have the right number\n\n dataArray.pop() // remove from the end of the array, as this is the category\n // which is the most numerous\n }\n\n return dataArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"generateResponsiveSvg = function(width, height) {\n return d3.select(DOM.svg(width, height))\n .attr(\"viewBox\", `0 0 ${width} ${height}`)\n .style(\"max-width\", \"100%\")\n .style(\"height\", \"auto\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"iconarray = require(\"d3-iconarray\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"debug = false","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}