shapak26

@shapak26·8 public vizzes

Load data with react & D3

This example demonstrates loading a remote CSV dataset and displaying its summary statistics using React and D3. The React component uses the `useState` and `useEffect` hooks to fetch color data from a GitHub gist via `d3.csv`, then renders a headline showing the file size, row count, and column count once loaded. A yellow smiley face with eyes and a mouth is drawn as static SVG markup, though it is commented out in the HTML. The visualization updates from a "loading" message to the data summary asynchronously.

Nov 14, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying summary statistics about the dataset. The code fetches a CSV file containing CSS named colors and calculates the file size in kilobytes, the number of rows, and the number of columns. It primarily uses `d3.csv` with a promise chain, while commented-out alternatives show the same task using `fetch`, `async`/`await`, and `d3.csvParse`. The results are rendered as large text inside a `<pre>` element, with the D3 library loaded via a CDN.

Nov 7, 2021

Loading thumbnail…

circle that you can move

A yellow circle, acting as a cursor, moves across a fixed 960-by-500 SVG canvas, following the mouse position via the `onMouseMove` event. The React component uses `useState` to track `clientX` and `clientY` coordinates, updating a circle's `cx` and `cy` attributes. The example demonstrates a simple interactive SVG rendering with React's state management and event handling.

Nov 7, 2021

Loading thumbnail…

100 days of Learning D3.js #2 React Smily

A React component renders a static smiley face as an SVG graphic. The face consists of a yellow circle with a black stroke for the head, positioned at the center of a 960 by 500 viewport, and two smaller black circles for eyes. The example demonstrates combining React’s declarative JSX syntax with SVG elements, using inline attributes for coordinates and styling, without any D3.js code or data binding. It serves as a minimal starter for integrating SVG drawing within a React application.

Oct 30, 2021

Loading thumbnail…

100 days of Learning D3.js #2 Hello React

A React-based smiley face rendered as SVG, with the entire visualization driven by React components rather than D3's DOM manipulation. The code uses React 16.9 to render circles for the face, eyes, and mouth, with coordinates computed from window dimensions. It demonstrates integrating D3-style visualization concepts with React's declarative JSX structure.

Oct 30, 2021

Loading thumbnail…

100 days of Learning D3.js #1 Hello HTML

This example shows a simple SVG face composed of three circles: a large yellow circle for the head and two smaller black circles for eyes. It demonstrates the basic structure of an HTML page with inline SVG elements, setting the stage for learning D3.js. The code uses plain SVG shapes and attributes like `cx`, `cy`, `r`, `fill`, and `stroke-width`, rendered directly in the browser at a fixed 960 by 500 pixel viewport. It does not yet employ any D3.js functions, serving as a first hello-world step in a 100-day learning series.

Oct 30, 2021

Loading thumbnail…

100 days of Learning D3.js #1 Hello HTML

A bare-bones HTML page marks the first step in a 100-day D3.js learning series. The example demonstrates the foundational structure of a web document, containing only a title and an empty body element. No D3.js code or data visualization is yet present; instead, the focus is on establishing the minimal HTML scaffolding that future lessons will build upon. The accompanying README embeds a YouTube video tutorial, providing context for the lesson.

Oct 30, 2021

Loading thumbnail…

100 days of Learning D3.js

This example showcases a 100-day learning journey of D3.js through a minimalist HTML page. It presents a blank body, serving as a canvas for the author’s evolving D3 visualizations over three months. The embedded YouTube video, accessible via an iframe, demonstrates the learning process and likely highlights the cumulative output, although the page itself does not render any charts. The code relies solely on standard HTML and iframe integration, with no explicit D3 APIs or data sources present in the provided files. It functions as a documentation and presentation hub rather than an interactive visualization.

Oct 30, 2021