chart.update(slider)
viewof chartFocus = Inputs.text({ value: defaultChartFocus })
selectedDate = dateFns.roundToNearestMinutes(timeScale.invert(slider), { nearestTo: 30 })
filteredRegionData(selectedDate)
filteredDailyDealsByRegion(selectedDate)
selectedDate
selectedData = {
const selectedRows = []
const partionedData = partition(data, selectedDate)
partionedData.eachBefore(node => {
selectedRows.push({
longCode: node.data.longCode,
name: node.data.name,
value: node.value
})
})
return selectedRows
}
partition = (data, selectedDate) => {
const root = d3.hierarchy(data)
.each(node => {
const codes = []
for (const ancestor of node.ancestors()) {
if (ancestor.data.code) {
codes.unshift(ancestor.data.code)
}
}
node.data.longCode = codes.length > 0 ? codes.join('-') : 'all'
})
// .sum(d => d.value)
.sum(d => {
if (!d.longCode) return 0
const row = filteredRegionData(selectedDate).get(d.longCode)
const dealsRow = filteredDailyDealsByRegion(selectedDate).get(d.longCode)
if (dataSource === 'Quality Adjusted Power') {
return row && row.qualityAdjPower
} else if (dataSource === 'Provider Count') {
return row && row.minerCount
} else if (dataSource === '28-Day Published Deals: Count*') {
return dealsRow && dealsRow.twentyEightDayDealCount
} else if (dataSource === '28-Day Published Deals: Data Size') {
return dealsRow && dealsRow.twentyEightDayDataSize
} else if (dataSource === '28-Day Published Deals: Lifetime Value') {
return dealsRow && dealsRow.twentyEightDayLifetimeValue
} else if (dataSource === '7-Day Published Deals: Count*') {
return dealsRow && dealsRow.sevenDayDealCount
} else if (dataSource === '7-Day Published Deals: Data Size') {
return dealsRow && dealsRow.sevenDayDataSize
} else if (dataSource === '7-Day Published Deals: Lifetime Value') {
return dealsRow && dealsRow.sevenDayLifetimeValue
} else if (dataSource === '1-Day Published Deals: Count*') {
return dealsRow && dealsRow.count
} else if (dataSource === '1-Day Published Deals: Data Size') {
return dealsRow && dealsRow['sum(pieceSizeDouble)']
} else if (dataSource === '1-Day Published Deals: Lifetime Value') {
return dealsRow && dealsRow['sum(lifetimeValue)']
} else {
return 1
}
})
.sort((a, b) => b.value - a.value);
const sizes = d3.partition()
.size([2 * Math.PI, root.height + 1])
(root);
return sizes;
}
color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))
width = 932
radius = width / 6
arc = d3.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(radius * 1.5)
.innerRadius(d => d.y0 * radius)
.outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))
rows = minerPowerByRegionReport.rows.map(row => ({ ...row, date: d3.isoParse(row.date) }))
numberOfDays = d3.timeDay.count(startDate, endDate)
timeScale = d3.scaleUtc()
.domain([startDate, endDate])
.range([0, numberOfDays])
startDate.toISOString()
endDate.toISOString()
filteredRows = selectedDate => rows
.filter(({ date }) => dateFns.isEqual(date, selectedDate))
.map(row => ({
region: row.region,
minerCount: row['sum(splitCount)'],
rawBytePower: row['sum(rawBytePower)'],
rawBytePowerKiB: row['sum(rawBytePower)'] / 1024,
rawBytePowerMiB: row['sum(rawBytePower)'] / 1024 ** 2,
rawBytePowerGiB: row['sum(rawBytePower)'] / 1024 ** 3,
rawBytePowerTiB: row['sum(rawBytePower)'] / 1024 ** 4,
rawBytePowerPiB: row['sum(rawBytePower)'] / 1024 ** 5,
rawBytePowerEiB: row['sum(rawBytePower)'] / 1024 ** 6,
qualityAdjPower: row['sum(qualityAdjPower)'],
qualityAdjPowerKiB: row['sum(qualityAdjPower)'] / 1024,
qualityAdjPowerMiB: row['sum(qualityAdjPower)'] / 1024 ** 2,
qualityAdjPowerGiB: row['sum(qualityAdjPower)'] / 1024 ** 3,
qualityAdjPowerTiB: row['sum(qualityAdjPower)'] / 1024 ** 4,
qualityAdjPowerPiB: row['sum(qualityAdjPower)'] / 1024 ** 5,
qualityAdjPowerEiB: row['sum(qualityAdjPower)'] / 1024 ** 6,
}))
filteredRegionData = selectedDate => d3.index(filteredRows(selectedDate), d => d.region)
/* selectedData = {
const selectedDate = dateFns.roundToNearestMinutes(timeScale.invert(slider), { nearestTo: 30 })
return filteredRows(selectedDate)
} */
// selectedData.reduce((acc, val) => acc + val.minerCount, 0)
dailyDealsByRegion = {
const file = useSyntheticRegions ? 'daily-deals-by-synthetic-region' : 'daily-deals-by-region'
const deals = await (await fetch(`${dealsBucketUrl}/${file}.json`)).json()
return deals.map(({ date, ...rest }) => ({ date: d3.isoParse(date), ...rest }))
}
JSON.stringify(dailyDealsByRegion[0])
endDates = [rows[minerPowerByRegionReport.rows.length - 1].date, dailyDealsByRegion[dailyDealsByRegion.length - 1].date]
endDate = dateFns.min(endDates)
dailyDealsByRegionIndexed = d3.index(dailyDealsByRegion, d => d.region, d => d.date)
dailyDealsByRegionWith7DaySums = {
const rows = []
const [minDate, maxDate] = d3.extent(dailyDealsByRegion.map(d => d.date))
for (let targetDate = minDate; targetDate <= maxDate; targetDate = agnosticAddDays(targetDate, 1)) {
const sevenDayDateRange = d3.utcDay.range(
agnosticAddDays(targetDate, -6),
agnosticAddDays(targetDate, 1)
)
const twentyEightDayDateRange = d3.utcDay.range(
agnosticAddDays(targetDate, -27),
agnosticAddDays(targetDate, 1)
)
for (const region of dailyDealsByRegionIndexed.keys()) {
let sevenDayDealCount = 0
let sevenDayDataSize = 0
let sevenDayLifetimeValue = 0
let twentyEightDayDealCount = 0
let twentyEightDayDataSize = 0
let twentyEightDayLifetimeValue = 0
const dateIndex = dailyDealsByRegionIndexed.get(region)
const row = getRow(dateIndex, region, targetDate)
for (const date of sevenDayDateRange) {
const pastDateRow = getRow(dateIndex, region, date)
sevenDayDealCount += pastDateRow.count
sevenDayDataSize += pastDateRow['sum(pieceSizeDouble)']
sevenDayLifetimeValue += pastDateRow['sum(lifetimeValue)']
}
for (const date of twentyEightDayDateRange) {
const pastDateRow = getRow(dateIndex, region, date)
twentyEightDayDealCount += pastDateRow.count
twentyEightDayDataSize += pastDateRow['sum(pieceSizeDouble)']
twentyEightDayLifetimeValue += pastDateRow['sum(lifetimeValue)']
}
rows.push({
...row,
sevenDayDealCount,
sevenDayDataSize,
sevenDayLifetimeValue,
twentyEightDayDealCount,
twentyEightDayDataSize,
twentyEightDayLifetimeValue
})
}
}
return rows
function getRow (dateIndex, region, date) {
if (dateIndex.get(date)) {
return {
count: 0,
'sum(pieceSizeDouble)': 0,
'sum(lifetimeValue)': 0,
...dateIndex.get(date)
}
} else {
return {
date,
region,
count: 0,
'sum(pieceSizeDouble)': 0,
'sum(lifetimeValue)': 0
}
}
}
}
firstDateAfterGenesis = epochToDate(240)
startDate = {
if (dataSource === 'Quality Adjusted Power') return firstDateAfterGenesis
if (dataSource === 'Provider Count') return firstDateAfterGenesis
return dailyDealsByRegion[0].date
}
filteredDailyDealsByRegion = selectedDate => d3.index(dailyDealsByRegionWith7DaySums.filter(({ date }) => dateFns.isEqual(date, selectedDate)), d => d.region)
params = [...(new URLSearchParams(location.search.substring(1))).entries()].reduce((acc, [key, value]) => ({ [key]: value, ...acc }), {})
defaultDataSource = (params.datasource && params.datasource.replace('Deals: Count', 'Deals: Count*')) || 'Quality Adjusted Power'
defaultHideNoRegion = 'hidenoregion' in params
params
defaultDateIndex = params.date ? agnosticDifferenceInDays(d3.isoParse(params.date), startDate) : numberOfDays
startDate
defaultUseSyntheticRegions = params.synthetic != undefined ? (params.synthetic == 'true') : true
useSyntheticRegions = options.includes('Use Synthetic Regions')
permalink = {
const selectedDate = dateFns.roundToNearestMinutes(timeScale.invert(slider), { nearestTo: 30 })
let url = `${document.baseURI.replace(/\?.*/,'')}?` +
`datasource=${encodeURIComponent(dataSource.replace('*', ''))}&` +
`date=${selectedDate.toISOString().substr(0, 10)}&` +
`chartfocus=${chartFocus}&` +
`synthetic=${useSyntheticRegions}`
if (options.includes('Hide "No Region"')) {
url += '&hidenoregion'
}
return `[Permalink](${url})`
}
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.
