// Given an array of miners, generate a plot of them. plotMiners = (miners) => { const height = 400; const margin = { top: 20, right: 0, bottom: 20, left: 30 }; const inset = { top: 20, right: 80, bottom: 20, left: 20 }; const svg = d3.select(DOM.svg(width, height)); const wattsExtent = d3.extent(miners, ({ watts }) => watts); const thExtent = d3.extent(miners, ({ th }) => th); const xScale = (logScale.includes("x-axis") ? d3.scaleLog() : d3.scaleLinear() ) .domain(wattsExtent) .range([margin.left, width - margin.left - margin.right]); xScale.domain([ xScale.invert(xScale.range()[0] - inset.left), xScale.invert(xScale.range()[1] + inset.right) ]); const yScale = (logScale.includes("y-axis") ? d3.scaleLog() : d3.scaleLinear() ) .domain(thExtent) .range([height - margin.bottom, margin.top]); yScale.domain([ yScale.invert(yScale.range()[0] + inset.bottom), yScale.invert(yScale.range()[1] - inset.top) ]); const colorScale = d3.scaleOrdinal(d3.schemeCategory10); // Background rect (interactivity target). const bgRect = svg .append("g") .append("rect") .attr("fill", "rgba(255, 255, 255, 0.01)") //.attr("fill", "yellow") .attr("x", xScale.range()[0]) .attr("y", margin.top) .attr("width", xScale.range()[1] - xScale.range()[0]) .attr("height", height - margin.top - margin.bottom); // X-axis. svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call( d3 .axisBottom(xScale) .ticks(width / 80) .tickSizeOuter(0) ); // Y-axis. svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call( d3 .axisLeft(yScale) .ticks(height / 40) .tickSizeOuter(0) ); // Curves. const curves = svg .append("g") .style("pointer-events", "none") .selectAll("g") .data( d3.cross(ddValues, [100, 1000, 10000, 100000], (dd, price) => ({ dd, price })) ) .join("g"); curves .selectAll("line") .data(({ dd, price }) => d3.pairs( xScale .ticks(100) .map((watts) => ({ watts, th: Math.sqrt((price * watts) / (dd * elongatedHashPrice)) })) .filter( ({ watts, th }) => watts > xScale.domain()[0] && watts < xScale.domain()[1] && th > yScale.domain()[0] && th < yScale.domain()[1] ) ) ) .join("line") .attr("stroke", "rgba(0, 0, 0, .1)") .attr("x1", ([{ watts }]) => xScale(watts)) .attr("y1", ([{ th }]) => yScale(th)) .attr("x2", ([_, { watts }]) => xScale(watts)) .attr("y2", ([_, { th }]) => yScale(th)); console.log(curves); // Dots. svg .append("g") .style("pointer-events", "none") .selectAll("circle") .data(miners) .join("circle") .attr("cx", ({ watts }) => xScale(watts)) .attr("cy", ({ th }) => yScale(th)) .attr("r", 4) .attr("fill", ({ vendor }) => colorScale(vendor)); // Labels. svg .append("g") .style("text-anchor", "start") .style("dominant-baseline", "middle") .style("pointer-events", "none") .selectAll("text") .data(miners) .join("text") .attr("x", ({ watts }) => xScale(watts) + 6) .attr("y", ({ th }) => yScale(th) + 1) .text(({ model }) => model); const overlay = svg.append("g").style("stroke", "rgba(0, 0, 0, 0.3)"); const hLine = overlay .append("line") .attr("x1", margin.left) .attr("x2", width - margin.left - margin.right); const vLine = overlay .append("line") .attr("y1", margin.top) .attr("y2", height - margin.bottom); // Header for legend and hover info. const header = d3 .select(html`

`) .style("display", "flex") .style("flex-direction", "row") .style("flex-wrap", "wrap") .style("gap", "1em") .style("justify-content", "space-between"); // Legend. const vendors = d3 .rollup( miners, ({ length }) => length, ({ vendor }) => vendor ) .entries(); const legendItems = header .append("ul") .style("display", "flex") .style("flex-direction", "row") .style("flex-wrap", "wrap") .style("gap", "1em") .style("margin", 0) .style("padding", 0) .selectAll("li") .data(vendors) .join("li") .style("list-style-type", "none") .style("white-space", "nowrap"); legendItems .append("span") .style("display", "inline-block") .style("width", "1em") .style("height", "1em") .style("position", "relative") .style("top", "0.1em") .style("margin-right", "0.25em") .style("background-color", ([vendor]) => colorScale(vendor)); legendItems .append("span") .style("white-space", "nowrap") .text(([vendor, count]) => `${vendor} (${count})`); const info = header .append("div") .style("display", "flex") .style("flex-grow", 1) .style("flex-direction", "row") .style("flex-wrap", "wrap") .style("gap", "1em"); // Setup interactivity. bgRect.on("mousemove", (event) => { const [x, y] = d3.pointer(event, bgRect.node()); const watts = xScale.invert(x); const th = yScale.invert(y); hLine.attr("y1", yScale(th)).attr("y2", yScale(th)); vLine.attr("x1", xScale(watts)).attr("x2", xScale(watts)); const th2EhpPerWatts = (th * th * elongatedHashPrice) / watts; const entries = info .selectAll("div") .data([ ["watts", d3.format(".3r")(watts)], ["th", d3.format(".2r")(th)], ...d3 .sort( selectedDDColumns.map((dd) => +dd.substring(2)), d3.descending ) .map((dd) => [`dd${dd}`, ddFormat(dd * th2EhpPerWatts)]) ]) .join("div") .style("white-space", "nowrap") .html(": "); entries.select("strong").text(([label]) => label); entries.select("span").text(([_, value]) => value); }); // Create figure from components. const figure = html`

`; d3.select(figure) .style("font-family", '"DejaVu Sans", "Helvetica", "Arial", sans-serif') .style("font-size", "small"); figure.appendChild(header.node()); figure.appendChild(svg.node()); return figure; }