31:T409,ipfsUserPopulationAllTheThings = { const container = html`

` const getColor = label => colorMap[label] const flows = [ 'First Time', 'Low-Value', 'New Low-Value', 'Reactivated Low-Value', 'High to Low-Value', 'High-Value', 'New High-Value', 'Low to High-Value', 'Reactivated High-Value', 'Bounced', 'Lapsed Low-Value', 'Lapsed High-Value' ] const data = { labels: ipfsData.map(d => d.date), datasets: flows.map((label, index) => { const direction = label.match(/^(Bounced|Lapsed)/) ? -1 : 1 return { label, data: ipfsData.map(s => s.transitions[label] * direction), fill: true, borderColor: getColor(label), backgroundColor: getColor(label) }}) } const options = { legend: { align: 'start', position: 'right' }, scales: { xAxes: [{stacked: true}], yAxes: [{stacked: true}] } } const type = 'bar' const myChart = new Chart(container, {type, options, data}) return container; }32:T410,ipfsHighValueHorizontalStack = { const getColor = label => colorMap[label] const container = html`

`; const states = Object.keys(ipfsData[0].transitions).filter(l => l.match(/^(First|Bounced|Lapsed|Reactivated)/)) const myChart = new Chart(container, { type: 'bar', options: { legend: { align: 'start', position: 'right' }, scales: { xAxes: [{stacked: true}], yAxes: [{stacked: true}] } }, data: { labels: ipfsData.map(d => d.date), datasets: states.map((label, index) => { const direction = label.match(/^(Bounced|Lapsed)/) ? -1 : 1 const baseColor = direction === 1 ? color.blue : color.red const backgroundColor = d3.color(baseColor).brighter(index * 0.5).hex() return { label, fill: true, backgroundColor, data: ipfsData.map(s => s.transitions[label] * direction) } }) } }); return container; }33:[] 2f:{"title":"Transitions (olizilla edit, projects as users)","cells":[{"id":0,"value":"md`# Transitions _(olizilla edit, projects as users)_\nexploring how to make the information legible.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`\nthe _inactive → inactive_ flow is a large and growing number and likely an undestimate by an order of magnitude. Trying to visualise it with other flows blows out the scale, so lets just not.\n\nIn the chart below we use color to denote the target state; where the user ended up at. So all the green columns are flows that ended up at High-Value. Yellow for all paths to low value, and red for all paths to inactive.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"viewof weeks = Range([4, 52], {label: \"Weeks\", step: 1, value: 24})","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"md`## IPFS all transitions - projects as users`","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"md`## Active population change\nCompare number of users entering and exiting the the ecosystem week on week`","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"md`## High value stack\nshow all the paths to high value as a stack`","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"ipfsHighValueStack = { \n const getColor = label => colorMap[label]\n const container = html`

`;\n const myChart = new Chart(container, {\n type: 'bar',\n options: {\n legend: { align: 'start', position: 'right' },\n scales: {\n\t\t\t\t\t\txAxes: [{stacked: true}],\n\t\t\t\t\t\tyAxes: [{stacked: true}]\n\t\t\t\t}\n },\n data: {\n labels: ipfsData.map(d => d.date),\n datasets: Object.keys(ipfsData[0].transitions).map((label, index) => ({\n label,\n data: ipfsData.map(s => s.transitions[label]),\n fill: true,\n backgroundColor: d3.color(color.green).brighter(index * 0.25).hex()\n })).filter(d => d.label.match(/^(|New |Low to |Reactivated )High-Value/))\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`## IPFS new user experience\nWeek on week view of where new users land in IPFS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"ipfsNewUserExperience = { \n const getColor = label => colorMap[label]\n const container = html`

`;\n const flows = [\n 'Bounced', \n 'New Low-Value', \n 'New High-Value']\n const myChart = new Chart(container, {\n type: 'bar',\n options: {\n legend: { align: 'start', position: 'right' },\n scales: {\n xAxes: [{stacked: true}],\n yAxes: [{stacked: true}]\n\t\t\t\t}\n },\n data: {\n labels: ipfsData.map(d => d.date),\n datasets: flows.map((label, index) => ({\n label,\n data: ipfsData.map(s => s.transitions[label]),\n fill: false,\n borderColor:getColor(label),\n backgroundColor: getColor(label)\n }))\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"md`## Total IPFS active user population\nAll flows into the active user population`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"ipfsUserPopulation= { \n const getColor = label => colorMap[label]\n const container = html`

`;\n const flows = [\n 'First Time', \n 'Low-Value', 'New Low-Value', 'Reactivated Low-Value', 'High to Low-Value', \n 'High-Value', 'New High-Value', 'Low to High-Value', 'Reactivated High-Value']\n const myChart = new Chart(container, {\n type: 'line',\n options: {\n legend: { align: 'start', position: 'right' },\n scales: {\n xAxes: [{stacked: true}],\n yAxes: [{stacked: true}]\n\t\t\t\t}\n },\n data: {\n labels: ipfsData.map(d => d.date),\n datasets: flows.map((label, index) => ({\n label,\n data: ipfsData.map(s => s.transitions[label]),\n fill: true,\n borderColor: getColor(label),\n backgroundColor: getColor(label)\n }))\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"md`## IPFS user decay\nAll the flows that lead to inactive`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"ipfsUserPopulationDecay = { \n const getColor = label => colorMap[label]\n const container = html`

`;\n const flows = [\n 'Bounced', \n 'Lapsed Low-Value', \n 'Lapsed High-Value']\n const myChart = new Chart(container, {\n type: 'line',\n options: {\n legend: { align: 'start', position: 'right' },\n scales: {\n xAxes: [{stacked: true}],\n yAxes: [{stacked: true}]\n\t\t\t\t}\n },\n data: {\n labels: ipfsData.map(d => d.date),\n datasets: flows.map((label, index) => ({\n label,\n data: ipfsData.map(s => s.transitions[label]),\n fill: true,\n borderColor: getColor(label),\n backgroundColor: getColor(label)\n }))\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"md`---\n# notes and other experiments\n\nshowing our working, so you may see how we got here\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"md`## IPFS devs as users - all transitions`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"ipfsTransitionsChangesOnly = { \n const getColor = label => colorMap[label]\n const container = html`

`;\n const myChart = new Chart(container, {\n type: 'bar',\n options: {\n legend: { align: 'start', position: 'right' }\n },\n data: {\n labels: ipfsData.map(d => d.date),\n datasets: Object.keys(ipfsData[0].transitions).map((label, index) => ({\n label,\n data: ipfsData.map(s => s.transitions[label]),\n fill: false,\n backgroundColor: getColor(label)\n })).filter(d => !['Inactive', 'High-Value', 'Low-Value'].includes(d.label))\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"md`## IPFS transitions grouped by change\nEach column group is a transtion, with ${weeks} weeks of data per group`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"ipfsChangesGroupByChange = { \n const getColor = label => colorMap[label]\n const container = html`

`;\n const labels = Object.keys(ipfsData[0].transitions).filter(label => label !== 'Inactive')\n const data = ipfsData.map(d => Object.entries(d.transitions).filter(([key]) => labels.includes(key)))\n console.log(data)\n const myChart = new Chart(container, {\n type: 'bar',\n options: {\n legend: { display: false, align: 'start', position: 'right' }\n },\n data: {\n labels: labels,\n datasets: data.map((arr, index) => ({\n label: ipfsData[index].date,\n data: arr.map(([_, val]) => val),\n fill: false,\n backgroundColor: getColor('First Time')\n })).filter(d => !['Inactive', 'High-Value', 'Low-Value'].includes(d.label))\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"md`## Logarithmic scale\nTrying to show the inactive -> inactive flow at the same time as others requires us to be clever. I think we should avoid trying to compare the inactive -> inactive flow with the others as it is likely highly inaccurate, but this the chart included for discussion.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"ipfsTransitionsLogarithmic = { \n const getColor = (index) => [\"#f72585\",\"#b5179e\",\"#7209b7\",\"#560bad\",\"#480ca8\",\"#3a0ca3\",\"#3f37c9\",\"#4361ee\",\"#4895ef\",\"#4cc9f0\", '#ee6c4d', '#43aa8b', '#2b2d42'][index]\n const container = html`

`;\n const data = ipfsData.slice(0,4)\n const myChart = new Chart(container, {\n type: 'bar',\n options: {\n scales: {\n yAxes: [{ type: 'logarithmic' }]\n }\n },\n data: {\n labels: data.map(d => d.date),\n datasets: Object.keys(data[0].transitions).map((label, index) => ({\n label,\n data: data.map(s => s.transitions[label]),\n fill: false,\n backgroundColor: getColor(index)\n }))\n }\n });\n \n return container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`## Just dont show inactive\nyou get a more legible graph by just not showing the inactive -> inactive flow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"ipfsTransitionsNoInactive = { \n const getColor = (index) => [\"#f72585\",\"#b5179e\",\"#7209b7\",\"#560bad\",\"#480ca8\",\"#3a0ca3\",\"#3f37c9\",\"#4361ee\",\"#4895ef\",\"#4cc9f0\", '#ee6c4d', '#43aa8b', '#2b2d42'][index]\n const container = html`

`;\n const data = ipfsData.slice(0,4) \n const myChart = new Chart(container, {\n type: 'bar',\n data: {\n labels: data.map(d => d.date),\n datasets: Object.keys(data[0].transitions).map((label, index) => ({\n label,\n data: data.map(s => s.transitions[label]),\n fill: false,\n backgroundColor: getColor(index)\n }))\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"startDate = {\n const d = new Date()\n d.setDate(d.getDate() - ((weeks + 1) * 7))\n return d.toISOString().split('T')[0]\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"color = ({\n red: d3.schemeTableau10[2],\n orange: d3.schemeTableau10[1],\n green: d3.schemeTableau10[4],\n teal: d3.schemeTableau10[3],\n blue: d3.schemeTableau10[0],\n grey: d3.schemeTableau10[9],\n yellow: d3.schemeTableau10[5]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"colorMap = ({\n 'First Time': color.blue,\n 'Bounced' : d3.color(color.red).darker().hex(),\n 'Lapsed Low-Value': color.red,\n 'Lapsed High-Value': d3.color(color.red).brighter().hex(),\n 'High to Low-Value': d3.color(color.yellow).brighter(0.5).hex(),\n 'Low-Value': d3.color(color.yellow).darker(0.25).hex(),\n 'New Low-Value': color.yellow, \n 'Reactivated Low-Value': d3.color(color.yellow).brighter(0.25).hex(),\n 'High-Value': d3.color(color.green).darker(0.25).hex(),\n 'Low to High-Value': d3.color(color.green).brighter(0.75).hex(),\n 'New High-Value': d3.color(color.green).brighter(0.12).hex(),\n 'Reactivated High-Value': d3.color(color.green).brighter(1.7).hex()\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"ipfsTransitionsChangesOnlyCircle = { \n const getColor = label => colorMap[label]\n const container = html`

`;\n const myChart = new Chart(container, {\n type: 'doughnut',\n options: {\n legend: { align: 'start', position: 'right' }\n },\n data: {\n datasets: [{\n data: Object.entries(ipfsData[ipfsData.length - 1].transitions).filter(x => x[0] !== 'Inactive').map(x => x[1]),\n backgroundColor: Object.values(colorMap),\n borderColor: 'black',\n }],\n labels: Object.keys(ipfsData[ipfsData.length - 1].transitions).filter(x => x !== 'Inactive'),\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"d3 = require(\"d3-color@2\", \"d3-scale-chromatic@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"ipfsData = (await fetch(`https://ipfs.ecosystem-dashboard.com/pmf/repo/transitions.json?start_date=${startDate}`)).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"filecoinData = (await fetch(filecoinGetTransitionsUrl)).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"Chart = require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"moment = require('moment')","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"import { ipfsGetTransitionsUrl, filecoinGetTransitionsUrl } from \"@protocol/pmf-endpoints\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"import { Range } from '@observablehq/inputs'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}