lordliquid/.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>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    const width = 960;
    const height = 480;


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

    svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")

   	let plotMargins = {
      top: 30,
      bottom: 30,
      left: 150,
      right: 30,
    }

    let plotGroup = svg
    	.append('g')
    	.classed('plot', true)
    	.attr('transform', `translate(${plotMargins.left}, ${plotMargins.top})`);

    let plotWidth = width - plotMargins.left - plotMargins.right;
    let plotHeight = height - plotMargins.top - plotMargins.bottom;

   	// XAxis
    let xScale = d3.scaleTime().range([0, plotWidth]);
    let xAxis = d3.axisBottom(xScale);
    let xAxisGroup = plotGroup.append('g')
    	.classed('x', true)
    	.classed('axis', true)
    	.attr('transform', `translate(${0}, ${plotHeight})`)
    	.call(xAxis);

    let yScale = d3.scaleLinear().range([plotHeight, 0]);
    let yAxis = d3.axisLeft(yScale);
    let yAxisGroup = plotGroup.append('g')
    	.classed('y', true)
    	.classed('axis', true)
    	.call(yAxis);

    let pointsGroup = plotGroup.append('g').classed('points', true);

    d3.json('https://api.reddit.com', (error, data) => {
      if (error) {
          console.error(error);
      } else {
          console.log(data);
      }
      });
      let prepared = data.data.children.map(d => {
        return {
          date: new Date(d.data.created * 1000),
          score: d.data.score
        }
    });
		console.log(prepared);
    xScale.domain(d3.extent(prepared, d => d.date)).nice();
    xAxisGroup.call(xAxis);

    yScale.domain(d3.extent(prepared, d => d.score)).nice();
    yAxisGroup.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; }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	const width = 960;
	const height = 480;


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

	svg.append("text")
	.text("Edit the code below to change me!")
	.attr("y", 200)
	.attr("x", 120)
	.attr("font-size", 36)
	.attr("font-family", "monospace")

	let plotMargins = {
	top: 30,
	bottom: 30,
	left: 150,
	right: 30,
	}

	let plotGroup = svg
	.append('g')
	.classed('plot', true)
	.attr('transform', `translate(${plotMargins.left}, ${plotMargins.top})`);

	let plotWidth = width - plotMargins.left - plotMargins.right;
	let plotHeight = height - plotMargins.top - plotMargins.bottom;

	// XAxis
	let xScale = d3.scaleTime().range([0, plotWidth]);
	let xAxis = d3.axisBottom(xScale);
	let xAxisGroup = plotGroup.append('g')
	.classed('x', true)
	.classed('axis', true)
	.attr('transform', `translate(${0}, ${plotHeight})`)
	.call(xAxis);

	let yScale = d3.scaleLinear().range([plotHeight, 0]);
	let yAxis = d3.axisLeft(yScale);
	let yAxisGroup = plotGroup.append('g')
	.classed('y', true)
	.classed('axis', true)
	.call(yAxis);

	let pointsGroup = plotGroup.append('g').classed('points', true);

	d3.json('https://api.reddit.com', (error, data) => {
	if (error) {
	console.error(error);
	} else {
	console.log(data);
	}
	});
	let prepared = data.data.children.map(d => {
	return {
	date: new Date(d.data.created * 1000),
	score: d.data.score
	}
	});
	console.log(prepared);
	xScale.domain(d3.extent(prepared, d => d.date)).nice();
	xAxisGroup.call(xAxis);

	yScale.domain(d3.extent(prepared, d => d.score)).nice();
	yAxisGroup.call(yAxis);





	</script>
	</body>