2e:null 2f:["$","title",null,{"children":"Transitions (rafael edit, projects as users) | Protocol Labs | Observable"}] 34:[] 32:{"id":"19519d2f930ebe57","slug":"transitions-rafael-edit-projects-as-users","title":"Transitions (rafael edit, projects as users)","thumbnail":"956ceed493abd7efa63829a3532ec1889f7c5d85646faf8f2763e997361ca32c","access_level":"public","create_time":"$D2021-02-24T16:19:53.410Z","update_time":"$D2021-02-24T16:24:35.163Z","view_time":null,"first_public_time":"$D2021-02-24T16:20:56.842Z","has_unpublished_edits":null,"fork":{"id":"0ffd9b78fc4806d6","slug":"transitions-olizilla-edit-projects-as-users","title":"Transitions (olizilla edit, projects as users)","owner":{"id":"22c6567f46e13e8c","login":"olizilla","name":"Oli Evans"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e453f511765d6acc","login":"protocol","name":"Protocol Labs","avatar_url":"https://avatars-next.observableusercontent.com/8755702e4d14b3d0e2081fa1304c59731787cb3c1e2f2cf6e0011c948ea27a68","tier":"pro"},"version":519,"publish_version":519,"role":null,"authored":false,"authors":[{"type":"individual","id":"d098a2040d270826","login":"rafaelramalho19","name":"Rafael Ramalho","avatar_url":"https://avatars-next.observableusercontent.com/8f8a5a1b40ad0e6c8d6a39138e9efa6045ecd7adfffe003ae4eb3c78dfd2bba0","tier":null}],"members":[{"type":"team","id":"e453f511765d6acc","login":"protocol","name":"Protocol Labs","avatar_url":"https://avatars-next.observableusercontent.com/8755702e4d14b3d0e2081fa1304c59731787cb3c1e2f2cf6e0011c948ea27a68","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Transitions (rafael edit, projects as users)","cells":[{"id":0,"value":"md`# Transitions _(rafael edit, projects as users)_\nexploring how to make the information legible.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`## IPFS projects as users - all transitions\nthe _inactive → inactive_ flow is a large and growing number that 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.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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: ['8 weeks ago', '7 weeks ago', '6 weeks ago', '5 weeks ago', '4 weeks ago', '3 weeks ago', '2 weeks ago', 'Last week'],\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"filTransitionsChangesOnly = { \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: ['8 weeks ago', '7 weeks ago', '6 weeks ago', '5 weeks ago', '4 weeks ago', '3 weeks ago', '2 weeks ago', 'Last week'],\n datasets: Object.keys(filecoinData[0].transitions).map((label, index) => ({\n label,\n data: filecoinData.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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`## IPFS New project experience\nWeek on week view of where new users land in IPFS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"ipfsFirstTimeChanges = { \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: ['8 weeks ago', '7 weeks ago', '6 weeks ago', '5 weeks ago', '4 weeks ago', '3 weeks ago', '2 weeks ago', 'Last week'],\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 => d.label.match(/^(First|Bounced|New)/))\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`## High value stack\nshow all the paths to high value as a stack`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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: [{\n\t\t\t\t\t\t\tstacked: true,\n\t\t\t\t\t\t}],\n\t\t\t\t\t\tyAxes: [{\n\t\t\t\t\t\t\tstacked: true\n\t\t\t\t\t\t}]\n\t\t\t\t}\n },\n data: {\n labels: ['8 weeks ago', '7 weeks ago', '6 weeks ago', '5 weeks ago', '4 weeks ago', '3 weeks ago', '2 weeks ago', 'Last week'],\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: d3.color(color.green).brighter(index * 0.26).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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`## IPFS transitions grouped by change\nEach column group is a transtion, with 8 weeks of data per group`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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.length - index} weeks ago`,\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md`---\n## notes and other experiments\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 myChart = new Chart(container, {\n type: 'bar',\n options: {\n scales: {\n yAxes: [{ type: 'logarithmic' }]\n }\n },\n data: {\n labels: ['4 weeks ago', '3 weeks ago', '2 weeks ago', 'Last week'],\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(index)\n }))\n }\n });\n \n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 myChart = new Chart(container, {\n type: 'bar',\n data: {\n labels: ['4 weeks ago', '3 weeks ago', '2 weeks ago', 'Last week'],\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(index)\n })).filter(d => d.label !== 'Inactive')\n }\n });\n \n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"md`## the original, all the flows\nthis is hard to read, as inactive is just so much larger`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"ipfsTransitions = { \n const getColor = (index) => [\"#f72585\",\"#b5179e\",\"#7209b7\",\"#560bad\",\"#480ca8\",\"#3a0ca3\",\"#3f37c9\",\"#4361ee\",\"#4895ef\",\"#4cc9f0\", '#ee6c4d', '#43aa8b', '#2b2d42'][index]\n const container = html`

`;\n const myChart = new Chart(container, {\n type: 'bar',\n data: {\n labels: ['4 weeks ago', '3 weeks ago', '2 weeks ago', 'Last week'],\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(index)\n }))\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"filecoinTransitions = { \n const getColor = (index) => [\"#f72585\",\"#b5179e\",\"#7209b7\",\"#560bad\",\"#480ca8\",\"#3a0ca3\",\"#3f37c9\",\"#4361ee\",\"#4895ef\",\"#4cc9f0\", '#ee6c4d', '#43aa8b', '#2b2d42'][index]\n const container = html`

`;\n const myChart = new Chart(container, {\n type: 'bar',\n data: {\n labels: ['4 weeks ago', '3 weeks ago', '2 weeks ago', 'Last week'],\n datasets: Object.keys(filecoinData[0].transitions).map((label, index) => ({\n label,\n data: filecoinData.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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"colorMap = ({\n 'First Time': color.blue,\n 'Bounced' : color.red,\n 'Lapsed High-Value': d3.color(color.red).darker().hex(),\n 'Lapsed Low-Value': d3.color(color.red).brighter().hex(),\n 'High to Low-Value': color.yellow,\n 'Low-Value': color.yellow,\n 'New Low-Value': color.yellow, \n 'Reactivated Low-Value': color.yellow,\n 'High-Value': color.green,\n 'Low to High-Value': color.green,\n 'New High-Value': color.green,\n 'Reactivated High-Value': color.green,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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(filecoinData[filecoinData.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(filecoinData[filecoinData.length - 1].transitions).filter(x => x !== 'Inactive'),\n }\n });\n \n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"d3 = require(\"d3-color@2\", \"d3-scale-chromatic@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"startDate = new Date((new Date()).setDate(new Date().getDate() - (7 * 9)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"ipfsData = (await fetch(`${ipfsGetTransitionsUrl}?start_date=${startDate}`)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"filecoinData = (await fetch(`${filecoinGetTransitionsUrl}?start_date=${startDate}`)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"moment = require('moment')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"import { ipfsGetTransitionsUrl, filecoinGetTransitionsUrl } from \"@protocol/pmf-endpoints\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"