Merge branch 'frontendstudygroup:master' into master

Author: Priyami

src/components/Api/GitApi.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+import Bubblechart from "../Resources/Bubblechart";
+
+const GitApi = () => {
+  
+  const [contributor, setContributor] = useState([]);
+
+  useEffect(() => {
+    const url = "https://api.github.com/repos/frontendstudygroup/frontendstudygroup.github.io/contributors";
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch(url);
+        const json = await response.json();
+        setContributor(json)
+
+      } catch (error) {
+        console.log("error", error);
+      }
+    };
+
+    fetchData();
+
+}, []);
+
+return (
+
+  <div>
+    
+    <Bubblechart data = {contributor}></Bubblechart>
+    
+  </div>
+);
+};
+
+
+export default GitApi;

src/components/Resources/Bubblechart.css

@@ -0,0 +1,21 @@
+text {
+    font: 16px sans-serif;
+    fill: #fff;
+    transition: all 0.3s;
+  }
+  
+  .label {
+    fill: #000;
+  }
+  
+  .chart {
+    width: 1500px;
+    height: 1500px;
+  }
+  
+  .chart-svg {
+    width: 100%;
+    height: 100%;
+  }
+  
+  

src/components/Resources/Bubblechart.js

@@ -0,0 +1,69 @@
+import { React } from 'react';
+import * as d3 from 'd3';
+import "./Bubblechart.css";
+
+
+const Bubblechart = (aData) => {
+  let jsonToDisplay = { "children":[...aData.data] };
+  var diameter = 1000,
+    color = d3.scaleOrdinal(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]);
+  var bubble = d3.pack()
+    .size([diameter, diameter])
+    .padding(2);
+
+  var margin = {
+    left: 100,
+    right: 100,
+    top: 0,
+    bottom: 0
+  }
+
+  var svg = d3.select('#chart').append('svg')
+    .attr('viewBox', '0 0 ' + (diameter + margin.right) + ' ' + diameter)
+    .attr('width', (diameter + margin.right))
+    .attr('height', diameter)
+    .attr('class', 'chart-svg');
+
+
+  var root = d3.hierarchy(jsonToDisplay)
+    .sum(function (d) { return d.id })
+    .sort(function (a, b) { return b.id - a.id });
+
+
+  bubble(root);
+
+  var node = svg.selectAll('.node')
+    .data(root.children)
+    .enter()
+    .append('g').attr('class', 'node')
+    .attr('transform', function (d) { return 'translate(' + d.x + ' ' + d.y + ')'; })
+    .append('g').attr('class', 'graph');
+
+  node.append("circle")
+    .attr('r', function (d) {
+      return d.r;
+    })
+    .style("fill", function (d) {
+      return color(d);
+    });
+
+  node.append("text")
+    .attr("dy", ".3em")
+    .style("text-anchor", "middle")
+    .text(function (d) { return d.data.login})
+    .style("fill", "#ffffff");
+
+  node.append("text")
+    .attr("dy", "2em")
+    .style("text-anchor", "middle")
+    .text(function (d) { return  d.data.contributions})
+    .style("fill", "#EEEfff");
+
+
+  return (
+    <div>
+      <svg id="chart" className="chart" ></svg>
+    </div>
+  );
+}
+export default Bubblechart;

src/components/Router.js

@@ -8,6 +8,8 @@ import SingleResource from "./SingleResource/SingleResource";
 import Contact from "./ContactUs/Contact";
 import About from "./About/About";
 import TableView from  "./Resources/TableView";
+import Bubblechart from "./Resources/Bubblechart";
+import GitApi from "./Api/GitApi";
 
 
 const Router = () => (
@@ -22,6 +24,9 @@ const Router = () => (
       <Route exact path="/contact" component={Contact} />
       <Route exact path="/about" component={About} />
       <Route exact path="/TableView" component={TableView} />
+      <Route exact path="/bubblechart" component={Bubblechart} />
+      <Route exact path="/gitapi" component={GitApi} />
+
     </Switch>
     <Footer/>
   </BrowserRouter>