xmanemran/.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 {
      width: 520px;
      height: 520px;
      background: '#b700b7'
    }
  </style>
</head>

<body>

  <svg>

  </svg>
  <script>
    console.clear();
		var rectWidth = 50;
    var height = 300;
    var item = 4;
    var data =  Array(item).fill('').map(x=>Math.random()*1000);

    data = [{
      data: 100,
      year: 2010
    },{
      data: 22,
      year: 2011
    },{
      data: 45,
      year: 2012
    },{
      data: 120,
      year: 2013
    },{
      data: 10,
      year: 2014
    }];


    var svg = d3.select('svg');

   	var xScale = d3.scaleLinear()
    	.domain(d3.extent(data, d => d.year))
    	.range([0, 500-40])

    var yScale = d3.scaleLinear()
    	.domain([0, d3.max(d3.extent(data, d=>d.data))])
    	.range([height, 0])


    var xAxis = d3.axisBottom()
    	.scale(xScale)
    	.ticks(data.length)

    var yAxis = d3.axisLeft()
    	.scale(yScale)
    	.ticks(10)


    var line = d3.line()
    	.x(d => xScale(d.year) + 40)
    	.y(d => yScale(d.data) + 22)
    	.curve(d3.curveBundle);

    var area = d3.area()
    	.x(function(d) { console.log(d); return xAxis(d.year); })
    	.y0(500)
    	.y1(function(d) { return yAxis(d.data); });


//     svg.append('path')
//     	.attr('d', line(data))
//     	.attr('fill', 'none')
//     	.attr('stroke', 'red')

    svg.append("path")
    	.attr('d', area(data));

    svg.append('g')
    		.attr('transform', 'translate(40, 320)')
      	.call(xAxis)

    svg.append('g')
    		.attr('transform', 'translate(40, 20)')
      	.call(yAxis)

  </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 {
	width: 520px;
	height: 520px;
	background: '#b700b7'
	}
	</style>
	</head>

	<body>

	<svg>

	</svg>
	<script>
	console.clear();
	var rectWidth = 50;
	var height = 300;
	var item = 4;
	var data = Array(item).fill('').map(x=>Math.random()*1000);

	data = [{
	data: 100,
	year: 2010
	},{
	data: 22,
	year: 2011
	},{
	data: 45,
	year: 2012
	},{
	data: 120,
	year: 2013
	},{
	data: 10,
	year: 2014
	}];


	var svg = d3.select('svg');

	var xScale = d3.scaleLinear()
	.domain(d3.extent(data, d => d.year))
	.range([0, 500-40])

	var yScale = d3.scaleLinear()
	.domain([0, d3.max(d3.extent(data, d=>d.data))])
	.range([height, 0])


	var xAxis = d3.axisBottom()
	.scale(xScale)
	.ticks(data.length)

	var yAxis = d3.axisLeft()
	.scale(yScale)
	.ticks(10)



	var line = d3.line()
	.x(d => xScale(d.year) + 40)
	.y(d => yScale(d.data) + 22)
	.curve(d3.curveBundle);

	var area = d3.area()
	.x(function(d) { console.log(d); return xAxis(d.year); })
	.y0(500)
	.y1(function(d) { return yAxis(d.data); });


	// svg.append('path')
	// .attr('d', line(data))
	// .attr('fill', 'none')
	// .attr('stroke', 'red')

	svg.append("path")
	.attr('d', area(data));

	svg.append('g')
	.attr('transform', 'translate(40, 320)')
	.call(xAxis)

	svg.append('g')
	.attr('transform', 'translate(40, 20)')
	.call(yAxis)

	</script>
	</body>