HuldahMerlinKolli

React App

This interactive React app searches YouTube channels and visualizes the usage and views of video tags. An SVG scatterplot plots each tag's total view count against how often it was used, with colored circles representing individual tags. The app uses the YouTube Data API v3 to fetch channel data, and the D3 library for data parsing, scaling, and axis generation.

May 12, 2023

Untitled

This interactive scatterplot visualizes YouTube channel tag data, plotting the number of views per tag against how frequently each tag is used. The React application lets users search for a channel via the YouTube Data API v3, then aggregates tag statistics from the returned video items. Rendered as SVG circles with randomized colors, the visualization uses D3 scales, axes, and formatting functions. The code imports React hooks, D3 utilities, and custom axis and mark components to display the relationship between tag popularity and usage frequency.

May 12, 2023

Untitled

This example visualizes YouTube channel growth by plotting monthly total view and like counts as two overlaid line charts, with time on the x-axis and counts on the y-axis. It uses React with useState and useEffect for state management, d3-scaleTime, d3-scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render the SVG chart. The data comes from the YouTube Data API v3 via GoogleLogin authentication, fetching up to 50 videos for the channel. The code groups videos by month using d3.timeMonth and sums counts with d3.sum.

May 9, 2023

interaction_3

A circle follows the mouse cursor across an SVG canvas, changing its fill color randomly with every mouse movement. The React component tracks the mouse position using the `useState` and `useCallback` hooks, updating the circle's `cx` and `cy` attributes on each `onMouseMove` event. A `getRandomColor` function selects from a fixed array of six colors, and the ReactDOM render method updates the circle's fill property. The visualization demonstrates a simple interactive data-less example built with React 16.9.0, rendering directly to SVG.

mouse follower

A yellow circle follows the mouse cursor across a blank 960 by 500 SVG canvas. As the pointer moves, the circle’s fill color randomly changes among red, green, blue, yellow, orange, and purple. The React application uses the `useState` hook to track mouse coordinates and a color, with an `onMouseMove` event handler updating both state values. The circle is rendered as an SVG `<circle>` element with a radius of 30 pixels.

geo_1

This visualization displays a world map with clearly defined country boundaries, using a natural Earth projection to present the full globe with graticules. The map is rendered as SVG through React, with d3.geoNaturalEarth1 and d3.geoPath handling the projection and path generation. Country borders are drawn from the World Atlas TopoJSON dataset, using topojson.feature and topojson.mesh to extract land polygons and interior boundaries. The teal landmasses against a light sphere background create a polished, minimal aesthetic.

Fork of viz_9

This example shows a chocolate selector interface built with React, displaying a dropdown menu with six chocolate brands and updating a selected value label. The app uses the React `useState` hook to manage the currently chosen option, passing it as a prop to a reusable `Dropdown` component. ReactDOM renders the component tree into the root div, while a label and `<select>` element provide the interactive UI. The options are hardcoded in an array, and the initial selection is set to "cadbuary". The code relies on React 16.9 and vanilla JavaScript, with no external data sources or visualization libraries.

viz_8

This example demonstrates a simple React interface for selecting a chocolate brand from a dropdown menu. It features a list of six candy options, with a label prompting the user to choose. The selection state is managed using React’s `useState` hook, and the chosen value is logged to the console. The custom `Dropdown` component renders a native HTML `<select>` element, handling the `onChange` event to update the state. The interface is built with React 16.9.0 and the `ReactDOM.render` method, displaying large, readable text for interaction.

viz

This example demonstrates a pet-selection interface with a large, interactive dropdown menu. It shows how React manages state and updates the UI when a user chooses an option. The app uses the React `useState` hook to track the selected value and renders a custom `Dropdown` component, which builds a native `<select>` element. The code loads React and ReactDOM from a CDN, and the styling enlarges the dropdown to make the interaction visually prominent. Data consists of a hardcoded list of pet options, with the initial selection set to "hamster".

viz_6

This interactive line chart visualizes daily Brent oil prices over time, mapping dates to the x-axis and prices to the y-axis. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axis scaling, with `line()` and `curveNatural` from D3 to create a smooth path through the data points. The SVG rendering includes custom axis components (`AxisBottom`, `AxisLeft`) and loads data from a CSV file via the `csv` function, with styles defined in Poppins font and a teal color scheme.

viz_4

This scatter plot visualizes Brent crude oil prices over time, plotting date on the x-axis and price on the y-axis using a linear scale for both dimensions. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.extent` to compute domains, with SVG circles rendered via React components for the data marks. The code loads data from a CSV file of daily oil prices, formats tick labels using `d3.format`, and includes axis labels for “date” and “price.”

viz_2

This visualization displays the top 10 most populous countries as a bar chart, though it lacks axes and labels, making the data difficult to interpret. The bars are rendered as SVG rectangles using React’s declarative component structure, with D3’s `scaleBand` and `scaleLinear` handling the positional and length scaling. The dataset is loaded asynchronously via D3’s `csv` from a remote URL, and the chart updates once the data arrives. The code uses D3 v5 and React 16.9, with the visualization outputting directly to an SVG canvas.

viz_1

This example visualizes CSS named colors as a radial burst of pie slices, with each slice filled using its corresponding RGB hex value. The application loads color data from a CSV file using D3’s `csv` utility, then processes it with `d3.pie` and renders the resulting arcs as SVG paths via React. The chart uses `arc()` with an outer radius equal to the full width, centered on an SVG group, while a loading state displays until the asynchronous data fetch completes.

data_2.zip

This example loads a small dataset containing CSS named colors and displays a text summary of its contents. The program uses D3's `csv` utility to fetch and parse the data from a remote URL, then leverages React state to store the result. Once loaded, a custom message function computes and displays the file size in kilobytes, the row count, and the column count using `d3.csvFormat` to calculate byte length. The interface presents this information as large, simple text, with a loading message shown while the data is being fetched.

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3 v5. It displays a summary of the parsed dataset, showing the file size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv` to fetch and parse the data asynchronously, then calls `d3.csvFormat` to calculate the data size. The results are rendered into a preformatted HTML element with large text styling, sourced from a GitHub gist containing named CSS colors.

Loading and parsing CSV data

This example demonstrates how to fetch and parse CSV data in a React visualization context. The code uses the browser’s built-in `fetch` API within an asynchronous function to retrieve a remote CSV file containing CSS named colors from a GitHub gist, then logs the raw text to the console. It highlights the initial step of loading external data before any parsing or visualization occurs, relying on plain JavaScript promises rather than a dedicated library like D3.