soo

@susuhaa·6 public vizzes

Fork of Stylized Line Chart

This example visualizes weekly temperature data from the Data Canvas Sense Your City dataset as a smooth, stylized line chart. The line uses d3.line() with curveNatural to create a curved path through time-series points, while React components render SVG axes with d3 scales (scaleTime, scaleLinear). The visualization shows temperature fluctuations over the week, with axis labels and tick marks formatted using d3.timeFormat. Data loads via d3.csv from a GitHub gist, and hover tooltips are commented out in the code.

Aug 3, 2022

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The React app tracks pointer coordinates through the SVG `onMouseMove` event handler, updating state to reposition the circle's center. Written with React and ReactDOM, it uses `useState` and `useCallback` to manage the cursor position and rerender the circle.

Aug 2, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars with no axes, using a React component that loads data via `useData` and `d3.csv`. It renders an SVG with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, drawing tick lines, labels, and rectangles. The data comes from the United Nations World Population Prospects 2019, filtered to the first ten rows. Loading state is shown with a "Loading..." message.

Jul 29, 2022

Loading thumbnail…

Fork of Axes with React & D3

This example displays a bar chart of the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. It renders an SVG using React components that manage state via `useState` and `useEffect`. The chart uses `d3.csv` to load data and `scaleBand` and `scaleLinear` to position bars, while hand-coded D3 ticks generate axis lines and labels without using `d3.axis`.

Jul 29, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a smoothed density estimate of the relationship between engine displacement and horsepower, with tooltips revealing car model names. Built with the vega-lite-api library, the visualization loads auto-mpg data from a CSV via d3.csv. The chart uses a filled, semi-transparent line mark to approximate a density plot, configured with custom axis and label styling. Vega-Lite handles rendering, while Vega-Tooltip provides interactive hover details.

Jul 29, 2022

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen cartoon faces, each with randomized proportions, is rendered with React components for the background circle, eyes, and mouth. Each face uses a d3.arc generator to draw a curved mouth path, while SVG circles and a group transform position the features. The React app maps over a d3.range array to produce the varied faces, with all values like eye offset and mouth radius generated via Math.random at render time.

Jul 26, 2022