acidtone · May 5, 2022 07:01
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GitHub API with D3</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.4/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
  <style>
    .container {
      display: flex;
      align-items: center;
      justify-content: center;

      min-height: 100vh;
      margin: auto;
    }
  </style>
 </head>
 <body>
  <div class="container">
    <svg height="450" width="600"></svg>
  </div>
  <script>
    let url = 'https://api.github.com/users/acidtone/events';

    const fetchData = async function(url) {
      /* Fetch raw data from GH API*/
      const response = await fetch(url);
      const rawData = await response.json();

      /* Reduce raw array in a count of commits by day */
      const simpleData = rawData
        .filter(function(item) {
          return item.type === "PushEvent";
        })
        .map(function(item) {
          return {
            created_at: item.created_at.substr(0,10),
            type: item.type
          }
        });

      const groupedData = _.chain(simpleData)
        .groupBy('created_at')
        .value();
      
      /* Create a data array identical to the one required in the below demo code */
      let data = [];
      for (const date in groupedData) {
        data.push({
          name: date,
          value: groupedData[date].length
        })
      }

      /* The following code was taken directly from this tutorial:
          https://www.pluralsight.com/guides/guide-getting-started-with-d3
      */

      /* Original demo data */
      /*
      var data = [
        {name: "A", value: "0.08167"},
        {name: "B", value: "0.01492"},
        {name: "C", value: "0.02782"},
        {name: "D", value: "0.04253"},
        {name: "E", value: "0.12702"},
        {name: "F", value: "0.02288"},
        {name: "G", value: "0.02015"},
        {name: "H", value: "0.06094"},
        {name: "I", value: "0.06966"},
        {name: "J", value: "0.00153"},
        {name: "K", value: "0.00772"},
        {name: "L", value: "0.04025"},
        {name: "M", value: "0.02406"},
        {name: "N", value: "0.06749"},
        {name: "O", value: "0.07507"},
        {name: "P", value: "0.01929"},
        {name: "Q", value: "0.00095"},
        {name: "R", value: "0.05987"},
        {name: "S", value: "0.06327"},
        {name: "T", value: "0.09056"},
        {name: "U", value: "0.02758"},
        {name: "V", value: "0.00978"},
        {name: "W", value: "0.0236"},
        {name: "X", value: "0.0015"},
        {name: "Y", value: "0.01974"},
        {name: "Z", value: "0.00074"}
      ];
      */

      var height = 400;
      var width = 550;
      var margin = ({top: 20, right: 20, bottom: 20, left: 20});

      var x = d3.scaleBand()
        .domain(data.map(d => d.name))
        .range([margin.left, width - margin.right])
        .padding(0.1);
      var y = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.value)])
        .range([height - margin.bottom, margin.top]);

      var xAxis = g => g
        .attr("transform", `translate(0,${height - margin.bottom})`)
        .call(d3.axisBottom(x));
      var yAxis = g => g
        .attr("transform", `translate(${margin.left},0)`)
        .call(d3.axisLeft(y));

      var svg = d3.select('svg');
      var g = svg.append("g").attr("fill", "orange");

      g.selectAll("rect")
        .data(data)
        .join("rect")
        .attr("x", d => x(d.name))
        .attr("y", d => y(d.value))
        .attr("height", d => y(0) - y(d.value))
        .attr("width", x.bandwidth());

      svg.append("g").call(xAxis);

      svg.append("g").call(yAxis);

    }
    fetchData(url);
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GitHub API with D3</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.4/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
	<style>
	.container {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 100vh;
	margin: auto;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<svg height="450" width="600"></svg>
	</div>
	<script>
	let url = 'https://api.github.com/users/acidtone/events';

	const fetchData = async function(url) {
	/* Fetch raw data from GH API*/
	const response = await fetch(url);
	const rawData = await response.json();

	/* Reduce raw array in a count of commits by day */
	const simpleData = rawData
	.filter(function(item) {
	return item.type === "PushEvent";
	})
	.map(function(item) {
	return {
	created_at: item.created_at.substr(0,10),
	type: item.type
	}
	});

	const groupedData = _.chain(simpleData)
	.groupBy('created_at')
	.value();

	/* Create a data array identical to the one required in the below demo code */
	let data = [];
	for (const date in groupedData) {
	data.push({
	name: date,
	value: groupedData[date].length
	})
	}

	/* The following code was taken directly from this tutorial:
	https://www.pluralsight.com/guides/guide-getting-started-with-d3
	*/

	/* Original demo data */
	/*
	var data = [
	{name: "A", value: "0.08167"},
	{name: "B", value: "0.01492"},
	{name: "C", value: "0.02782"},
	{name: "D", value: "0.04253"},
	{name: "E", value: "0.12702"},
	{name: "F", value: "0.02288"},
	{name: "G", value: "0.02015"},
	{name: "H", value: "0.06094"},
	{name: "I", value: "0.06966"},
	{name: "J", value: "0.00153"},
	{name: "K", value: "0.00772"},
	{name: "L", value: "0.04025"},
	{name: "M", value: "0.02406"},
	{name: "N", value: "0.06749"},
	{name: "O", value: "0.07507"},
	{name: "P", value: "0.01929"},
	{name: "Q", value: "0.00095"},
	{name: "R", value: "0.05987"},
	{name: "S", value: "0.06327"},
	{name: "T", value: "0.09056"},
	{name: "U", value: "0.02758"},
	{name: "V", value: "0.00978"},
	{name: "W", value: "0.0236"},
	{name: "X", value: "0.0015"},
	{name: "Y", value: "0.01974"},
	{name: "Z", value: "0.00074"}
	];
	*/

	var height = 400;
	var width = 550;
	var margin = ({top: 20, right: 20, bottom: 20, left: 20});

	var x = d3.scaleBand()
	.domain(data.map(d => d.name))
	.range([margin.left, width - margin.right])
	.padding(0.1);
	var y = d3.scaleLinear()
	.domain([0, d3.max(data, d => d.value)])
	.range([height - margin.bottom, margin.top]);

	var xAxis = g => g
	.attr("transform", `translate(0,${height - margin.bottom})`)
	.call(d3.axisBottom(x));
	var yAxis = g => g
	.attr("transform", `translate(${margin.left},0)`)
	.call(d3.axisLeft(y));

	var svg = d3.select('svg');
	var g = svg.append("g").attr("fill", "orange");

	g.selectAll("rect")
	.data(data)
	.join("rect")
	.attr("x", d => x(d.name))
	.attr("y", d => y(d.value))
	.attr("height", d => y(0) - y(d.value))
	.attr("width", x.bandwidth());

	svg.append("g").call(xAxis);

	svg.append("g").call(yAxis);

	}
	fetchData(url);
	</script>
	</body>
	</html>