vvs1680

@vvs1680·13 public vizzes

Char Bars with React & D3

This example shows a bar chart of the top 10 countries by projected 2020 population, loaded from a CSV file via `d3.csv`, with bars rendered as SVG rectangles from React components. D3's `scaleBand` and `scaleLinear` map country names and population values to screen positions, while the `max` utility finds the domain ceiling. The visualization uses React’s `useState` and `useEffect` hooks to fetch and store the data asynchronously, displaying a "Loading..." placeholder until the CSV arrives. React’s DOM bindings and D3’s scaling utilities combine to produce a clean, horizontally-oriented comparison chart.

Mar 3, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and vehicle origin as color, with point size reflecting weight. It uses the Vega-Lite API to declare the chart specification programmatically, registering it with Vega and Vega-Lite for rendering in SVG. The code also imports the dataset via d3.csv, applies custom axis and label styling through a config object, and enables interactive tooltips using the vega-tooltip Handler. The visualization auto-fits to the browser window dimensions.

Mar 2, 2021

Loading thumbnail…

Loading Data in React

This example demonstrates how to load and display CSV data within a React application. It shows the number of rows and columns from a remote dataset of CSS named colors, updated asynchronously after the data arrives. The code uses React hooks (`useState`, `useEffect`) to manage the loading state and the `d3.csv` function to fetch and parse the data. When the data loads, the component renders the row and column counts as text in a large font, with the SVG rendering approach reserved for the commented-out smiley face markup.

Mar 2, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that loads a CSV dataset of CSS named colors using D3.js. The page displays “Hello HTML” in large text while the CSV data is fetched asynchronously from a GitHub gist. It logs the total number of data rows to the browser console. The code uses `d3.csv()` to parse the remote CSV file, showing a basic data-loading pattern with a Promise-based callback.

Mar 2, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A React application renders a full-screen SVG that displays a single black-outlined circle following the mouse cursor. The circle’s position updates dynamically via React’s `useState` and `useCallback` hooks, which capture `event.clientX` and `event.clientY` from the SVG’s `onMouseMove` handler. Built with React 16.9 and rendered through `ReactDOM.render`, the visualization uses SVG elements to draw the circle and relies on the browser window dimensions for its initial sizing.

Mar 1, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a minimal, full-window React component that renders a single SVG circle centered at the top-left corner, with its position and radius defined by the constants `eyeOffsetX`, `eyeOffsetY`, and `eyeRadius`. The SVG’s `onMouseMove` handler logs each mouse event to the console, though it does not visually react to the cursor. The code imports React and ReactDOM, uses the production UMD builds from unpkg, and renders into a `#root` div. Despite the title referencing a smiley face, only the one circle is drawn, with no additional facial elements.

Mar 1, 2021

Loading thumbnail…

Fork of React Starter

This example shows a yellow circle with a black outline representing a mouth, rendered as a static SVG. The code uses React to create the SVG elements and leverages the `d3.arc()` API to generate the mouth’s path, which forms a semicircular arc. Rendered within a 960×500 viewport, the circle is centered using calculated coordinates, with the arc’s inner and outer radii set to 90 and 100. The visualization relies on D3 v6 for arc generation and React for component structure.

Feb 27, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML" at a massive 13em font size, centered on the page. It uses plain HTML and CSS for styling, along with JavaScript that imports React and logs the React object to the console. The page loads React and ReactDOM from unpkg CDN links in the head, then references a separate `bundle.js` script for the React code. The visualization demonstrates a minimal setup for integrating React with static HTML.

Feb 27, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a single large circle rendered at the center of an SVG canvas, creating a basic static visual. The circle is defined with a radius of 200 pixels and positioned at the midpoint of a 960 by 500 coordinate space. The display relies entirely on native SVG elements within the HTML markup, using no JavaScript or external data sources. The result is a minimal demonstration of how SVG shapes can be placed and styled directly in an HTML document.

Feb 26, 2021

Loading thumbnail…

Fork of React Starter

This example renders a simple React application that displays the text message “Hi React!!” centered on the page. The app uses React and ReactDOM to mount a single component into the `#root` div, with the message imported from a separate module. The text is styled with a large font size and center alignment using CSS. It demonstrates the basic structure of a React project, including component definition, module imports, and the `ReactDOM.render` API.

Feb 22, 2021

Loading thumbnail…

React Starter

This example demonstrates a simple password visibility toggle in a React form. It shows how a checkbox toggles an input field between “password” and “text” types using the `useState` hook and the component-level `showPwd` state. The React 16.13.1 UMD builds are loaded from unpkg, with the app rendered via `ReactDOM.render` into a root div, and the toggle logic handled by the checkbox’s `onClick` event calling `setShowPwd`.

Nov 27, 2020

Loading thumbnail…

HTML Starter

This example shows a simple yellow face drawn on an SVG canvas, with a large circle for the head and two smaller black circles for eyes. Using D3 v6 and React, the code selects the SVG element and appends circles with attributes for position, radius, and fill color. The dimensions are read from the SVG’s width and height attributes, and styling is applied via an external CSS file.

Oct 12, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello D3” in large, centered type on a blank HTML page. It uses a minimal HTML document structure with inline CSS styling to control font size and alignment. The page includes a script tag that logs “Hello JavaScript!” to the browser’s developer console via `console.log`. No external libraries or data sources are used, serving as a bare-bones starting point for HTML-based projects.

Oct 12, 2020