Skip to main content
Log in
E

Ehtisham UL Hassan

@ehtishama·15 public vizzes

Loading thumbnail…

Scatter Plot with Colors

This interactive scatter plot displays the Iris dataset, visualizing relationships between different flower measurements. Users can select which attributes appear on the X and Y axes through dropdown menus. A color legend groups data points by species, and hovering over a legend entry dims all non-matching species marks. The visualization uses React with D3 v5 scales (scaleLinear, scaleOrdinal) and renders as SVG. The d3.csvParse function loads the dataset, while React state manages axis selections and hover interactions.

Dec 9, 2021
Loading thumbnail…

Scatter Plot with Menus

This example shows an interactive scatter plot of the Iris dataset, where users can dynamically select which flower measurements to display on the X and Y axes via dropdown menus. The chart renders as an SVG using React components and D3 scales, with the `scaleLinear` function mapping the chosen attributes to pixel coordinates. Circle marks representing individual data points are drawn using the `Marks` component, while custom axes and labels are built from D3 tick values. The data is loaded from a CSV file using `fetch` and parsed with `csvParse`.

Dec 8, 2021
Loading thumbnail…

Making a world map

This example visualizes world geography by rendering country boundaries, graticules, and a globe sphere using geographic projections. The map displays landmasses in teal with highlighted interior borders, set against a light gray sphere and graticule grid. The code uses `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule` to project and draw geographic features in SVG. It fetches TopoJSON data from the `world-atlas` package, converting it to GeoJSON with `topojson.feature` and `topojson.mesh`. React manages the component state and rendering, with styles defined in CSS.

Dec 2, 2021
Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries and graticules, rendered as an SVG using React. The map uses the Natural Earth projection via `d3.geoNaturalEarth1` and traces paths with `d3.geoPath`. Land areas are filled in teal, interiors are stroked, and graticules appear as light gray lines. Data comes from the World Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh` to extract land polygons and country borders. Styling is applied through CSS classes.

Dec 2, 2021
Loading thumbnail…

Making a Line Chart - 01

This example shows a line chart of weekly temperature data for San Francisco, with time on the x-axis and temperature on the y-axis. It uses D3 v5 scales (`scaleTime`, `scaleLinear`) and the `line` generator to create the path, while React components render SVG circles for each data point. The axes are built with D3 ticks and formatted using `timeFormat`, with data loaded from a remote CSV via `fetch` and `csvParse`. The chart includes labeled axes and tooltips via SVG `<title>` elements.

Dec 1, 2021
Loading thumbnail…

Working with Time

This scatterplot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. Each orange circle represents a data point, and hovering reveals its exact timestamp and temperature. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` to map the data. SVG elements render the axes, tick marks, and labels, while the data is loaded from a CSV file and parsed with `csvParse`.

Nov 30, 2021
Loading thumbnail…

Scatter Plot 01

This scatter plot visualizes the relationship between petal length and sepal width from the Iris dataset, with each point colored orange and labeled via tooltips on hover. The chart uses React components for rendering SVG elements, including custom axes and marks. D3’s `scaleLinear` handles the x and y scales, while `csvParse` loads the dataset from a GitHub gist. Interactive elements include rotated axis labels and a loading state, with styling applied via external CSS.

Nov 30, 2021
Loading thumbnail…

Bar Chart - 04 [Stylized]

A stylized horizontal bar chart displays 2019 UN population estimates for the top ten most populous countries, using the `scaleBand` and `scaleLinear` APIs from D3 v5 within a React component. Bars are rendered as SVG rectangles, with tooltips showing formatted values via the `format` function. The chart features custom tick styling, a Poppins font, and a color palette emphasizing orange bars against muted gridlines. Data is loaded asynchronously from a CSV via `fetch` and parsed with `csvParse`.

Nov 29, 2021
Loading thumbnail…

Bar Chart - 03 [Refactored]

This bar chart displays the 2020 population estimates for the top 10 countries by total population. The chart uses a horizontal bar layout with SVG rendered through React, leveraging d3's `scaleBand` and `scaleLinear` to map country names and population values to coordinates. The data is loaded from a CSV file via `fetch`, parsed with `csvParse`, and visualized with custom components for axes and marks.

Nov 29, 2021
Loading thumbnail…

Bar Chart - 02 [Margins & Axis]

This example presents a horizontal bar chart of the top 10 countries by population in 2020, encoded as SVG rectangles with margins applied around the plot area. It uses React to manage state and D3’s `scaleBand` and `scaleLinear` for positioning, plus `csvParse` to process UN population data fetched from a GitHub gist. A custom `loadData` function loads the CSV, while D3’s `ticks()` generates axis ticks and gridlines, with text labels for both x and y axes.

Nov 28, 2021
Loading thumbnail…

Pathetic Bar Chart with React and D3 - 01

This example visualizes the top 10 countries by 2020 population from a United Nations dataset, represented as horizontal bars whose widths scale with population values. The chart uses a D3 scaleBand for categorical y-axis positioning and a scaleLinear for quantitative x-axis scaling within an SVG rendered by React. Data is fetched as CSV from a GitHub gist, parsed with d3.csvParse, and state management is handled through React hooks (useState, useEffect). React 16.13.1 and D3 v5.11.0 are loaded via CDN.

Nov 28, 2021
Loading thumbnail…

Rendering data with React and D3

A radial bar chart displays all named CSS colors from MDN, with each color as a wedge arranged around a central point. The visualization uses React hooks to fetch and parse the CSV data, while D3’s `arc` generator creates the ring segments. The SVG paths are rendered by React components, with each wedge’s fill set from the color’s hex value. The chart uses `d3.csvParse` to process the data and maps each entry to an arc with equal angular spacing.

Nov 28, 2021
Loading thumbnail…

Loading data with React

This example demonstrates how to load and display CSV data within a React application, showing the dataset's row count, column count, and size in kilobytes. The code uses React hooks (`useState` and `useEffect`) to manage asynchronous data fetching, while the `loadData` helper employs the Fetch API to retrieve a remote CSV file. D3's `csvParse` converts the raw text into a parsed data structure. The visualization updates from a loading message to the data summary once the fetch completes.

Nov 28, 2021
Loading thumbnail…

Interaction in React

A circle inside an SVG element follows the mouse cursor across a 960-by-500 canvas, updating its center position in real time. The React component uses the `useState` hook to store the cursor’s `clientX` and `clientY` coordinates, which are set by the `onMouseMove` event handler on the `<svg>`. The circle’s `cx` and `cy` attributes are bound to this state, and React’s `ReactDOM.render` mounts the component to the `#root` div. The rendering is purely SVG-based, with no external data source.

Nov 28, 2021
Loading thumbnail…

01

A simple smiling face emoji is drawn as a static SVG graphic. The visualization uses React to render the component and the D3.js library's `d3.arc` to create the mouth shape. The face consists of a yellow circle with a black stroke, two black eyes, and a curved mouth path, all centered within a 900 by 450 viewport. The code defines the geometry with explicit variables for radius and offsets, and renders the final output into the DOM via `ReactDOM.render`.

Nov 25, 2021