adammak137/.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; }
    .axis path,
    .axis line {
      stroke: teal;
      shape-rendering: crispEdges;
    }
    .axis text{
      font-family: Optima, Futura, sans-serif;
      font-weight: bold;
      font-size: 14px;
      fill:teal;
    }
  </style>
</head>

<body>
  <script>

	const dataArray = [ [5, 20], [480,90], [250, 50], [100, 33], [330, 95], [410, 12],
                      [475, 44], [25, 67], [85, 21], [220, 88], [600,150] ];
  const w = 500, h = 300, padding = 30;

    const canvas = d3.select("body")
                      .append("svg")
                      .attr("width", w)
                      .attr("height",h);

    const xScale = d3.scaleLinear()
    								 .domain([0, d3.max(dataArray, d => d[0])])
    								 .range([0 + padding , w - padding * 2]);
    const yScale = d3.scaleLinear()
                     .domain([0, d3.max(dataArray, d => d[1])])
                     .range([h - padding, padding]);
    const rScale = d3.scaleSqrt()
                      .domain([0, d3.max(dataArray, d => d[1])])
                      .range([0,10]);
    const xAxis = d3.axisBottom(xScale)
    								.ticks(5);
    const yAxis = d3.axisLeft(yScale)

    canvas.selectAll("circle")
    			.data(dataArray)
    			.enter()
            .append("circle")
            .attr("cx", d => xScale(d[0]))
            .attr("cy", d => yScale(d[1]))
            .attr("r", d=> rScale(d[1]) );


    canvas.selectAll("text")
      .data(dataArray)
      .enter()
      .append("text")
      .text((d) => {return d[0]  + "," + d[1]})
      .attr("x",d=> xScale(d[0]))
      .attr("y",d=> yScale(d[1]))
    	.attr("font-family", "sans-serif")
    	.attr("font-size", "11px")
    	.attr("fill", "red");

    canvas.append("g")
      .attr("class","axis")
      .call(xAxis)
    	.attr("transform", "translate(0,"+ (h-padding)+")");

    canvas.append("g")
      .attr("class","axis")
      .call(yAxis)
      .attr("transform","translate(" + padding + ",0)" );

    canvas.selectAll("circle")
    	.data(dataArray)
      .transition()
      .duration(1000)
      .on("start", function ()	{d3.select(this)
      .attr("fill","teal")
      .attr("r",3)
        });


  </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; }
	.axis path,
	.axis line {
	stroke: teal;
	shape-rendering: crispEdges;
	}
	.axis text{
	font-family: Optima, Futura, sans-serif;
	font-weight: bold;
	font-size: 14px;
	fill:teal;
	}
	</style>
	</head>

	<body>
	<script>

	const dataArray = [ [5, 20], [480,90], [250, 50], [100, 33], [330, 95], [410, 12],
	[475, 44], [25, 67], [85, 21], [220, 88], [600,150] ];
	const w = 500, h = 300, padding = 30;

	const canvas = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height",h);

	const xScale = d3.scaleLinear()
	.domain([0, d3.max(dataArray, d => d[0])])
	.range([0 + padding , w - padding * 2]);
	const yScale = d3.scaleLinear()
	.domain([0, d3.max(dataArray, d => d[1])])
	.range([h - padding, padding]);
	const rScale = d3.scaleSqrt()
	.domain([0, d3.max(dataArray, d => d[1])])
	.range([0,10]);
	const xAxis = d3.axisBottom(xScale)
	.ticks(5);
	const yAxis = d3.axisLeft(yScale)

	canvas.selectAll("circle")
	.data(dataArray)
	.enter()
	.append("circle")
	.attr("cx", d => xScale(d[0]))
	.attr("cy", d => yScale(d[1]))
	.attr("r", d=> rScale(d[1]) );



	canvas.selectAll("text")
	.data(dataArray)
	.enter()
	.append("text")
	.text((d) => {return d[0] + "," + d[1]})
	.attr("x",d=> xScale(d[0]))
	.attr("y",d=> yScale(d[1]))
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "red");

	canvas.append("g")
	.attr("class","axis")
	.call(xAxis)
	.attr("transform", "translate(0,"+ (h-padding)+")");

	canvas.append("g")
	.attr("class","axis")
	.call(yAxis)
	.attr("transform","translate(" + padding + ",0)" );

	canvas.selectAll("circle")
	.data(dataArray)
	.transition()
	.duration(1000)
	.on("start", function () {d3.select(this)
	.attr("fill","teal")
	.attr("r",3)
	});


	</script>
	</body>