D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
headwinds
Full window
Github gist
Recursion
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> // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) svg.append("text") .text("Recursive Crusade") .attr("id","title") .attr("y", 50) .attr("x", 20) .attr("font-size", 28) .attr("font-weight", 500) .attr("fill", "teal") .attr("font-family", "monospace") svg.append("text") .text("") .attr("id", "result") .attr("y", 90) .attr("x", 30) .attr("font-size", 20) .attr("font-family", "monospace") svg.append("text") .text("...") .attr("id", "recursion") .attr("y", 120) .attr("x", 50) .attr("font-size", 20) .attr("font-family", "monospace") function removeDuplicateDates(arr, equals) { var originalArr = arr.slice(0); var i, len, j, val; arr.length = 0; for (i = 0, len = originalArr.length; i < len; ++i) { val = originalArr[i]; if (!arr.some(function(item) { return thingsEqual(item, val); })) { arr.push(val); } } } function thingsEqual(thing1, thing2) { const date1 = new Date(thing1.created_on); const date2 = new Date(thing2.created_on); return date1.getDate() === date2.getDate() && date1.getMonth() === date1.getMonth() && date1.getFullYear() === date1.getFullYear(); } const things = [ {created_on:"Fri, 06 Dec 2019 02:31:20 GMT",name:"sword"}, {created_on:"Fri, 07 Dec 2019 02:31:20 GMT",name:"shield"}, {created_on:"Fri, 08 Dec 2019 02:31:20 GMT",name:"mace"}, {created_on:"Fri, 08 Dec 2019 02:31:20 GMT",name:"mace"} ]; removeDuplicateDates(things, thingsEqual); const updateResult = ( id, result, color) => { d3.select(`#${id}`).text(result) if (color){ d3.select(`#${id}`).attr("fill", color) } } const str = things.map( thing => (thing.name)) updateResult("result", String(str)) // Resursion practice... const phrase = "As the cleric healed the wounded...".split(""); let sentence = ""; function walkPhrase(phrase, n) { if (n === 0) { return; } else { return setTimeout( () => { const bit = phrase[n-1]; sentence = bit + sentence; const color = n % 2 === 0 ? "pink" : "red"; updateResult("recursion", sentence, color); return walkPhrase(phrase, n - 1) }, 200) } } walkPhrase(phrase, phrase.length) </script> </body>
https://d3js.org/d3.v4.min.js