ParendraReang

@ParendraReang·5 public vizzes

Fork of Vega-Lite API Template

This chart uses a circle mark for every country-religion pair, encoding the population value through color and tooltip. The visualization is built programmatically with the Vega-Lite API, which registers Vega and Vega-Lite to render to SVG, and loads country-by-religion population data from a CSV using d3.csv. Custom configuration adjusts axis labels and tooltip styling for readability.

Mar 27, 2023

Loading thumbnail…

Fork of Mouse Follower

This example displays three computed statistics from a CSS named colors dataset: the total size of the formatted data in kilobytes, the number of rows, and the number of columns. The application fetches the CSV file using d3.csv and renders the results as plain text in a React component. The code uses React hooks (useState, useEffect) to manage the asynchronous data loading and d3.csvFormat to calculate the data size. The visualization is minimal, showing only the three numeric values without any graphical representation.

Mar 26, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing a CSV file using D3.js, displaying the results as three lines of text: the file size in kilobytes, the number of rows, and the number of columns. It fetches a remote CSV of CSS named colors via `d3.csv()`, which handles the network request and parsing. The resulting data is formatted with `d3.csvFormat()` to calculate its byte length. The presentation uses minimal HTML with a styled `<pre>` element.

Mar 26, 2023

Loading thumbnail…

One

A grid of six by three yellow smiley faces is rendered, each with randomly generated eye positions, pupil sizes, mouth curvature, and stroke widths. The faces are built from reusable React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which compose SVG circles and a d3.arc path for the mouth. The App component maps over a range of eighteen indices, applying random numeric values to the face properties, and mounts the result into the DOM via ReactDOM. The visualization demonstrates how React and D3 can combine to create varied, data-driven SVG graphics.

Mar 25, 2023

Loading thumbnail…

One

A minimal HTML page demonstrates the absolute baseline of web-based visualization: an empty body with no visual output. The example uses raw HTML structure with only a document title, containing no JavaScript, CSS, or external libraries. It serves as a blank starting point, showing the simplest possible document that could later host a data visualization, though it currently renders no data or charts. The page stands as a contrast to richer works, highlighting the absence of any rendering API or graphical content.

Mar 24, 2023