Old school D3 from simpler times

All examples By author By category About

mforando

Full window Github gist

Banner Design Mock Up

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; }
    svg{overflow:visible}
  </style>
</head>

<body>
  <script>
    
    function genCharArray(charA, charZ) {
      var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
      for (; i <= j; ++i) {
          a.push(String.fromCharCode(i));
      }
      return a;
		}
    
    var alphabet = genCharArray('a','z');
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 900)
      .attr("height", 100)
    	.style("background","rgb(0,30,60)")
		
    var data = d3.range(150).map(function(d){
      return {"letter": alphabet[(getRandomInt(0,alphabet.length-1))],
              "x":Math.random()}
    })
    console.log(data);
    
    // as x goes up, scale Y proportionally.
    var yOffsetScale = d3.scaleLinear()
    	.domain([0,1])
			.range([.1,.5]);

var fontsize = d3.scaleLinear()
    	.range([8,16])
    	.domain([0,1]);
    
    var text = svg.selectAll(".floatingtext").data(data)
   	text.enter()
      .append("text")
    .attr("class","floatingtext")
      .text((d)=>{return d.letter})
//      .attr("font-size", 12) 
      .attr("font-family", "monospace")
	    .style("fill","white")
    	.style("font-size",function(d){
      	return fontsize(Math.random()) + "px"
    	})
    	.attr("transform",(d)=>{
      	var x = d.x * 550 + 200;
        var y = yOffsetScale(d.x) * 100 * ((Math.random()<.5) ? -Math.random() : Math.random()) + 50;
      	return "translate(" + x + "," + y + ")" + "rotate(" + (Math.random()-.5)*60 + ")"})
			.style("opacity",function(d){
      	return Math.random()*.75 + .25
    	})
    
    var barminx = 750;
    var barwidth = 14;
    var barmaxx = 750 + barwidth;
    
    var bar1 = svg.append("rect")
    	.attr("x",barminx)
    	.attr("width",barwidth)
    	.attr("height",100)
    	.style("fill","none")
    	.style("stroke","none")
    
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    var numletters = [50,100,150,200,250,300,300,300,400,800]
    
    var bars = d3.range(10)
    var scaleBars = d3.scaleBand()
    	.range([750,900])
   		.domain(bars)
    .paddingInner(.35);
    
    var bardata = []
    bars.forEach(function(d,i){
      d3.range(numletters[i]).map(function(){
      bardata.push({"letter": alphabet[(getRandomInt(0,alphabet.length-1))],
              "x":(Math.random()*scaleBars.bandwidth() + scaleBars(d))});
    	})
    });
    console.log(bardata);
    var bartext = svg.selectAll(".bartext").data(bardata)
   	bartext.enter()
      .append("text")
    	.attr("class","bartext")
      .text((d)=>{return d.letter})
//      .attr("font-size", 12) 
      .attr("font-family", "monospace")
    	.style("text-anchor","middle")
    	.style("dominant-baseline","middle")
	    .style("fill","white")
    	.style("font-size",function(d){
      	return fontsize(Math.random()) + "px"
    	})
    	.attr("transform",(d)=>{
      	var x = d.x;
        var y = 100 * Math.random();
      	return "translate(" + x + "," + y + ")" + "rotate(" + (Math.random()-.5)*60 + ")"})
			.style("opacity",function(d){
      	return Math.random()*.75 + .25
    	})

</script>
</body>

https://d3js.org/d3.v4.min.js