AndriiShtoiko/.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;
    }
    .bordered {
      border: 1px solid #999
    }
    .margin-div {
      margin: 20px 0;
    }
  </style>
</head>

<body>
  <div>
  <svg id='svg1'/>
  </div>
  <div class='margin-div'/>
  <div>
  <svg id='svg2'/>
  </div>

  <script>
    let rectWidth = 100;
    let height = 400;
    let data = [100, 250, 175, 200, 120, 20];

    let svg = d3.select('#svg1')
    	.attr('height', height)
    	.attr('width', 600)
    	.attr('class', 'bordered')

    let info = svg.selectAll('rect')
    	.data(data)
      .enter()
   		.append('rect')
    //first elemnt at 0 point and next - 'index' * width
    	.attr('x', (d, i) => i * rectWidth)
    // 'y' starts on 'height' - 'data/height' = 200px point for
    // firts element
    	.attr('y', d => height - d)
    	.attr('width', rectWidth)
    	.attr('height', d => d)
    	.attr('fill', d => {
        if (d === 250) return 'green'
        return 'blue'
      })
    	.attr('stroke', '#fff')

    let min = d3.min(data);
    let max = d3.max(data);
//     console.log(min, max);
    let extent = d3.extent(data);
//     console.log(extent);

    let yScale = d3.scaleLinear()
    	.domain(extent)
    	.range([height, 0])

    let yAxis = d3.axisLeft()
    	.scale(yScale)

    let axis = svg.append('g')
    	.attr('transform', 'translate(20, 40)')
    	.call(yAxis);

//     console.log(axis.node());

// NEW LESSON *************************************************

    setTimeout(() => {
      let city = 'San Francisco';
      let width = 700;
      let height = 300;
      let margin = {
        top: 20,
        bottom: 20,
        left: 20,
        right: 20,
      };

      let svg2 = d3.select('#svg2')
      	.attr('class', 'bordered')
      	.attr('height', height)
      	.attr('width', width)
// Generate dummy data ****************
      let months = 12;
      let days;
      let data = [];
      while (months > 0) {
        days = 30;
        while(days > 0) {
          data.push({
            date: new Date('2018-' + months + '-' + days),
            [city]: Math.round(50 * Math.random())
          })
          --days
        }
        --months
      }
//       console.log(data);


// Finish Generate dummy data *********

// scalse
      let xExtent = d3.extent(data, d => d.date)
//       console.log(xExtent);
    	let xScale = d3.scaleTime()
      	.domain(xExtent)
      	.range([margin.left, width - margin.right]);

      let yExtent = d3.extent(data, d=> d[city]);
//       console.log(yExtent);
      let yScale = d3.scaleLinear()
      	.domain(yExtent)
      	.range([height - margin.bottom, margin.top])
//       console.log(yScale(25))

      let heightScale = d3.scaleLinear()
      	.domain(yExtent)
      	.range([0, height - margin.top - margin.bottom])

      let rect = svg2.selectAll('rect')
      	.data(data)
      	.enter().append('rect')
      	.attr('width', 2)
      	.attr('height', d => heightScale(d[city]))
      	.attr('x', d => xScale(d.date))
      	.attr('y', d => yScale(d[city]))
      	.attr('fill', 'blue')
      	.attr('stroke', '#fff')

      let xAxis = d3.axisBottom()
      	.scale(xScale)

      let yAxis = d3.axisLeft()
      	.scale(yScale)

      svg2.append('g')
      	.attr('transform', 'translate('+[0, height - margin.bottom]+')')
      	.call(xAxis)

      svg2.append('g')
      .attr('transform', 'translate('+[margin.left, 0]+')')
      	.call(yAxis)

		}, 500)
  </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;
	}
	.bordered {
	border: 1px solid #999
	}
	.margin-div {
	margin: 20px 0;
	}
	</style>
	</head>

	<body>
	<div>
	<svg id='svg1'/>
	</div>
	<div class='margin-div'/>
	<div>
	<svg id='svg2'/>
	</div>

	<script>
	let rectWidth = 100;
	let height = 400;
	let data = [100, 250, 175, 200, 120, 20];

	let svg = d3.select('#svg1')
	.attr('height', height)
	.attr('width', 600)
	.attr('class', 'bordered')

	let info = svg.selectAll('rect')
	.data(data)
	.enter()
	.append('rect')
	//first elemnt at 0 point and next - 'index' * width
	.attr('x', (d, i) => i * rectWidth)
	// 'y' starts on 'height' - 'data/height' = 200px point for
	// firts element
	.attr('y', d => height - d)
	.attr('width', rectWidth)
	.attr('height', d => d)
	.attr('fill', d => {
	if (d === 250) return 'green'
	return 'blue'
	})
	.attr('stroke', '#fff')

	let min = d3.min(data);
	let max = d3.max(data);
	// console.log(min, max);
	let extent = d3.extent(data);
	// console.log(extent);

	let yScale = d3.scaleLinear()
	.domain(extent)
	.range([height, 0])

	let yAxis = d3.axisLeft()
	.scale(yScale)

	let axis = svg.append('g')
	.attr('transform', 'translate(20, 40)')
	.call(yAxis);

	// console.log(axis.node());

	// NEW LESSON *************************************************

	setTimeout(() => {
	let city = 'San Francisco';
	let width = 700;
	let height = 300;
	let margin = {
	top: 20,
	bottom: 20,
	left: 20,
	right: 20,
	};

	let svg2 = d3.select('#svg2')
	.attr('class', 'bordered')
	.attr('height', height)
	.attr('width', width)
	// Generate dummy data ****************
	let months = 12;
	let days;
	let data = [];
	while (months > 0) {
	days = 30;
	while(days > 0) {
	data.push({
	date: new Date('2018-' + months + '-' + days),
	[city]: Math.round(50 * Math.random())
	})
	--days
	}
	--months
	}
	// console.log(data);


	// Finish Generate dummy data *********

	// scalse
	let xExtent = d3.extent(data, d => d.date)
	// console.log(xExtent);
	let xScale = d3.scaleTime()
	.domain(xExtent)
	.range([margin.left, width - margin.right]);

	let yExtent = d3.extent(data, d=> d[city]);
	// console.log(yExtent);
	let yScale = d3.scaleLinear()
	.domain(yExtent)
	.range([height - margin.bottom, margin.top])
	// console.log(yScale(25))

	let heightScale = d3.scaleLinear()
	.domain(yExtent)
	.range([0, height - margin.top - margin.bottom])

	let rect = svg2.selectAll('rect')
	.data(data)
	.enter().append('rect')
	.attr('width', 2)
	.attr('height', d => heightScale(d[city]))
	.attr('x', d => xScale(d.date))
	.attr('y', d => yScale(d[city]))
	.attr('fill', 'blue')
	.attr('stroke', '#fff')

	let xAxis = d3.axisBottom()
	.scale(xScale)

	let yAxis = d3.axisLeft()
	.scale(yScale)

	svg2.append('g')
	.attr('transform', 'translate('+[0, height - margin.bottom]+')')
	.call(xAxis)

	svg2.append('g')
	.attr('transform', 'translate('+[margin.left, 0]+')')
	.call(yAxis)

	}, 500)
	</script>
	</body>