siukalov/.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; }
  </style>
</head>

<body>
  <div class="d3-container"></div>

  <script>

    function translate(x, y) {
      return `translate(${x}, ${y})`;
    }

    const margin = {top: 30, right: 30, bottom: 30, left: 30};
    const container = {width: 600, height: 400};
    const content = {
      width: container.width - margin.left - margin.right,
      height: container.height - margin.top - margin.bottom
      };

    const svg = d3.select(".d3-container")
    	.append("svg")
    		.attr("width", container.width)
    		.attr("height", container.height)
    		.style("background-color", "#f8f9fa");

    const chart = svg.append("g")
    	.attr("transform", translate(margin.left, margin.top));


    const data = [{x:10, y:20}, {x:40, y:90}, {x:80, y:50}];

    const scaleX = d3.scaleLinear()
      .domain([0, 100])
      .range([0, content.width]);

    chart.append('g')
      .attr("transform", `translate(0, ${content.height})`)
      .call(d3.axisBottom(scaleX));

    const scaleY = d3.scaleLinear()
      .domain([0, 100])
      .range([content.height, 0]);

    chart.append('g')
      .call(d3.axisLeft(scaleY));

    chart
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", d => scaleX(d.x))
      .attr("cy", d => scaleY(d.y))
      .attr("r", 7);


  </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; }
	</style>
	</head>

	<body>
	<div class="d3-container"></div>

	<script>

	function translate(x, y) {
	return `translate(${x}, ${y})`;
	}

	const margin = {top: 30, right: 30, bottom: 30, left: 30};
	const container = {width: 600, height: 400};
	const content = {
	width: container.width - margin.left - margin.right,
	height: container.height - margin.top - margin.bottom
	};

	const svg = d3.select(".d3-container")
	.append("svg")
	.attr("width", container.width)
	.attr("height", container.height)
	.style("background-color", "#f8f9fa");

	const chart = svg.append("g")
	.attr("transform", translate(margin.left, margin.top));


	const data = [{x:10, y:20}, {x:40, y:90}, {x:80, y:50}];

	const scaleX = d3.scaleLinear()
	.domain([0, 100])
	.range([0, content.width]);

	chart.append('g')
	.attr("transform", `translate(0, ${content.height})`)
	.call(d3.axisBottom(scaleX));

	const scaleY = d3.scaleLinear()
	.domain([0, 100])
	.range([content.height, 0]);

	chart.append('g')
	.call(d3.axisLeft(scaleY));

	chart
	.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", d => scaleX(d.x))
	.attr("cy", d => scaleY(d.y))
	.attr("r", 7);


	</script>
	</body>