Published
Edited
Mar 10, 2020
1 star
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
console.log('x(0)', x(5), y(0), y(21000));

const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif")
.style("user-select", "none")
.style("background-color", "#023770")
.style("color", "#ffffff");

svg.call(defs);
svg.call(axis);
// Tx hash header
svg.call(header);
svg.call(contracts);
svg.call(accounts);
svg.call(stackBars);
svg.call(links);
// Initial invocation path
svg.call(invoke);
// Value transfers. Draw path from bar to account or contract
svg.call(valueTransfers);
// Token transfers
svg.call(tokenTransfers);

return Object.assign(svg.node(), {});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, callHierarchy.children.length + 1))
Insert cell
Insert cell
contSpace = (height-50) / contractMap.length
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
contractBox = ({ x: x(29), width: 120, height: 20 })
Insert cell
Insert cell
barWidth=9
Insert cell
x = d3.scaleLinear()
.domain([0, 40])
.range([margin.left, width - margin.right])
Insert cell
y = d3
.scaleLinear()
.domain([
0,
d3.extent(callHierarchy.descendants(), d =>
new Number(d.data.gasUsed).valueOf()
)[1]
])
.range([margin.top, height - margin.bottom])
Insert cell
abbreviateAddress = (addr) => {
return addr.substring(1, 8) + '...' + addr.slice(-4);
}
Insert cell
findMethod = (idx, name) => {
const contract = contractMap[idx];
return contract.methods.get(name);
}
Insert cell
findContract = (name) => {
return contractMap[name];
}
Insert cell
width = 420
Insert cell
height = d3.max([150, contractMap.length * 50])
Insert cell
margin = ({top: 50, right: 20, bottom: 10, left: 20})
Insert cell
Insert cell
assignCallSequence()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
contractMap = getContracts()
Insert cell
accountsData = await getAccounts();
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
axiosES = require("axios@0.19.0/dist/axios.js")
Insert cell
axios = require("axios@0.19.0/dist/axios.js");
Insert cell
Insert cell

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.
Learn more