ChavaP06

@ChavaP06·10 public vizzes

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data from a remote URL using D3 v7. It displays the file size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The primary approach uses `d3.csv()` with a promise chain, while commented-out alternatives show `fetch()` with `d3.csvParse()`. The data originates from a GitHub Gist containing CSS color values, and the page also includes an unrelated FPGrowth algorithm example.

Jul 8, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face drawn with React and SVG responds to mouse movement as the position of its single black circle tracks the cursor across the screen. The example demonstrates React state management with `useState` and `useCallback` to update the circle's `cx` and `cy` attributes on every mousemove event. Using ReactDOM to render the SVG, it shows a minimal interactive component where mouse coordinates directly drive visual output, with no D3 API calls despite the library being loaded.

Jul 8, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV data test1

This example uses D3 to load and parse a remote CSV file, displaying summary statistics about the data. It shows the file size in kilobytes, the total number of rows, and the column count. The code retrieves the CSV from a GitHub Gist using `d3.csv`, then formats the result with `d3.csvFormat` to calculate the size. The final message is rendered in an HTML `<pre>` element, with the code using D3 v7 and JavaScript's `fetch` API as an alternative approach.

Jul 8, 2021

Loading thumbnail…

Association Rule

This visualization demonstrates association rule mining, showing how transactional data can be analyzed to identify item sets and their support values. The interface displays a transaction table, item set frequencies, and calculated support percentages, along with generated association rules that express confidence levels such as "if someone buys X, they are Y% likely to buy Z." The application uses AngularJS controllers and directives (ng-app, ng-controller, ng-repeat) to manage the interactive file upload and dynamically update the tables, while relying on JavaScript for the association rule algorithm and Bootstrap theming for styling.

Jul 8, 2021

Loading thumbnail…

Fork of Rendering Data with React & D32

This example shows a radial burst visualization of CSS named colors, where each color is represented as a wedge-shaped slice of a circle. The visualization loads color data from a CSV file using D3’s `csv` utility, then processes it with `d3.pie` to compute the angles for each slice. React renders these slices as SVG `<path>` elements, using `d3.arc` to generate the path geometry and filling each slice with its corresponding hex color value from the dataset. The result is a colorful, full-circle pie chart that maps all named colors to equal-sized segments.

Jul 8, 2021

Loading thumbnail…

Loading data with react and d3

This example demonstrates how to load and display data using React and D3 utilities. It fetches a CSV file containing CSS color names and their RGB hex values, then renders each color as a horizontal bar with a fixed width and height. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous data loading, while `d3.csv` parses the remote CSV. The visualization shows a series of colored blocks, each representing a distinct color entry from the dataset.

Jul 8, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst of CSS named colors loads data from a CSV file via D3’s `csv` utility, then renders each color as a horizontal bar using React’s `useState` and `useEffect` hooks. The visualization displays every color sequentially, with each div’s background set to its `RGB hex value` and fixed dimensions. Although it imports `arc` and `pie` from D3, the current code renders simple stacked bars rather than a pie chart. The example demonstrates a minimal React-D3 integration, where D3 handles data fetching while React manages the DOM updates.

Jul 8, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a scatter plot of Auto MPG data from the UCI Machine Learning Repository, showing each car's miles per gallon versus horsepower. Points are colored by origin, sized by weight, and include tooltips revealing the vehicle name. The visualization uses the `vega-lite-api` and `vega-lite` libraries to define the encoding, while `d3.csv` loads the data and Vega-Tooltip provides interactive hover details. Rendering occurs as an SVG view that fills the browser window.

Jul 8, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML" centered on a white page with extremely large, 13em font sizing. It demonstrates a minimal web page structure using standard HTML, CSS, and JavaScript. The page includes a `<style>` block that centers the content and sets the font size, while a `<script>` tag logs "Hello JavaScript!" to the browser console. This serves as a bare-bones starter template showing how these three core web technologies combine in a single document.

Jul 8, 2021

Loading thumbnail…

Hello world

A grid of 18 cartoon faces, each with a yellow circular head, black eyes, and a curved mouth, is rendered as SVG. The faces vary in eye radius, mouth radius, and mouth width due to random values generated with `Math.random()` in React. The code uses `d3.arc` to create mouth paths and React components to compose each face.

Jul 6, 2021