Skip to main content
Log in
D

Dipak654

@Dipak654·7 public vizzes

Loading thumbnail…

Fork of loading and parsing data

This example demonstrates how to load and parse CSV data from a remote URL, then display basic statistics about the dataset in a large-text message container. It fetches a CSS-named-color CSV file from a GitHub gist, parses it into an array of objects using `d3.csvParse`, and reports the file size in kilobytes, row count, and column count. The asynchronous loading uses the Fetch API with `async`/`await`, while D3 v7 handles the CSV parsing. The result is a minimal proof-of-concept for data ingestion and summary reporting.

Dec 4, 2021
Loading thumbnail…

Data visualization of population of religion in country with respect to country

This visualization displays the population of different religions across countries using a bar chart. Each bar’s position encodes the country and religion, while its color represents the population value, with tooltips revealing exact numbers. The visualization is built with Vega-Lite and the vega-lite-api, fetching data from a CSV via d3.csv. It uses customized axis and label styling from a config object, rendering full-screen with fit autosizing.

Dec 4, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes religious demographics across countries using a bar chart, with each bar representing a country and the color encoding the population for each religion. The visualization is built using the Vega-Lite API and rendered with D3.js, incorporating vega-tooltip for interactive hover details. Data is loaded from a CSV file hosted on GitHub, containing population figures for various religions by country. The chart fills the entire window and uses custom styling to adjust font sizes and axis appearance for readability.

Dec 4, 2021
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple SVG face constructed from yellow background circle, two eyes, and a mouth, all rendered through React components. The visualization demonstrates interactive mouse tracking, where a small circle follows the cursor's position across the canvas. The code uses D3 v7 for parsing a CSV dataset from a GitHub gist, displaying file size and row/column counts. React's `useState` and `useCallback` manage mouse position updates, while D3's `arc` function generates the mouth path.

Dec 3, 2021
Loading thumbnail…

Fork of loading and parsing data

This example demonstrates how to load and parse CSV data from a remote URL, then display basic statistics about the dataset in a large-text message container. It fetches a CSS-named-color CSV file from a GitHub gist, parses it into an array of objects using `d3.csvParse`, and reports the file size in kilobytes, row count, and column count. The asynchronous loading uses the Fetch API with `async`/`await`, while D3 v7 handles the CSV parsing. The result is a minimal proof-of-concept for data ingestion and summary reporting.

Dec 3, 2021
Loading thumbnail…

loading and parsing data

This example demonstrates the basic step of loading and parsing a remote CSV file with D3. It fetches text from a GitHub-hosted dataset of CSS named colors, uses `d3.csvParse` to convert the raw text into a structured data table, and then displays summary statistics. The visualization is purely textual, presenting the file size in kilobytes, the number of data rows, and the number of columns in a large `<pre>` element. The code relies on the modern `fetch` API and `async`/`await` syntax to retrieve the data.

Dec 3, 2021
Loading thumbnail…

Fork of HTML Starter

A yellow smiley face rendered with SVG circles and a d3.arc path follows the mouse: a small red circle tracks the cursor across the screen, while the face’s background, eyes, and mouth are positioned around the viewport center. React state updates the cursor-following circle’s coordinates via a mouse move handler, and the d3.arc function in Mouth.js computes the smile path. The example uses React 17, D3 v7, and SVG rendering.

Dec 3, 2021