Published
Edited
Feb 11, 2021
1 fork
4 stars
dot = require("@observablehq/graphviz@0.2")
dot`digraph {
node [shape="square", color="red"];
edge [label="edgeName", color="blue"];
a -> b;
b -> c;
d -> h [label="from d to h"];
}`
themes = ({
orangeSquares: 'node [color=orange; shape=square]; edge [color=red]',
orangeCircles: 'node [color=orange; shape=circle]; edge [color=red]',
graySquares: 'node [color=gray; shape=square; fontname="monospace"]; edge [color=black]',
grayCircles: 'node [color=gray; shape=circle; fontname="monospace"]; edge [color=black]',
})
prepareGraph = (g, s = '->') => g.map(edge => `${edge[0]} ${s} ${edge[1]}`).join(';');
showGraph = (g, size=3, options="") => dot`graph {size=${size}; ${options} ${prepareGraph(g, '--')}}`
showDigraph = (g, size=3, options="") => dot`digraph {size=${size}; ${options} ${prepareGraph(g, '->')}}`
graph = [['a','b'], ['a', 100], ["hello","test"]]
d3 = require('d3@6');
showMethods(d3, "random")
rndInt = (a=0, b=100) => ~~(Math.random() * (b - a) + a)
randomList = (n, a=0, b=100) => {
const numbers = [];
for(let i = 0; i < n; i++) { numbers.push(rndInt(a, b)) }
return numbers;
}
r = d3.range(10, 600)// randomList(300, 10, 600)
makePairs = (arr, pred) => {
const pairs = [];
for(let i = 0; i < arr.length; i++) {
for(let j = i + 1; j < arr.length; j++) {
if (pred(arr[i], arr[j])) {
pairs.push([arr[i], arr[j]]);
}
}
}
return pairs;
}
g2 = makePairs(r, (i, j) => j % i === 0).filter(edge => edge[0] !== edge[1] && edge[1] % (edge[0] + 1) === 2);
showDigraph(g2, 10, themes.orangeSquares)
pairsFromWords = words => {
const pairsSet = new Set();
const pairs = [];
const s = words;
for(let i = 1; i < s.length; i++) {
const twoChars = s.charAt(i-1) + s.charAt(i);
if(twoChars.includes(' ') || twoChars.includes('.') || twoChars.includes('+')) continue;
if(pairsSet.has(twoChars)) continue;
pairsSet.add(twoChars);
pairs.push([s.charAt(i-1), s.charAt(i)]);
}
return pairs;
}
g3 = pairsFromWords("randomBates randomBernoulli randomBeta randomBinomial randomCauchy randomExponential randomGamma randomGeometric randomInt randomIrwinHall randomLcg randomLogNormal randomLogistic randomNormal randomPareto randomPoisson randomUniform randomWeibull".toUpperCase())
showDigraph(g3, 10, themes.orangeSquares)
g4 = pairsFromWords("This leads to algorithms for generating polyominoes inductively".toUpperCase())
showDigraph(g4, 10, themes.orangeSquares)
printList1 = d3.range(2, 100).filter(isPrime).join(" ")
g5 = pairsFromWords(printList1)
showDigraph(g5, 10, themes.grayCircles)
primeList2 = d3.range(10000, 10200).filter(isPrime).join(" ")
g6 = pairsFromWords(primeList2)
showDigraph(g6, 10, themes.grayCircles)
showGraph(graph,2,'node [color=gray; shape=square]')
showDigraph(graph,2,'node [color=gray; shape=square]')
dot`graph {
size = 2;
a -- b -- c;
d -- a -- c;
}`
dot`digraph G {
node [shape=plaintext]
a -> b; b-> c; c -> a;
}`
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.
