Published
Edited
Jan 4, 2022
Fork of Simple D3
Insert cell
Insert cell
<div id="show4"></div>
Insert cell
<div id="txt4"></div>
Insert cell
showText4(randAddr(), "txt4")
Insert cell
function showText4(addr, divId){
addr= addr+"80";
console.log("text4", addr)
let ans="";
var n = addr.length;

for (let i=0; i<n/6; i++) {
let color = addr.slice(i*6,i*6+6)
let partial = addr.slice(i*6+1,i*6+2)+addr.slice(i*6+3,i*6+4)+addr.slice(i*6+5,i*6+6)
partial = "&nbsp;&nbsp;"
ans = ans + "<span style=\"background:#"+color+ ";color:#"+invertColor(color)+";\">"+partial+"</span>"
}
var place = document.getElementById(divId)
place.innerHTML = ans
}
Insert cell
showAddr4(randAddr(),"show4")
Insert cell
function showAddr4(addr, divId){ // addr /^0x[a-fA-F0-9]{40}$/
addr= addr+"80";
console.log("show4", addr)
let profileurl="https://raw.githubusercontent.com/the-laurel/laurels/main/data/images/0x0092D68117A00c6D8CC651a38522AAEEd54ba3F2.png";
const svg = d3.create("svg")
.attr("width", width)
.attr("height", width/2)
const r = 200
const wide = 4
const opacity = 0.6
const center = {x:300, y:300}
var circle;
// circle = svg.append("circle")
// circle.attr("r", r).attr("cx",center.x).attr("cy",center.y)
// circle.attr("fill", "#"+invertColor(addr.slice(0,6))).attr("opacity",0.8)
var n = addr.length;

for (let i=0; i<n/6; i++) {
circle = svg.append("circle")
circle.attr("r", r- wide*i).attr("cx",center.x).attr("cy",center.y)
circle.attr("fill", "#"+addr.slice(i*6,i*6+6)).attr("opacity", opacity)
}
let ndx=0;
["#f00","#0f0", "#00f"].forEach( x=> {
circle = svg.append("circle")
circle.attr("r", r- wide*7-2*ndx).attr("cx",center.x).attr("cy",center.y)
circle.attr("fill", x).attr("opacity",1)
ndx++
})

circle = svg.append("circle")
circle.attr("r", r- wide*7-6).attr("cx",center.x).attr("cy",center.y)
circle.attr("fill", "#fff").attr("opacity",1)

svg.append("svg:image")
.attr('x', 150)
.attr('y', 150)
.attr('width', 300)
.attr('height', 300)
.attr("xlink:href", profileurl)



var place = document.getElementById(divId)
if (place.childNodes[0]) {
place.replaceChild(svg.node(), place.childNodes[0])
} else {
place.appendChild(svg.node())
}
}
Insert cell
cipher= "0123456789abcdef"
Insert cell
showAddr1(randAddr(),"show")
Insert cell
<div id="show"></div>
Insert cell
showAddr2(randAddr(),"show2")
Insert cell
<div id="show2"></div>
Insert cell
function showAddr1(addr, divId){ // addr /^0x[a-fA-F0-9]{40}$/
const svg = d3.create("svg")
.attr("width", width)
.attr("height", width/2)
const r = 200
const center = {x:600, y:300}
var circle = svg.append("circle")
circle.attr("r", r).attr("cx",center.x).attr("cy",center.y)
circle.attr("fill", "#"+invertColor(addr.slice(0,6))).attr("opacity",0.8)
var path = d3.path();
var n = addr.length;
path.moveTo(600,500)
for (let i=0; i<41; i++) {
let x = r * Math.sin(2*Math.PI*parseInt(addr[i],16)/16)+center.x
let y = r * Math.cos(2*Math.PI*parseInt(addr[i],16)/16)+center.y
path.lineTo(x,y)
}

path.closePath()

svg.append("path")
.attr("d", path)
.attr("stroke-width", "0")
.attr("stroke", "black").attr("opacity",0.8)
.attr("fill", "#"+addr.slice(0,6));
var place = document.getElementById(divId)
if (place.childNodes[0]) {
place.replaceChild(svg.node(), place.childNodes[0])
} else {
place.appendChild(svg.node())
}
}
Insert cell
function showAddr2(addr, divId){ // addr /^0x[a-fA-F0-9]{40}$/
const svg = d3.create("svg")
.attr("width", width)
.attr("height", width/2)
const r = 200
const center = {x:600, y:300}
var circle = svg.append("circle")
circle.attr("r", r).attr("cx",center.x).attr("cy",center.y)
circle.attr("fill", "#"+invertColor(addr.slice(0,6))).attr("opacity",0.8)
var path = d3.path();
var n = addr.length;
path.moveTo(600,500)
for (let i=0; i<20; i++) {
let x = r * Math.sin(2*Math.PI*parseInt(addr.slice(2*i,2*i+2),16)/256)+center.x
let y = r * Math.cos(2*Math.PI*parseInt(addr.slice(2*i,2*i+2),16)/256)+center.y
console.log(x,y,addr.slice(2*i,2))
path.lineTo(x,y)
}

path.closePath()

svg.append("path")
.attr("d", path)
.attr("stroke-width", "0")
.attr("stroke", "black").attr("opacity",0.8)
.attr("fill", "#"+addr.slice(0,6));
var place = document.getElementById(divId)
if (place.childNodes[0]) {
place.replaceChild(svg.node(), place.childNodes[0])
} else {
place.appendChild(svg.node())
}
}
Insert cell
showAddr3(randAddr(),"show3")
Insert cell
<div id="show3"></div>
Insert cell
function showAddr3(addr, divId){ // addr /^0x[a-fA-F0-9]{40}$/
const svg = d3.create("svg")
.attr("width", width)
.attr("height", width/2)
const r = 200
const center = {x:600, y:300}
var circle = svg.append("circle")
circle.attr("r", r).attr("cx",center.x).attr("cy",center.y)
circle.attr("fill", "#"+invertColor(addr.slice(0,6))).attr("opacity",0.8)
var path = d3.path();
var n = addr.length;
path.moveTo(600,500)
for (let i=0; i<20; i++) {
let x = r * Math.sin(2*Math.PI*parseInt(addr.slice(2*i,2*i+1),16)/16)+center.x
let y = r * Math.cos(2*Math.PI*parseInt(addr.slice(2*i,2*i+1),16)/16)+center.y
let cpx = r * Math.sin(2*Math.PI*parseInt(addr.slice(2*i,2*i+2),16)/16)+center.x
let cpy = r * Math.cos(2*Math.PI*parseInt(addr.slice(2*i,2*i+2),16)/16)+center.y
//console.log(x,y,addr.slice(2*i,2))
path.quadraticCurveTo(cpx, cpy, x, y)
}

path.closePath()

svg.append("path")
.attr("d", path)
.attr("stroke-width", "0")
.attr("stroke", "black").attr("opacity",0.8)
.attr("fill", "#"+addr.slice(0,6));
var place = document.getElementById(divId)
if (place.childNodes[0]) {
place.replaceChild(svg.node(), place.childNodes[0])
} else {
place.appendChild(svg.node())
}
}
Insert cell
randAddr().slice(2,2)
Insert cell
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return
return padZero(r) + padZero(g) + padZero(b);
}


Insert cell
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
Insert cell
function randAddr(){
let len = 40
let addr=""
for (var i = 0; i < len; i++)
addr += cipher[(Math.floor(Math.random() * 16))];
return addr;
}
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