D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
zeffii
Full window
Github gist
buzz theme editor
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> <div class='media' hidden>LC NAME RGB DC BG 000000 DC Text C0C0C0 IV BG 000000 IV Text 000000 MV Amp BG FFFFFF MV Amp Handle 000000 MV Arrow FFFFFF MV Background DAD6C9 MV Control ADADAD MV Effect C7ADA9 MV Effect LED Border 000000 MV Effect LED Off 641E1E MV Effect LED On FF6464 MV Effect Mute 9F8A87 MV Effect Pan BG 92655F MV Generator A9AEC7 MV Generator LED Border 000000 MV Generator LED Off 28288C MV Generator LED On 6464FF MV Generator Mute 878B9F MV Generator Pan BG 5F6792 MV Line 000000 MV Machine Border 000000 MV Machine Select 1 FFFFFF MV Machine Select 2 000000 MV Machine Text 000000 MV Master C6BEAA MV Master LED Border 000000 MV Master LED Off 595922 MV Master LED On E8E8C1 MV Pan Handle 000000 PE BG DAD6C9 PE BG Dark BDB59F PE BG Very Dark 9F9373 PE Sel BG F7F7F4 PE Text 303021 SA Amp BG 000000 SA Amp Line 00C800 SA Freq BG 000000 SA Freq Line 00C800 SE BG DAD6C9 SE BG Dark BDB59F SE BG Very Dark 9F9373 SE Break Box E0B06D SE Line 000000 SE Mute Box DD816C SE Pattern Box C6BEA9 SE Sel BG F7F7F4 SE Song Position FFFF00 SE Text 303021 black 000000</div> <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("Edit the code below to change me!") .attr("y", 200) .attr("x", 120) .style("font-size", 12) .style("font-family", "monospace") var group1 = svg.append('g').classed('wonkz', true); var text_content = d3.select('div.media').text(); var text_array = text_content.split('\n') function linesplit(str){ return str.trim().split(/\s+/)}; var kr_array = text_array.map(linesplit); group1.data(kr_array); var items = group1.selectAll('g'); var textEnter = items.enter().append('g').classed('woo', true); textEnter.append('text') .text('wooo') .attr("y", function(i,j){return i * 3;}) .attr("x", 20) .style("font-size", 12) .style("font-family", "monospace") </script> </body>
https://d3js.org/d3.v4.min.js