luispee

@luispee·6 public vizzes

Fork of Multiline chart

A multivariable line chart tracks annual net forest conversion for six South American countries from 1990 to 2015, with each country’s trend shown as a colored path against a time-scaled x-axis and a linear y-axis ranging from the minimum value to zero. The visualization uses d3.csv to load the data, d3.nest to group rows by entity, and d3.scaleOrdinal with d3.schemeCategory10 for color assignment. Hovering a line triggers a yellow tooltip displaying the entity name, implemented via mouseover, mousemove, and mouseleave events. The chart is rendered as SVG with static axes and a legend, from data sourced in linechart.csv.

Apr 8, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading external CSV data with D3 and managing it through React state. It fetches a CSS named colors dataset via `d3.csv` and displays its file size, row count, and column count using the imported `message` function. The `useState` and `useEffect` hooks handle asynchronous data loading, showing a simple text loading message before the dataset summary appears. The rendered output is plain text within a `<pre>` element, with D3’s `csvFormat` used for size calculation.

Mar 26, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing a remote CSV file, showing basic dataset statistics such as file size, row count, and column count. It uses D3 v6’s `d3.csv` method to fetch and parse the data from a GitHub gist containing CSS named colors. The page also includes commented alternatives using the Fetch API, `async/await`, and `d3.csvParse` to illustrate different parsing approaches. The results are displayed in a large `<pre>` element, highlighting the parsed dataset’s structure.

Mar 26, 2021

Loading thumbnail…

Mouse Follower

A black circle of radius 30 follows the mouse cursor across a 960-by-500 SVG canvas. React's `useState` and `useCallback` hooks track the cursor’s client coordinates, updating the circle’s `cx` and `cy` attributes on every `mousemove` event. D3 v5 is loaded but not used in the visible logic; rendering is purely React-driven SVG.

Mar 26, 2021

Loading thumbnail…

D3 Smiley Face

A grid of smiley faces is rendered using React components, with each face composed of SVG circles for the head and eyes and a d3.arc path for the mouth. The layout shows a 6-by-3 array of faces, each generated with randomized values for stroke width, eye offsets and radii, and mouth dimensions. The code uses d3.arc from D3 v6 to compute the mouth path, while React manages the component structure and renders the SVG output.

Mar 26, 2021

Loading thumbnail…

First Approach

This visualization is a playful React application that displays a partially complete smiley face composed of basic SVG shapes. A yellow circle serves as the face, with simple black circles forming the eyes and a D3 arc path creating the mouth. Additional stray circles and lines are scattered across the canvas, highlighting experiments with coordinate positioning. The code uses React for component structure and D3's `arc` API to generate the mouth path, with all rendering handled through SVG elements within a 960-by-500 viewport.

Mar 21, 2021