T

TheOutstandingDinosaur

@jimmypwnage·17 public vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. Data points are colored by species using d3.scaleOrdinal, with a color legend that highlights a selected species and fades others via hover interactions. The visualization is built with React and D3 v7, rendering SVG marks through reusable axis and legend components, while data loading uses D3’s csv parser with type coercion in a custom useData hook.

Loading thumbnail…

Menus with React

This example demonstrates a pet selector using a dropdown menu built with React. The interface presents three animal options—dog, cat, and hamster—with a default selection of hamster. The `Dropdown` component manages the select element and triggers state updates through `onSelectedValueChange`. The app uses React's `useState` hook to track the selected value and relies on ReactDOM for rendering into the root element, displaying the chosen pet via console logging.

Loading thumbnail…

Menus with React

This example shows a React application that renders a simple "Hello" message inside a browser page. The code uses React 16.9.0’s `ReactDOM.render` to mount a functional component onto a `<div id="root">` element. The rendering approach relies on React’s virtual DOM to manage the UI, while the `index.html` includes CDN-loaded React and ReactDOM scripts alongside a bundled `bundle.js` file. No D3 or other data-visualization libraries are employed; the demo focuses purely on React’s component-based structure.

Loading thumbnail…

World Map

A world map uses D3.js’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, graticules, and country borders from TopoJSON data loaded via the `json` method. React manages the application state through a custom `useData` hook, which fetches and processes the world-atlas countries dataset. The SVG output displays countries in teal with red interior boundaries over a gray sphere, while graticule lines add spatial reference. The visualization adapts to the browser window size.

Loading thumbnail…

World Map

A line chart shows temperature readings from San Francisco over one week, plotting timestamp against temperature with connected points and labeled axes. Data loads asynchronously from a CSV file via a custom `useData` hook built on `d3.csv`. React renders SVG elements including `d3.scaleTime` and `d3.scaleLinear` scales, while the `Marks` component draws the natural curve path using `d3.line` with `curveNatural` and adds circles for each data point.

Loading thumbnail…

Line Plot

This line plot visualizes temperature trends over time for a week in San Francisco, using data loaded via D3's `csv` from a GitHub gist. The React application renders an SVG chart with smooth lines created through `line` and `curveNatural`, alongside circular markers for individual data points. Axes are generated using `scaleTime` and `scaleLinear`, with tick labels formatted via `timeFormat`. The chart is styled with custom CSS, including colored strokes and a unique Playwrite font.

Loading thumbnail…

Line Plot

This line plot displays the Iris dataset, plotting petal length against sepal width with circular marks. The visualization uses D3.js v7 scales to map data ranges to pixel coordinates and React components to render SVG elements. Axes are generated with tick marks and formatted labels, while data points are drawn as circles with a fixed radius. The code loads CSV data asynchronously and updates the chart once the data arrives.

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between petal length and sepal width in the Iris dataset. The visualization renders as an SVG, with the data loaded asynchronously via `d3.csv` and parsed using a custom row-mapping function. Axes are constructed with `d3.scaleLinear`, using `.domain()`, `.range()`, and `.nice()` to establish the scale. The React application manages state transitions, displaying a "Loading..." message until the dataset arrives, then drawing each point as a circle element with its horizontal and vertical positions mapped through the corresponding scales.

Loading thumbnail…

Bar Chart

A horizontal bar chart displays the top 10 countries by 2020 population from a UN dataset, loaded via D3’s `csv` and rendered as SVG. The React app uses `scaleBand` for the categorical y-axis and `scaleLinear` for numeric x-axis, with custom `AxisBottom`, `AxisLeft`, and `Marks` components. Population values are formatted in billions using `format('.2s')`, and rectangular marks are colored teal against a minimal grid.

Loading thumbnail…

Importing Data and Pie Chart

This example demonstrates how to load a CSV dataset with D3 and render it as a pie chart in a React application. The chart visualizes the distribution of named CSS colors, using each row as a slice of equal size. The App component fetches the data with the `csv` function from d3-fetch, stores it in React state via the `useState` and `useEffect` hooks, and then maps the parsed rows to SVG paths using the `pie` and `arc` generators from d3-shape. The fill color of each wedge is taken directly from the `RGB hex value` column, creating a full spectrum of hues around the circle.

Loading thumbnail…

Visualizing CSV Data Ep 20

This example demonstrates loading and parsing a CSV file with D3 v7, displaying the number of rows and columns from the dataset. The code fetches a CSV of CSS named colors from a GitHub gist and uses `d3.csv()` to parse the remote data asynchronously. The results are rendered into a `<pre>` element using large typography. It also includes commented-out alternatives using `fetch()` with `d3.csvParse()` to show different parsing approaches. The visualization is minimal, focusing purely on the data loading process rather than graphical representation.

Loading thumbnail…

Mouse Follower with data

This example demonstrates loading a CSV dataset with D3 and displaying the loading status through a React component. It shows how D3’s `csv` function fetches data from a remote URL containing CSS color names, while React’s `useState` and `useEffect` hooks manage the asynchronous state. The visualization renders a text message as an SVG element, displaying the number of rows and columns once loaded, updating from "loading..." as data arrives. The project combines React 16.9, D3 v7, and uses a plain HTML pre tag for text output rather than a chart.

Loading thumbnail…

Import and Export Ep 13

This example demonstrates loading and parsing a CSV file using D3 v7, displaying the dataset’s row and column counts in large text. It fetches a remote CSV of named CSS colors via `d3.csv`, which returns parsed data with a `length` and `columns` property. The page also includes commented-out alternatives using the Fetch API and `d3.csvParse` for manual text handling, though the active path relies solely on `d3.csv`. The rendered output is a simple `pre` element updated via `textContent`, with no visualization beyond the numeric summary.

Loading thumbnail…

Mouse Follower

A single gray circle tracks the user's cursor across the full browser window, moving smoothly to reflect the mouse's current x and y coordinates. Built with React hooks (`useState` and `useCallback`), the application listens for `onMouseMove` events on an SVG element and updates the circle's `cx` and `cy` attributes. The rendering is handled entirely through React's virtual DOM and SVG, with no external data sources or animation libraries involved.

Loading thumbnail…

Hello LOL

A grid of 18 randomly generated smiley faces fills the screen, each rendered as an SVG group translated to the center of a 160 by 160 viewport. React components compose the face’s parts: a yellow circle with a black stroke, two eyes offset horizontally, and a mouth drawn as a d3 arc path. The code uses `range` from d3 to create the multiplication array, and each face’s eye radius, mouth width, and mouth radius vary via `Math.random`, producing distinct expressions.

Loading thumbnail…

Is this true

This example presents a single HTML page with an embedded SVG graphic labeled “Fork Hello HTML.” The visualization displays a basic circle element with a fixed radius of 100 pixels, rendered directly through the inline SVG markup. The page uses no external JavaScript libraries or data files; it relies solely on static SVG syntax within the body of the HTML document. A linked YouTube video accompanies the page, though its connection to the graphic is not demonstrated by the code. The rendering approach is purely declarative, with no dynamic interaction or animation.

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the basic structure of a VizHub V3 project, serving as a minimal "Hello World" template. It shows how the exported `main` function receives a `container` DIV and writes directly to its `innerHTML` to render styled text. The code highlights the runtime’s hot reloading feature, where holding Alt and dragging a numeric value such as `fontSize` updates the visualization in real time. This serves as a foundation for building interactive data visualizations within the VizHub environment.