Md Alif

@md-alif10000·7 public vizzes

Fork of Stylized Iris Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. The visualization is built with React and D3 v5, using SVG rendering for marks and axes. The code employs D3's `scaleLinear` for positioning, `extent` for domain calculation, and `csv` for data loading. Circles represent data points with hover tooltips. The chart features custom axis components, formatted tick labels using D3's `format` function, and a clean design with Poppins typography.

Dec 25, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a world map rendered with a natural Earth projection, displaying country boundaries as filled shapes and interior borders as distinct strokes. The visualization uses React to manage the component structure and d3-geo’s `geoPath` and `geoNaturalEarth1` for projection and path generation. TopoJSON data from the World Atlas is loaded via d3.json, with `feature` and `mesh` extracting land polygons and country interior lines. Styling with CSS defines a blue ocean sphere, graticule grid, and teal landmasses.

Dec 22, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive bar chart visualizes population density across divisions of Bangladesh, with bars sized by area in square kilometers and colored by district. The visualization uses the Vega-Lite API’s `markBar` encoding with x and y quantitative fields, while tooltips show district names. Data is loaded asynchronously via `d3.csv` from a Gist hosting the UCI Auto MPG dataset. Custom axis styling and tooltip styling are applied through a config object, and the chart renders with an SVG renderer via `vl.register`, adapting to the full window viewport.

Dec 19, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A mouse-driven smiley face follows the cursor across an SVG canvas. The face is a single orange circle rendered with React state tracking the mouse position. The code uses React hooks `useState` and `useCallback` to update the circle's `cx` and `cy` attributes on every `mousemove`. D3's `arc` function is imported but unused in this implementation. The example demonstrates simple React-D3 integration with direct SVG rendering.

Dec 18, 2021

Loading thumbnail…

Fetch CSV data

This example demonstrates fetching a remote CSV file containing CSS color data and logging its raw text content to the browser console. The code uses the Fetch API to request the file from a GitHub Gist URL, then parses the response as text via the `res.text()` method. No visualization is rendered; instead, it serves as a minimal foundation for loading external tabular data, which could later be processed or visualized using libraries like D3. The bare-bones HTML structure includes empty style and script blocks, with JavaScript handling the asynchronous data retrieval.

Dec 18, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a responsive smiley face using React and D3 v7, adapting its size to the browser window. The face is composed of SVG circles for the head and eyes, with a mouth drawn using D3’s `arc()` path generator. Angular measurements for the mouth’s start and end angles are defined in radians, while coordinates for the head and eyes are calculated from the viewport center. The visualization uses React’s `ReactDOM.render` to mount the component, with styling that hides the scrollbar for a full-screen display.

Dec 18, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a simple static SVG composition: a large yellow circle with a black outline, accompanied by two smaller unfilled circles positioned symmetrically inside it. The visualization demonstrates basic SVG shape rendering within an HTML page. The code uses an SVG element with explicit width and height attributes, styling circle elements with fill, stroke, and stroke-width properties. It imports React and ReactDom from the provided JavaScript file, though the rendering itself relies purely on raw SVG markup in the index.html file, not on React's component system.

Dec 17, 2021