Tarul170720

@Tarul170720·6 public vizzes

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, and weight across cars from different origins, using the Auto MPG dataset from the UCI Machine Learning Repository. The visualization is built with the Vega-Lite API, which wraps Vega and Vega-Lite specifications in JavaScript. It renders a bar chart with semi-transparent bars colored by origin, sized by weight, and includes tooltips showing car names via `vega-tooltip`. The chart fits the full window size and uses a custom dark theme from an exported config object.

Dec 10, 2021

Loading thumbnail…

Loading and Parsing CSV

This example demonstrates how to load and parse a CSV file using D3 and React, displaying a summary of the data’s size and structure. It fetches a remote CSS color-names dataset via the `d3.csv` API, which parses the text into tabular data. The React app uses the `useState` and `useEffect` hooks to handle asynchronous loading, and renders a plain-text message showing the file’s size in kilobytes, the row count, and the column count. The visualization is minimal, using an HTML `<pre>` element to output the parsed information.

Dec 9, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of fetching and parsing a CSV file, displaying summary statistics about the dataset as large text. It uses the `fetch` API to retrieve a remote CSV file containing CSS color names, then parses the text with `d3.csvParse` from D3 v7. The resulting message reports the file size in kilobytes, the number of data rows, and the number of columns, all rendered inside a `<pre>` element. The visualization focuses on confirming successful data loading and structure.

Dec 9, 2021

Loading thumbnail…

Mouce Follower

A single dark circle follows the mouse cursor as it moves across a blank SVG canvas. The circle’s position is tracked using React’s `useState` and `useCallback` hooks, with the `onMouseMove` event capturing the pointer’s `clientX` and `clientY` coordinates. React re-renders the SVG element with updated `cx` and `cy` attributes, while D3’s `arc` function is imported but not used in this rendering logic. The example demonstrates the integration of React state management with D3’s SVG creation capabilities.

Dec 9, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face with eyes, eyebrows, and a mouth. The eyebrows animate by alternating their vertical position via chained `transition().duration()` calls, moving up and then back down. The code uses `d3.select` and `d3.arc` to create SVG shapes, with coordinates calculated from the viewport dimensions. All elements are appended to a centered `<g>` group, and the animation runs continuously without user interaction.

Dec 9, 2021

Loading thumbnail…

SMiLe Face Part 1

A grid of cartoon faces, each rendered with randomized facial features, fills the viewport. The faces use SVG circles for the head and eyes, and a D3 arc generator for the mouth, all composited through React components. Using React and D3 v7, the example generates 18 faces with random stroke widths, eye positions, and mouth radii, demonstrating reusable component composition.

Dec 9, 2021