muhammadshumas

@muhammadshumas·10 public vizzes

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width for three flower species. The color legend on the right filters and highlights points by species when hovered, while non-matching species fade to 20% opacity. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and custom React components for marks, axes, and the legend. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, and all elements are rendered as SVG.

Dec 29, 2021

Loading thumbnail…

Polished Scatter Plot with Menus

A scatter plot of the Iris Dataset, rendered in SVG by React, uses dropdown menus to select which of four measurements appears on the x and y axes. The menus, powered by ReactDropdown, update state via `useState` and `useCallback`, triggering re-renders that pass new scales from D3 `scaleLinear` to the reusable `AxisBottom`, `AxisLeft`, and `Marks` components. Axes are drawn from `xScale.ticks()`, while circles use `xValue` and `yValue` accessors, with `format('.2s')` for tick labels and native `<title>` tooltips.

Dec 29, 2021

Loading thumbnail…

World Map

This interactive SVG world map visualizes country boundaries and landmasses using D3.js geo APIs, including `geoNaturalEarth1` for projection, `geoPath` for rendering, and `geoGraticule` for the graticule grid. The map is built with React, loading TopoJSON data from the world-atlas package, and displays land in teal, graticules in light gray, and interior boundaries in a contrasting shade. The sphere outline and graticules add a polished cartographic style to the visualization.

Dec 28, 2021

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature readings from San Francisco, tracking how temperatures fluctuate over time. The visualization uses a smooth curved path generated with d3.line() and curveNatural, with temperature values mapped to the y-axis and timestamps mapped to the x-axis using scaleTime. React components render the SVG output, while d3.scaleLinear, d3.scaleTime, and d3.extent handle the data scaling. The chart displays axes with d3's tick generation and uses the Poppins font with custom CSS styling for a clean, modern appearance.

Dec 28, 2021

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, comparing petal length against sepal width. Each flower is drawn as a circle, with hover tooltips revealing the precise x-axis value. The visualization uses React with D3 v5, leveraging `scaleLinear` for axes, `extent` for domain calculation, and `csv` for dataset loading. A clean, muted color palette and Poppins typography define the aesthetic, while custom `AxisBottom`, `AxisLeft`, and `Marks` components render the SVG output.

Dec 28, 2021

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. React components render the SVG visualization, with d3.scaleBand and d3.scaleLinear mapping countries and populations, while d3.csv fetches the dataset. The chart applies custom styling through Poppins fonts and teal-colored marks, with axis labels and formatting via d3.format to abbreviate large population values.

Dec 28, 2021

Loading thumbnail…

pie chart d3

This example presents a radial burst visualization of CSS named colors, with each color represented as a wedge in a full circle. The data is loaded from a CSV file containing color names and their hexadecimal RGB values using d3.csv, and the layout is computed with d3.pie and d3.arc. React components render the resulting paths as SVG elements, filling each wedge with its corresponding hex color. The visualization is generated with React 16 and D3 v5, displaying the entire color palette in a single circular arrangement.

Dec 27, 2021

Loading thumbnail…

Fork of Vega-Lite API Template 2

This visualization presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower, with color encoding for country of origin and size encoding for vehicle weight. Built using the Vega-Lite API in conjunction with D3 v5 and Vega-Tooltip, the visualization retrieves data via D3’s CSV loader and renders as a full-window SVG with customized axis styling and tooltips that display vehicle names on hover.

Dec 26, 2021

Loading thumbnail…

Fork of Vega-Lite API

This example visualizes the relationship between engine displacement and horsepower for cars, with tooltips showing vehicle names. The scatter plot uses the Vega-Lite API to declare the mark type and encodings, while D3.js loads the auto-mpg CSV dataset. The visualization is rendered through Vega and Vega-Lite, with Vega Tooltip handling interactions and custom configuration adjusting font sizes and axis styling for readability.

Dec 26, 2021

Loading thumbnail…

Fork of Smiley Face

Eighteen randomly parameterized smiley faces fill the viewport, each composed of a yellow SVG circle with black stroke, two eyes, and a smiling arc. The example combines React components with D3’s `arc` generator to build the mouth path, and uses `range` from D3 to create the grid of faces with varying stroke widths, eye offsets, radii, and mouth dimensions.

Dec 24, 2021