remove console logs

holtzy · Jul 12, 2023 · da35600 · da35600
1 parent 449b1fd
commit da35600
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 45 deletions.
diff --git a/viz/DendrogramBasic/Dendrogram.tsx b/viz/DendrogramBasic/Dendrogram.tsx
@@ -1,6 +1,6 @@
-import { useMemo } from "react";
-import { Tree } from "./data";
-import * as d3 from "d3";
+import { useMemo } from 'react';
+import { Tree } from './data';
+import * as d3 from 'd3';
 
 const MARGIN = { top: 60, right: 60, bottom: 60, left: 60 };
 
@@ -14,8 +14,6 @@ export const Dendrogram = ({ width, height, data }: DendrogramProps) => {
   const boundsWidth = width - MARGIN.right - MARGIN.left;
   const boundsHeight = height - MARGIN.top - MARGIN.bottom;
 
-  console.log(width);
-
   const hierarchy = useMemo(() => {
     return d3.hierarchy(data);
   }, [data]);
@@ -29,13 +27,13 @@ export const Dendrogram = ({ width, height, data }: DendrogramProps) => {
 
   const allNodes = dendrogram.descendants().map((node) => {
     return (
-      <g key={"node" + node.id}>
+      <g key={'node' + node.id}>
         <circle
           cx={node.x}
           cy={node.y}
           r={5}
           stroke="transparent"
-          fill={"#69b3a2"}
+          fill={'#69b3a2'}
         />
         <text x={node.x} y={node.y + 25} fontSize={12} textAnchor="middle">
           {node.data.name}
@@ -50,7 +48,7 @@ export const Dendrogram = ({ width, height, data }: DendrogramProps) => {
     }
     return (
       <line
-        key={"line" + node.id}
+        key={'line' + node.id}
         fill="none"
         stroke="grey"
         x1={node.x}
@@ -67,7 +65,7 @@ export const Dendrogram = ({ width, height, data }: DendrogramProps) => {
         <g
           width={boundsWidth}
           height={boundsHeight}
-          transform={`translate(${[MARGIN.left, MARGIN.top].join(",")})`}
+          transform={`translate(${[MARGIN.left, MARGIN.top].join(',')})`}
         >
           {allNodes}
           {allEdges}

diff --git a/viz/LineChartPageViews/LineChart.tsx b/viz/LineChartPageViews/LineChart.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useRef } from "react";
-import { useSpring, animated } from "@react-spring/web";
+import { useEffect, useMemo, useRef } from 'react';
+import { useSpring, animated } from '@react-spring/web';
 import {
   axisBottom,
   axisLeft,
@@ -10,7 +10,7 @@ import {
   scaleTime,
   select,
   timeParse,
-} from "d3";
+} from 'd3';
 
 const MARGIN = { top: 30, right: 30, bottom: 50, left: 100 };
 
@@ -27,15 +27,13 @@ type LineChartProps = {
 };
 
 export const LineChart = ({ width, height, data }: LineChartProps) => {
-  console.log({ data });
-
   const axesRef = useRef(null);
   const boundsWidth = width - MARGIN.right - MARGIN.left;
   const boundsHeight = height - MARGIN.top - MARGIN.bottom;
 
   const allGroups = [...new Set(data.map((d) => d.group))];
 
-  const parseTime = timeParse("%Y-%m-%d");
+  const parseTime = timeParse('%Y-%m-%d');
   const dateDomain = extent(data.map((d) => parseTime(d.date)));
 
   const maxValue = max(data.map((d) => d.value)) || 0;
@@ -47,16 +45,16 @@ export const LineChart = ({ width, height, data }: LineChartProps) => {
   // Render the X and Y axis using d3.js, not react
   useEffect(() => {
     const svgElement = select(axesRef.current);
-    svgElement.selectAll("*").remove();
+    svgElement.selectAll('*').remove();
 
     const xAxisGenerator = axisBottom(xScale);
     svgElement
-      .append("g")
-      .attr("transform", "translate(0," + boundsHeight + ")")
+      .append('g')
+      .attr('transform', 'translate(0,' + boundsHeight + ')')
       .call(xAxisGenerator);
 
     const yAxisGenerator = axisLeft(yScale);
-    svgElement.append("g").call(yAxisGenerator);
+    svgElement.append('g').call(yAxisGenerator);
   }, [xScale, yScale, boundsHeight]);
 
   const lineBuilder = line<DataItem>()
@@ -65,7 +63,7 @@ export const LineChart = ({ width, height, data }: LineChartProps) => {
 
   const allLines = allGroups.map((selectedGroup, i) => {
     const path = lineBuilder(data.filter((d) => d.group === selectedGroup));
-    return <LineItem key={i} path={path} color={"#9a6fb0"} />;
+    return <LineItem key={i} path={path} color={'#9a6fb0'} />;
   });
 
   return (
@@ -75,7 +73,7 @@ export const LineChart = ({ width, height, data }: LineChartProps) => {
         <g
           width={boundsWidth}
           height={boundsHeight}
-          transform={`translate(${[MARGIN.left, MARGIN.top].join(",")})`}
+          transform={`translate(${[MARGIN.left, MARGIN.top].join(',')})`}
         >
           {allLines}
         </g>
@@ -84,7 +82,7 @@ export const LineChart = ({ width, height, data }: LineChartProps) => {
           width={boundsWidth}
           height={boundsHeight}
           ref={axesRef}
-          transform={`translate(${[MARGIN.left, MARGIN.top].join(",")})`}
+          transform={`translate(${[MARGIN.left, MARGIN.top].join(',')})`}
         />
       </svg>
     </div>
@@ -110,7 +108,7 @@ const LineItem = ({ path, color }: LineItemProps) => {
   return (
     <animated.path
       d={springProps.path}
-      fill={"none"}
+      fill={'none'}
       stroke={color}
       strokeWidth={2}
     />

diff --git a/viz/LineChartPageViews/LineChartPageViews.tsx b/viz/LineChartPageViews/LineChartPageViews.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
-import { LineChart } from "./LineChart";
-import { csvParse } from "d3";
+import { useEffect, useState } from 'react';
+import { LineChart } from './LineChart';
+import { csvParse } from 'd3';
 
 const BUTTONS_HEIGHT = 50;
 
@@ -10,33 +10,32 @@ type LineChartPageViewsProps = {
 };
 
 const buttonStyle = {
-  border: "1px solid #9a6fb0",
-  borderRadius: "3px",
-  padding: "4px 8px",
-  margin: "10px 2px",
+  border: '1px solid #9a6fb0',
+  borderRadius: '3px',
+  padding: '4px 8px',
+  margin: '10px 2px',
   fontSize: 14,
-  color: "#9a6fb0",
+  color: '#9a6fb0',
   opacity: 0.7,
 };
 
 export const LineChartPageViews = ({
   width,
   height,
 }: LineChartPageViewsProps) => {
-  const [selectedGroup, setSelectedGroup] = useState<"melanie" | "yan">(
-    "melanie"
+  const [selectedGroup, setSelectedGroup] = useState<'melanie' | 'yan'>(
+    'melanie'
   );
 
   const [data, setData] = useState<DataItem[]>([]);
 
   useEffect(() => {
     const fetchData = async () => {
       const response = await fetch(
-        "https://raw.githubusercontent.com/holtzy/react-graph-gallery/main/data/data_page_views.csv"
+        'https://raw.githubusercontent.com/holtzy/react-graph-gallery/main/data/data_page_views.csv'
       );
       const csvData = await response.text();
       const parsedData: DataItem[] = csvParse(csvData);
-      console.log({ parsedData });
       setData(parsedData);
     };
 

diff --git a/viz/LineChartPanning/XAxis.tsx b/viz/LineChartPanning/XAxis.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useRef } from "react";
-import * as d3 from "d3";
+import { useEffect, useRef } from 'react';
+import * as d3 from 'd3';
 
 type XAxisProps = {
   xScale: d3.ScaleTime<number, number, never>;
@@ -12,27 +12,26 @@ export const XAxis = ({ xScale, width }: XAxisProps) => {
   // Render the X and Y axis using d3.js, not react
   useEffect(() => {
     const xAxisElement = d3.select(axisRef.current);
-    xAxisElement.selectAll("*").remove();
+    xAxisElement.selectAll('*').remove();
 
     let xAxisGenerator = d3.axisBottom(xScale);
-    xAxisElement.append("g").call(xAxisGenerator);
+    xAxisElement.append('g').call(xAxisGenerator);
 
     // Define zoom behavior
-    const zoomBehavior = d3.zoom().on("zoom", handleZoom);
+    const zoomBehavior = d3.zoom().on('zoom', handleZoom);
 
     // Attach zoom behavior to the SVG
     xAxisElement.call(zoomBehavior);
 
     function handleZoom(e) {
-      console.log(e);
       const transform = e.transform;
       xScale.domain(transform.rescaleX(xScale).domain());
-      xAxisElement.select("g").call(xAxisGenerator);
+      xAxisElement.select('g').call(xAxisGenerator);
     }
 
     return () => {
       // Cleanup event listeners
-      xAxisElement.on(".zoom", null);
+      xAxisElement.on('.zoom', null);
     };
   }, [xScale]);
 

diff --git a/viz/NetworkDiagramBasicSVG/NetworkDiagram.tsx b/viz/NetworkDiagramBasicSVG/NetworkDiagram.tsx
@@ -37,8 +37,6 @@ export const NetworkDiagram = ({
       });
   }, [nodes, height, width]);
 
-  console.log({ nodes });
-
   //
   // Compute the nodes
   //