D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
headwinds
Full window
Github gist
Gr4y5kull
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> // l33t challenge const createL33t = (str) => { let l33t = []; const arr = str.split(""); const hashMap = { "a":4, "e":3, "i":1, "o":0, "s":5, "t":7 } arr.map( s => { let found = false; for (ix in hashMap) { if (s.toLowerCase() === ix) { l33t.push(hashMap[ix] ) found = true; } } if (!found) { l33t.push(s) } }) return l33t.join(""); } var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) const sheraSays = createL33t("By the powEr of GrAyskull!"); const goodtimes = createL33t("Let's hAvE some fun. "); // String letter counting problem const countLetters = (str) => { const arr = str.split(""); const sequence = []; let prevVal = ""; let keepIdx = 0; const counter = arr.reduce((acc, curVal, idx) => { if (prevVal === curVal){ acc[keepIdx].count++; } else { acc[idx] = {letter: curVal, count: 1} keepIdx = idx; } prevVal = curVal; return acc; }, []); console.log("counter: ", counter) for (let ix in counter){ sequence.push(counter[ix].letter); sequence.push(counter[ix].count) } return sequence.join(""); } const countSeq = countLetters('aabbaa'); const countSeq2 = countLetters('aaabbdcccccf'); svg.append("text") .text(sheraSays) .attr("y", 200) .attr("x", 120) .attr("font-size", 36) .attr("font-family", "monospace") svg.append("text") .text(goodtimes) .attr("y", 240) .attr("x", 120) .attr("font-size", 36) .attr("font-family", "monospace") svg.append("text") .text(countSeq) .attr("y", 336) .attr("x", 140) .attr("font-size", 36) .attr("font-family", "monospace") svg.append("text") .text(countSeq2) .attr("y", 299) .attr("x", 140) .attr("font-size", 36) .attr("font-family", "monospace") </script> </body>
https://d3js.org/d3.v4.min.js