Published
Edited
Feb 11, 2020
1 fork
createHeatmap('teaser')
md`We'll use ethers.js to fetch block data:`
provider = ethers.getDefaultProvider()
md`
First, let's define a function to process a block. For this, we fetch all the transactions in a block, then go through them in order, recording the maximum amount of gas available at each gas price.
`
get_gas_by_price = async function(block_number) {
const block = await provider.getBlock(block_number, true);
const transactions = block.transactions;
if(transactions.length == 0) {
return [];
}
transactions.sort((a, b) => b.gasPrice - a.gasPrice);
const receipts = await Promise.all(transactions.map(tx => provider.getTransactionReceipt(tx.hash)));
let gasPrice = transactions[0].gasPrice;
let gasLeft = block.gasLimit;
let gasAtPrice = 0;
let items = [];
for(let i = 0; i < transactions.length; i++) {
let tx = transactions[i];
let receipt = receipts[i];
if(tx.gasPrice < gasPrice) {
items.push({gasPrice: gasPrice, gasLeft: gasLeft, gas: gasAtPrice});
gasLeft -= gasAtPrice;
gasAtPrice = 0;
gasPrice = tx.gasPrice;
}
gasAtPrice += receipt.gasUsed.toNumber();
}
items.push({gasPrice: gasPrice, gasLeft: gasLeft, gas: gasLeft});
return items;
}
md`
Let's compute this function for a bunch of recent blocks:
`
blockCount = 50
gasMaps = {
let items = [];
let latest = await provider.getBlockNumber('latest');
let seen = latest - blockCount;
while(true) {
for(let i = seen + 1; i < latest; i++) {
items.push({block: i, map: await get_gas_by_price(i)});
items = items.slice(-blockCount);
yield items;
}
seen = latest;
latest = await provider.getBlockNumber('latest');
await Promises.delay(5000);
}
};
md`
Now let's compute the domains - minimum and maximum gas price and limit:
`
latest = Math.max(...gasMaps.map(item => item.block));
oldest = Math.min(...gasMaps.map(item => item.block));
minGasPrice = Math.min(...gasMaps.flatMap(items => items.map.flatMap(item => item.gasPrice)));
maxGasPrice = Math.max(...gasMaps.flatMap(items => items.map.flatMap(item => item.gasPrice)));
maxGasLimit = Math.max(...gasMaps.flatMap(items => items.map.flatMap(item => item.gasLeft)));
md`
Next, let's set some parameters for our visualisation:
`
mutable params = {
let out = {};
out["svg"] = {
"width": width, // use width variable to calculate our svg size
"height": width / 1.618 // golden ratio
};
out["margin"] = {
"top": 10,
"right": 10,
"bottom": 20,
"left": 50
};
out["plot"] = {
"x": out["margin"]["left"],
"y": out["margin"]["top"],
"width": out["svg"]["width"] - out["margin"]["left"] - out["margin"]["right"],
"height": out["svg"]["height"] - out["margin"]["top"] - out["margin"]["bottom"]
};
return out;
}
md`And create scales and axes using d3:`
scale = {
return {
x: d3.scaleLinear().domain([0, maxGasLimit]).range([0, params.plot.width]),
y: d3.scaleLinear().domain([oldest - 1, latest]).range([0, params.plot.height]),
color: d3.scaleSequentialLog(d3.interpolatePlasma).domain([minGasPrice, maxGasPrice]),
};
}
axis = {
let x = d3.axisBottom(scale.x);
x.tickPadding(0);
let y = d3.axisLeft(scale.y);
y.tickPadding(0);
return {x: x, y: y};
}
md`Now some functions, borrowed from [this notebook](https://observablehq.com/@sjengle/zillow-affordability-heatmap) for generating an SVG and a Plot using d3:`
createSVG = function(id) {
let svg = d3.select(DOM.svg(params.svg.width, params.svg.height));
svg.attr("id", id);
let plot = svg.append("g");
plot.attr("id", "plot");
plot.attr("transform", translate(params.plot.x, params.plot.y));
let rect = plot.append("rect");
rect.attr("id", "background");
rect.attr("x", 0);
rect.attr("y", 0);
rect.attr("width", params.plot.width);
rect.attr("height", params.plot.height);
// this returns an SVG for the notebook cell
return svg.node();
}
createPlot = function(id) {
let node = createSVG(id);
let svg = d3.select(node);
let gx = svg.append("g");
gx.attr("id", "x-axis");
gx.attr("class", "axis");
gx.attr("transform", translate(params.plot.x, params.plot.y + params.plot.height));
gx.call(axis.x);
let gy = svg.append("g");
gy.attr("id", "y-axis");
gy.attr("class", "axis");
gy.attr("transform", translate(params.plot.x, params.plot.y));
gy.call(axis.y);
return node;
}
md`Finally, a function to generate our heatmap:`
createHeatmap = function(id) {
let node = createPlot(id);
let svg = d3.select(node);
let plot = svg.select("g#plot");
// create one group per row
let rows = plot.selectAll("g.cell")
.data(gasMaps)
.enter()
.append("g");
rows.attr("class", "cell");
rows.attr("id", function(d) { return "block-" + d.block; });
// shift the entire group to the appropriate y-location
rows.attr("transform", function(d) {
return translate(0, scale.y(d.block - 1));
});
// create one rect per cell within row group
let cells = rows.selectAll("rect")
.data(function(d) { return d.map; })
.enter()
.append("rect");
cells.attr("x", function(d) { return scale.x(d.gasLeft - d.gas); });
cells.attr("y", 0); // handled by group transform
cells.attr("width", d => scale.x(d.gas));
cells.attr("height", params.plot.height / (latest - oldest));
cells.append("title").text(function(d) { return (d.gasPrice / 1e9) + " gwei"; });
// here is the color magic!
cells.style("fill", function(d) { return scale.color(d.gasPrice); });
cells.style("stroke", function(d) { return scale.color(d.gasPrice); });
return node;
}
createHeatmap('heatmap')
md`# Imports`
d3 = require('d3@5')
ethers = require('ethers')
md`# Helper Functions`
// helper method to make translating easier
translate = function(x, y) {
return "translate(" + x + "," + y + ")";
};
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.
