Sabbir

@nasirsabbir07·9 public vizzes

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars with no axes, using population data from the United Nations World Population Prospects 2019. The React app loads the CSV via d3.csv, slices the first 10 rows, and renders SVG rectangles scaled by d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Gridlines and tick labels are drawn manually, while the chart intentionally omits axis lines and frames.

Jan 5, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, using React to render SVG rectangles. The bars are sized proportionally to each country’s 2020 population, with blue vertical gridlines drawn from the linear scale’s ticks. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv and processed with scaleBand and scaleLinear. The visualization relies on React hooks (useState, useEffect) to fetch and store the data, while d3.v5 provides the scales and max function.

Jan 5, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the auto-mpg dataset, plotting engine horsepower against miles per gallon. Circles are colored by country of origin and sized according to vehicle weight. The visualization is built programmatically using the Vega-Lite API, which compiles to Vega specifications, with data loaded asynchronously via D3’s `csv` function. Custom axis and label styling are applied through the `config` object, and an interactive tooltip displays each car’s model name on hover.

Jan 5, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for various automobile models, using a scatter plot where each point represents a car with its name available via tooltip. The plot uses semi-transparent points to reveal overlapping data density, with both axes scaled to start at zero-offset values. Built with the Vega-Lite API, it loads automobile data from a CSV file hosted on GitHub, applies custom styling for readability, and renders interactively with Vega-Tooltip support. The visualization dynamically fits its size to the browser window.

Jan 4, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This example displays summary statistics for a dataset of CSS named colors, showing the file size in kilobytes, row count, and column count as large text. It loads the data from a GitHub gist using `d3.csv`, stores it in React state with the `useState` and `useEffect` hooks, and renders the result via ReactDOM. The implementation combines D3's `csvFormat` utility for calculating data size with React's component lifecycle for managing asynchronous data loading.

Jan 4, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face rendered as SVG circles responds to mouse movement, with the eyes tracking the cursor's position across the full browser viewport. The React application uses `useState` to store the current mouse coordinates and `useCallback` to handle `onMouseMove` events on the SVG element. The face's eyes are two additional circles positioned relative to the main face, creating an interactive effect where the entire expression follows the pointer.

Jan 1, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and modern JavaScript features. It fetches a CSV file containing CSS named colors from a GitHub gist and displays the file size in kilobytes, row count, and column count in large text. The implementation uses `d3.csv` for parsing, along with the Fetch API and `async`/`await` syntax for handling asynchronous requests. It also includes commented-out alternatives showing the pyramid-of-doom pattern and a `fetch`-based approach.

Jan 1, 2022

Loading thumbnail…

Fork of Smiley face part 1

This gallery example shows a grid of fifteen randomly generated smiley faces rendered as SVG elements. Each face is composed of a yellow background circle, two eyes, and an arc-shaped mouth, with all facial features positioned relative to a central coordinate system. The code uses React components to encapsulate each part of the face, while the D3.js `arc()` API generates the mouth's path geometry. Random values for stroke width, eye offset, eye radius, and mouth dimensions create visual variety across the grid, demonstrating how parameterized React components can work with D3 for generative data visualization.

Dec 31, 2021

Loading thumbnail…

Smiley face part 1

This example shows a simple smiley face composed of three SVG circles: a large yellow head with a black outline and two smaller black eyes. It uses React 17 from a UMD build, logging the React object to the console before rendering static SVG elements. The drawing relies on hard-coded coordinates and attributes, positioning the head at center (480, 250) with a radius of 245, and the eyes offset horizontally at x-coordinates 350 and 600. No interactivity or data binding is present.

Dec 29, 2021