faithlum

@faithlum·4 public vizzes

Loading Data with React & D3

This example demonstrates a simple interactive visualization built with React and D3, where a circle follows the user’s mouse movement within an SVG canvas. The app initializes the circle at the center of a 960 by 500 pixel viewport, then updates its position on every mouse move using React’s `useState` and `useCallback` hooks. The SVG’s `onMouseMove` event handler captures the cursor’s client coordinates and passes them to the circle’s `cx` and `cy` attributes, rendering the result via `ReactDOM.render`. No external data loading is involved; the focus is on state-driven, real-time updates.

Mar 29, 2023

Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays temperature trends over time using a stylized line chart, plotting data from the Data Canvas Sense Your City Dataset (specifically week temperature data for San Francisco). The chart uses a smooth natural curve to connect data points, rendered as SVG paths via React components. The code leverages d3.scaleTime and d3.scaleLinear for axes, d3.line with curveNatural for the path, and custom AxisBottom and AxisLeft components for tick generation. The visualization omits individual data point circles, focusing solely on the curved temperature line.

Mar 28, 2023

Loading thumbnail…

Fork of D3.js Line Chart

A line chart visualizes customer growth over time using data from the `data.csv` CSV file, loaded with `d3.csv` and parsed into numeric customer values. The chart renders as an SVG using D3 v7, with a `scaleBand` on the x-axis for discrete year categories and a `scaleLinear` on the y-axis for customer counts. It draws the line as a single SVG `path` via `d3.line`, offset by half the band width, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The static example is a fork of a reusable chart pattern, embedding styling via external CSS.

Mar 27, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a smiley face as an SVG graphic using React and D3. It shows a yellow circle with black stroke, two eyes, and a mouth formed by an arc. The code uses React components to structure the SVG elements, and D3’s `arc()` function to define the mouth path based on inner/outer radii and start/end angles. Positions and sizes are computed from constant offsets, with the face centered at 480,250 in a 960×500 viewport.

Mar 18, 2023