Skip to main content
Log in
N

NYY

@yni58-ni·13 public vizzes

Loading thumbnail…

Untitled

A real-time scrolling line chart displays a stream of random data points, with a new value appended each tick and the oldest discarded, creating a smooth sliding window. The visualization uses D3 v3’s `d3.svg.line` with basis interpolation and `d3.scale.linear` to map time and value ranges, while `d3.svg.axis` renders the x- and y-axes. Animated transitions with `transition.attr` and a linear easing shift the plot and axis leftward, with an SVG clipping container to hide edges. React’s `useData` hook loads CSV data, though the main simulation generates its own values.

Feb 28, 2022
Loading thumbnail…

Line Chart _ static 1.1

This line chart displays time-series data with circular markers connected by a smooth path, plotting numeric values against a linear time axis. The visualization uses React with D3 v5 scales for positioning, while SVG rendering handles the axes, grid lines, and mark elements. Data is loaded from a CSV file via the `csv` function and the chart includes formatted tick labels and hover tooltips. The styling applies a teal color scheme with a Poppins font, demonstrating a static line chart with labeled axes and responsive rendering approach.

Feb 19, 2022
Loading thumbnail…

Line chart_ static

A static line chart displays trends over time, plotting data points as circles connected by a path. The visualization uses React to render SVG elements, with D3 v5 utilities like `scaleLinear`, `extent`, and the `line` generator from `d3-shape` to map data coordinates. Axis components generate ticks and labels, while the `csv` loader fetches data from an external dataset. The chart includes axis labels and tooltips via SVG `<title>` elements, with styling applied through CSS classes.

Feb 19, 2022
Loading thumbnail…

Fork of Scatter Plot(test_data)

This fork of a scatter plot displays how a data point’s value changes over time, with a black line connecting sequential points overlaid on teal circles. It uses React to render an SVG, with axes and marks built from custom components. The code leverages d3.scaleLinear for scaling, d3.extent for domains, d3.format for tick labels, and d3.csv to load data from a remote testData.csv. The chart includes axis labels for “Time” and “Value,” and each circle shows a tooltip on hover.

Feb 19, 2022
Loading thumbnail…

Fork of Fork of Scatter Plot(test_data)

This interactive scatter plot visualizes the relationship between Time and Value from a test dataset loaded via the useData hook, which fetches CSV data using d3.csv. Built with React and rendered as SVG, the visualization uses d3.scaleLinear for both axes, with d3.extent and d3.max computing domains and d3.format applying compact tick labels. The chart includes labeled axes, gridlines styled through CSS classes, and circular marks with hover tooltips displaying formatted x-values. The code imports React hooks (useState, useEffect) and D3 v5 utilities to construct the responsive layout within fixed margins.

Jan 23, 2022
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping Time on the x-axis and Value on the y-axis for each data point. The visualization uses React and D3 v5, with `scaleLinear` for both axes and SVG circles rendered as marks. Axes are constructed with reusable `AxisBottom` and `AxisLeft` components, while the `Marks` component includes native SVG tooltips. Data is loaded asynchronously via `d3.csv` from a remote URL, and hover interactions reveal formatted tick values.

Jan 23, 2022
Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates loading a CSV dataset containing CSS named colors with D3 utilities and managing the fetched state with React hooks. The application uses `useEffect` and `useState` to asynchronously call `d3.csv`, displaying a "Loading..." message until data arrives, then rendering a placeholder via `data.map()`. The `message.js` module defines a helper that summarizes the dataset’s size in kilobytes, row count, and column count using `d3.csvFormat`. The visualization relies on React 16.9, D3 v5, and the CSV hosted in a GitHub gist.

Jan 23, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

This example renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing each car as a circle positioned by its miles per gallon and horsepower, colored by its region of origin, and sized by its weight. The visualization is constructed using the Vega-Lite API, with the `vl` object building a mark-circle encoding that maps data fields to x, y, color, and size channels. The underlying code registers Vega and Vega-Lite, fetches the data via d3’s `csv` function, and uses a custom config to style axis labels and titles.

Jan 23, 2022
Loading thumbnail…

loading and parsing CSV data

This example demonstrates loading and parsing CSV data using the Fetch API and D3’s `csvParse` method. It fetches a remote file containing CSS named colors, converts the raw text into an array of objects, and then displays the total row count as plain text on the page. The code uses an asynchronous function with `await` to handle the network request, and relies on D3’s parsing to structure the tabular data for further use.

Jan 23, 2022
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of fetching and parsing external CSV data using the browser's native Fetch API. It loads a remote CSV file containing CSS named colors from a GitHub gist URL and logs the raw response object to the console. The code creates a promise with `fetch(url)` and chains a `.then()` callback to inspect the response, though it does not yet parse the CSV content or render any visualization. The example serves as a foundational template for handling asynchronous data loading in web-based visualization projects.

Jan 12, 2022
Loading thumbnail…

smiley face final

This example shows a simple, yellow smiley face centered in an SVG viewport. It is built with React components, each rendering a specific part of the face: a background circle, two eyes, and a mouth created using the d3.arc function from D3 v5. The FaceContainer wraps all elements and applies a group translation to center the face. All shapes are drawn as SVG primitives, with styling applied via JSX attributes. The code uses ReactDOM to render the App component into the page’s root element.

Jan 12, 2022
Loading thumbnail…

smiley face

This example shows a simple, stylized smiley face rendered as an SVG graphic using React components. The face consists of a yellow circular background with a black stroke, two black eye circles positioned symmetrically, and a curved mouth created with a D3 arc generator. The code imports `arc` from D3 v5 to define the mouth’s path, while React components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` assemble the visual elements. All shapes are drawn declaratively with SVG elements, and the face is centered within a 960 by 500 pixel viewport.

Jan 12, 2022
Loading thumbnail…

Hello HTML

A minimal HTML page demonstrates the simplest possible web page structure, containing only a document type declaration, an HTML root element with a head section, and a title tag reading “Hello HTML.” The body is intentionally left empty, showing that no visible content or scripts are required for a valid page. The example uses plain HTML without any libraries, frameworks, or JavaScript APIs, relying solely on the browser’s built-in parsing of the markup. It serves as a baseline starting point for understanding the fundamental elements of web documents before adding visualization components.

Jan 10, 2022