mforando/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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>
	<!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>