Harabi Adem

@Adem911·10 public vizzes

temperatue line chart

This line chart displays San Francisco temperatures over a week, using a smooth natural curve to connect daily data points. The visualization renders as SVG with React components, using D3 scales (scaleTime and scaleLinear) to map timestamps and temperature values. Axes are generated through custom React components, while the Marks component builds the line path and adds circular points with native SVG title tooltips. The data loads from a CSV file via d3.csv, and the chart includes labeled axes for Time and Temperature.

Mar 22, 2021

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes from dropdown menus for the X and Y axes. The visualization uses React with D3.js v5 scales to map data values to SVG circle positions, with axes rendered as React components. Each data point includes a tooltip showing the x-axis value in abbreviated format. The graph updates dynamically when attribute selections change, displaying four continuous measurement options and one categorical species option.

Mar 22, 2021

Loading thumbnail…

scatterplot with menus

This interactive scatterplot displays the Iris flower dataset, allowing viewers to explore relationships between four measured attributes by swapping either axis via dropdown menus. The visualization uses React to manage state and render SVG elements, while D3 v5 handles data loading, scales, and axis generation. Colors and sizes remain constant for all points, with hover tooltips showing formatted x-axis values. The two menus independently control which attribute appears on each axis, enabling immediate comparison across all attribute pairs.

Mar 21, 2021

Loading thumbnail…

World Map

This interactive world map visualizes global landmasses and country boundaries using a natural Earth projection. Land areas are filled in teal, while graticules and interior borders are rendered as subtle gray and blue strokes. The visualization loads geospatial data from the world-atlas TopoJSON dataset, processes it with the `topojson` library’s `feature` and `mesh` functions, and renders the map as SVG paths using D3’s `geoPath`, `geoNaturalEarth1`, and `geoGraticule`. React manages the interface, updating the scene once the data finishes loading.

Mar 21, 2021

Loading thumbnail…

Iris flower scatterplot

This scatterplot visualizes the Iris flower dataset, plotting petal length against sepal width for individual flowers. The code uses React to render an SVG with D3 scales and axes, loading data asynchronously via `d3.csv`. The `Marks` component draws circles for each data point, with tooltips via SVG `<title>` elements. Axes are built from D3 linear scale ticks, with formatted labels using `d3.format`.

Mar 18, 2021

Loading thumbnail…

World population

This bar chart displays the projected 2020 populations of the top 10 countries, using horizontal bars sorted by country name. The visualization, built with React and D3 v5, loads CSV data via the `d3.csv` utility and renders SVG rectangles. A linear scale maps population values to bar widths, while a band scale positions countries vertically. The x-axis uses a custom formatter to abbreviate large numbers, converting gigabytes to billions and trimming trailing zeros.

Mar 18, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color represented by a wedge whose fill matches its hex value. The visualization loads data from a remote CSV file containing color names and hex codes. The code uses React to manage the application state and render SVG elements, while D3.js utilities handle data loading and geometry calculation. Specifically, `d3.csv` fetches the data, `d3.pie` computes the arc positions, and `d3.arc` defines the annulus shape, with React's `useState`, `useEffect`, and `useCallback` managing the async loading and rendering pipeline.

Mar 17, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data in D3 v6 within a React application. It fetches a dataset of CSS named colors from a remote GitHub gist and displays summary statistics about the parsed content. The code uses `d3.csv()` to asynchronously retrieve and parse the data, then leverages `d3.csvFormat()` to calculate the file size in kilobytes, along with the row and column counts, which are rendered into a large HTML `<pre>` element. The visualization is entirely text-based, focusing on data loading mechanics rather than graphical representation.

Mar 16, 2021

Loading thumbnail…

mouse follower

A single circle follows the mouse cursor across a full-screen SVG canvas. The example demonstrates React state management for interactive visualizations, using `useState` to track mouse coordinates and `useCallback` to optimize the event handler. The `onMouseMove` event on the SVG element updates the circle's `cx` and `cy` attributes in real time. Rendering is handled entirely through React's declarative JSX syntax, producing a 30-pixel-radius circle with no additional styling.

Mar 16, 2021

Loading thumbnail…

Fork ds of Hello dfHTML

A grid of eighteen randomly generated cartoon faces rendered with React and SVG. Each face uses D3's `arc` generator for the mouth and varied props for eye offset, radius, stroke width, and mouth dimensions to create a unique expression. The faces are drawn on a yellow circular background with black outlines, demonstrating component reuse with randomized parameterization.

Mar 15, 2021