GitNoise/.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; }
    rect { stroke: black; }
    text { fill: red; text-anchor: middle  }
    circle { fill: orange; stroke: steelblue; }
  </style>
</head>

<body>
  <script>

    const data = [
      { id: 0, total: 100, text: "cheese", },
      { id: 1, total: 200, text: "apple",},
      { id: 2, total: 50, text: "bread",},
      { id: 3, total: 100, text: "ginger",},
    ];

    const width = 800;
    const height = 300;
    const margin = 50;

    const scaleY = d3.scaleLinear()
    	.domain([0,200])
    	.range([margin, height - margin]);

    const scaleX = d3.scaleLinear()
    	.domain([0, data.length])
    	.range([margin, width - margin]);

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)

    svg.append("g").classed("texts", true)
    	.selectAll("text")
    	.data(data, d => d.id).enter()
    		.append("text")
        .attr("x", (d, i) => scaleX(i))
        .attr("y", scaleY.range()[1] / 2)
    		.text(d => d.text);

    svg.select("g.texts").selectAll("text")
    	.each(function() {
      	const bbox = d3.select(this).node().getBBox();
       		svg.append("circle")
          	 	.attr("cx", bbox.x + bbox.width / 2)
        			.attr("cy", bbox.y + bbox.height / 2)
       				.attr("r", 5);
    });

    setTimeout(() => {
      svg.select("g.texts").selectAll("text")
      	.transition().delay(2000).duration(2000)
        .attr("transform", function(d, i) {
      		const bbox = d3.select(this).node().getBBox();
       		return `rotate(90, ${ bbox.x + bbox.width / 2}, ${ bbox.y + bbox.height / 2})`;
     		});
    }, 0);

  </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; }
	rect { stroke: black; }
	text { fill: red; text-anchor: middle }
	circle { fill: orange; stroke: steelblue; }
	</style>
	</head>

	<body>
	<script>

	const data = [
	{ id: 0, total: 100, text: "cheese", },
	{ id: 1, total: 200, text: "apple",},
	{ id: 2, total: 50, text: "bread",},
	{ id: 3, total: 100, text: "ginger",},
	];

	const width = 800;
	const height = 300;
	const margin = 50;

	const scaleY = d3.scaleLinear()
	.domain([0,200])
	.range([margin, height - margin]);

	const scaleX = d3.scaleLinear()
	.domain([0, data.length])
	.range([margin, width - margin]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)

	svg.append("g").classed("texts", true)
	.selectAll("text")
	.data(data, d => d.id).enter()
	.append("text")
	.attr("x", (d, i) => scaleX(i))
	.attr("y", scaleY.range()[1] / 2)
	.text(d => d.text);

	svg.select("g.texts").selectAll("text")
	.each(function() {
	const bbox = d3.select(this).node().getBBox();
	svg.append("circle")
	.attr("cx", bbox.x + bbox.width / 2)
	.attr("cy", bbox.y + bbox.height / 2)
	.attr("r", 5);
	});

	setTimeout(() => {
	svg.select("g.texts").selectAll("text")
	.transition().delay(2000).duration(2000)
	.attr("transform", function(d, i) {
	const bbox = d3.select(this).node().getBBox();
	return `rotate(90, ${ bbox.x + bbox.width / 2}, ${ bbox.y + bbox.height / 2})`;
	});
	}, 0);

	</script>
	</body>