https://github.com/AdamWhiteHat
https://csharpcodewhisperer.blogspot.com
md`# (design) neural network letter diagrams
For a Cloudera Fast Forward t-shirt design.`
md`## Final`
{
let letters = [o_points, r_points, k_points, s_points];
let columns = 7;
let rows = 3;
let canvas_padding = 80;
let swidth = width * columns + canvas_padding * 2;
let sheight = height * rows + canvas_padding * 2;
return html`<svg width="${swidth}" height="${sheight}">
<rect x="0" y="0" width=${swidth} height=${sheight} fill="#222" />
${letters.map((l, i) => {
let c = i % columns;
let r = Math.floor(i / columns);
let x = c * width + canvas_padding;
let y = r * height + canvas_padding;
return drawRowLetter(l, [x, y]);
})}
</svg>`;
}
md`## Process`
radius = 8
grid_space_x = 20
grid_space_y = 32
points_x = 5
points_y = 5
padding_x = grid_space_x
padding_y = grid_space_x
width = padding_x * 2 + (radius * 2) * points_x + grid_space_x * (points_x - 1)
height = padding_y * 2 + (radius * 2) * points_y + grid_space_y * (points_y - 1)
lowera_points = [
0, 0, 0, 0, 0,
0, 1, 1, 0, 0,
1, 0, 0, 1, 0,
1, 0, 0, 1, 0,
1, 1, 1, 0, 1
]
m_points = [
1, 0, 0, 0, 0,
0, 0, 0, 0, 1,
1, 0, 0, 0, 0,
0, 0, 0, 0, 1,
1, 0, 0, 0, 0
]
t_points = [
1, 1, 1, 1, 1,
0, 0, 1, 0, 0,
0, 0, 1, 0, 0,
0, 0, 1, 0, 0,
0, 0, 1, 0, 0
]
w_points = [
1, 0, 0, 0, 1,
1, 0, 0, 0, 1,
1, 0, 1, 0, 1,
1, 0, 0, 0, 1,
0, 1, 0, 1, 0
]
k_points = [
1, 0, 0, 1, 0,
1, 0, 1, 0, 0,
1, 1, 0, 0, 0,
1, 0, 1, 0, 0,
1, 0, 0, 1, 0
]
s_points = [
1, 1, 1, 1, 1,
1, 0, 0, 0, 0,
1, 1, 1, 1, 1,
0, 0, 0, 0, 1,
1, 1, 1, 1, 1
]
ff_points = [
1, 0, 1, 0, 0,
1, 1, 1, 1, 0,
1, 0, 1, 0, 1,
1, 1, 1, 1, 0,
1, 0, 1, 0, 0,
]
all_points = [
1,1,1,1,1,
1,1,1,1,1,
1,1,1,1,1,
1,1,1,1,1,
1,1,1,1,1,
]
space = [
0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
]
function splitIntoColumns(letter_points) {
let columns = [...Array(points_x)].map(n => [])
for (let p = 0; p < letter_points.length; p++) {
let c = p % points_x
let v = letter_points[p]
columns[c].push(v)
}
return columns
}
function splitIntoRows(letter_points) {
let rows = [...Array(points_y)].map(n => [])
for (let p = 0; p < letter_points.length; p++) {
let r = Math.floor(p /points_x)
let v = letter_points[p]
rows[r].push(v)
}
return rows
}
function getRowConnections(letter_points) {
let connections = []
let rows = splitIntoRows(letter_points)
for (let r = 0; r < rows.length; r++) {
if (r !== rows.length - 1) {
// if not last
let row = rows[r];
let next_row = rows[r + 1];
for (let c = 0; c < row.length; c++) {
let this_point = row[c]
if (this_point === 1) {
for (let nc = 0; nc < row.length; nc++) {
let next_point = next_row[nc]
if (next_point === 1) {
connections.push([[c,r], [nc, r+1]])
}
}
}
}
}
}
return connections
}
function getColumnConnections(letter_points) {
let connections = []
let columns = splitIntoColumns(letter_points)
for (let c = 0; c < columns.length; c++) {
if (c !== columns.length - 1) {
// if not last
let column = columns[c];
let next_columns = columns[c + 1];
for (let r = 0; r < column.length; r++) {
let this_point = column[r]
if (this_point === 1) {
for (let nr = 0; nr < column.length; nr++) {
let next_point = next_columns[nr]
if (next_point === 1) {
connections.push([[c,r], [c+1,nr]])
}
}
}
}
}
}
return connections
}
getColumnConnections(c_points)
function drawColumnLetter(l_points, offset) {
let connections = getColumnConnections(l_points)
return `${connections.map((c, i) => {
let c1 = c[0][0]
let r1 = c[0][1]
let c2 = c[1][0]
let r2 = c[1][1]
let x1 = padding_x + radius * 2 * c1 + grid_space_x * c1 + radius + offset[0]
let x2 = padding_x + radius * 2 * c2 + grid_space_x * c2 + radius + offset[0]
let y1 = padding_y + radius * 2 * r1 + grid_space_y * r1 + radius + offset[1]
let y2 = padding_y + radius * 2 * r2 + grid_space_y * r2 + radius + offset[1]
return `<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke="black" stroke-width="2" />`
})}
${l_points.map((v, i) => {
if (v === 1) {
let c = i % points_x;
let r = Math.floor(i / points_x);
let x = padding_x + radius * 2 * c + grid_space_x * c + radius + offset[0]
let y = padding_y + radius * 2 * r + grid_space_y * r + radius + offset[1]
return `<circle cx="${x}" cy="${y}" r="${radius}" />`
}
})}`
}
{
return html`<svg width="${width * 3}" height="${height * 3}">
${drawColumnLetter(n_points, [0, 0])}
${drawColumnLetter(e_points, [width, 0])}
${drawColumnLetter(t_points, [width * 2, 0])}
${drawColumnLetter(w_points, [width * 0, height])}
${drawColumnLetter(o_points, [width * 1, height])}
${drawColumnLetter(r_points, [width * 2, height * 1])}
${drawColumnLetter(k_points, [width * 0, height * 2])}
${drawColumnLetter(s_points, [width * 1, height * 2])}
</svg>`;
}
function drawRowLetter(l_points, offset) {
let connections = getRowConnections(l_points)
let all_connections = getRowConnections(all_points)
return `${all_connections.map((c, i) => {
let c1 = c[0][0]
let r1 = c[0][1]
let c2 = c[1][0]
let r2 = c[1][1]
let x1 = padding_x + radius * 2 * c1 + grid_space_x * c1 + radius + offset[0]
let x2 = padding_x + radius * 2 * c2 + grid_space_x * c2 + radius + offset[0]
let y1 = padding_y + radius * 2 * r1 + grid_space_y * r1 + radius + offset[1]
let y2 = padding_y + radius * 2 * r2 + grid_space_y * r2 + radius + offset[1]
// return `<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke="white" stroke-width="2" />`
})}
${connections.map((c, i) => {
let c1 = c[0][0]
let r1 = c[0][1]
let c2 = c[1][0]
let r2 = c[1][1]
let x1 = padding_x + radius * 2 * c1 + grid_space_x * c1 + radius + offset[0]
let x2 = padding_x + radius * 2 * c2 + grid_space_x * c2 + radius + offset[0]
let y1 = padding_y + radius * 2 * r1 + grid_space_y * r1 + radius + offset[1]
let y2 = padding_y + radius * 2 * r2 + grid_space_y * r2 + radius + offset[1]
return `<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke="white" stroke-width="2" />`
})}
${all_points.map((v, i) => {
if (v === 1) {
let c = i % points_x;
let r = Math.floor(i / points_x);
let x = padding_x + radius * 2 * c + grid_space_x * c + radius + offset[0]
let y = padding_y + radius * 2 * r + grid_space_y * r + radius + offset[1]
// return `<circle cx="${x}" cy="${y}" r="${radius/1.5}" fill="white" />`
}
})}
${l_points.map((v, i) => {
if (v === 1) {
let c = i % points_x;
let r = Math.floor(i / points_x);
let x = padding_x + radius * 2 * c + grid_space_x * c + radius + offset[0]
let y = padding_y + radius * 2 * r + grid_space_y * r + radius + offset[1]
return `<circle cx="${x}" cy="${y}" r="${radius/1}" fill="white" />`
}
})}`
}
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.
