md`# Bounce Rate`
bounceRate(ipfsData, 'IPFS Bounce Rate', { showTrailing: true })
bounceRate(filecoinData, 'Filecoin Bounce Rate', { showTrailing: true })
bounceRate = (transitions, title, options = {}) => {
const container = html`<canvas></canvas>`;
const { showTrailing } = options;
const trailingData = showTrailing && transitions.slice(transitions.length - 6)
const trailingBounced = trailingData && trailingData.reduce((prev, curr) => prev + curr.transitions.Bounced, 0)
const trailingNewVolume = trailingData && trailingData.reduce((prev, curr) => prev + curr.transitions['First Time'], 0)
let datasets = [{
type: "line",
data: transitions.map(({ transitions }) =>
Math.floor((transitions["Bounced"] / (transitions["Bounced"] + transitions["New Low-Value"] + transitions["New High-Value"])) *100)
),
fill: false,
label: "Bounce Rate",
borderColor: color.red,
lineTension: 0,
borderWidth: 3,
yAxisID: "A",
}]
showTrailing && datasets.push({
type: 'line',
data: transitions.map(_ => trailingBounced / trailingNewVolume * 100),
fill: false,
label: 'Avg. bounce rate (trailing 12 weeks)',
borderColor: d3.color(color.red).brighter(2).hex(),
lineTension: 0,
borderWidth: 2,
pointRadius: 0,
borderDash: [5, 5],
yAxisID: 'A',
})
datasets = datasets.concat([{
type: "line",
data: transitions.map((_) => 50),
fill: false,
label: "Bounce Rate Target",
borderColor: d3.color(color.red).darker(2).hex(),
lineTension: 0,
borderWidth: 2,
pointRadius: 0,
borderDash: [5, 5],
yAxisID: "A",
},{
type: "line",
data: transitions.map(({ transitions }) =>
Math.floor((transitions["New High-Value"] / (transitions["Bounced"] + transitions["New Low-Value"] + transitions["New High-Value"])) * 100)
),
fill: false,
label: "First-Time to High-Value %",
borderColor: color.green,
lineTension: 0,
borderWidth: 3,
yAxisID: "A",
},{
type: "bar",
data: transitions.map(({ transitions }) => transitions["First Time"]),
label: "First Time User Volume",
backgroundColor: colorMap["First Time"],
lineTension: 0,
borderWidth: 3,
yAxisID: "B",
}
]);
const myChart = new Chart(container, {
type: 'bar',
data: {
labels: transitions.map(d => dateDiffToHuman(d.date)),
datasets,
},
options: {
title: {
display: true,
text: title
},
scales: {
yAxes: [{
id: 'B',
ticks: {
min: 0
},
scaleLabel: {
display: true,
labelString: 'User Volume',
},
}, {
id: 'A',
ticks: {
min: 0,
max: 100,
callback: function (value) {
return (value / this.max * 100).toFixed(0) + '%'; // convert it to percentage
},
},
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Bounce Rate',
},
position: 'right'
}],
}
},
});
// myChart.options.legend.reverse = true;
return container;
}
color = ({
red: d3.schemeTableau10[2],
orange: d3.schemeTableau10[1],
green: d3.schemeTableau10[4],
teal: d3.schemeTableau10[3],
blue: d3.schemeTableau10[0],
grey: d3.schemeTableau10[9],
yellow: d3.schemeTableau10[5]
})
colorMap = ({
'First Time': color.blue,
'Bounced' : color.red,
'Lapsed High-Value': d3.color(color.red).darker().hex(),
'Lapsed Low-Value': d3.color(color.red).brighter().hex(),
'High to Low-Value': d3.color(color.yellow).brighter(0.5).hex(),
'Low-Value': d3.color(color.yellow).darker(0.25).hex(),
'New Low-Value': color.yellow,
'Reactivated Low-Value': d3.color(color.yellow).brighter(0.25).hex(),
'High-Value': d3.color(color.green).darker(0.25).hex(),
'Low to High-Value': d3.color(color.green).brighter(0.75).hex(),
'New High-Value': d3.color(color.green).brighter(0.12).hex(),
'Reactivated High-Value': d3.color(color.green).brighter(1.7).hex()
})
d3 = require('d3')
ipfsData = (await fetch(`${ipfsGetTransitionsUrl}?start_date=${startDate}`)).json()
filecoinData = (await fetch(`${filecoinGetTransitionsUrl}?start_date=${startDate}`)).json()
Chart = require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js')
import { dateDiffToHuman } from '@protocol/utils'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
