S

SamirAhma

@SamirAhma·21 public vizzes

Loading thumbnail…

Refactored Bar Chart

This bar chart displays the top 10 countries by population for 2020, using a horizontal layout where each bar’s length encodes population values on a linear scale. The visualization is rendered as SVG in a React component, with D3 v5 utilities (scaleBand, scaleLinear, max, csv) handling data loading, scaling, and axes. The dataset is fetched from a CSV file of UN population estimates, and React state (useState, useEffect) manages the asynchronous data loading, while the Marks component draws each rectangle bar.

Loading thumbnail…

Fork of Working with time

This visualization displays temperature readings over time, rendered as a smooth line chart in an SVG canvas. The React app loads CSV data from a GitHub-hosted weather dataset and uses D3 v5 utilities like `scaleTime`, `scaleLinear`, and `extent` to map timestamps and temperatures to coordinates. The `line` and `curveNatural` functions from D3 draw the path, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle axes and marks. Axis labels and tick styling are defined in CSS with the Poppins font.

Loading thumbnail…

Working with time

This example visualizes temperature readings over time from a dataset of weekly San Francisco weather. The SVG chart plots each data point as a circle, with a time-scaled x-axis and a linear y-axis for temperature. Built with React and D3 v5, the code uses `scaleTime`, `scaleLinear`, and `extent` to map data to coordinates, while the custom `AxisBottom`, `AxisLeft`, and `Marks` components render the axes and circles. Tooltips display the day of each timestamp using `timeFormat`.

Loading thumbnail…

Fork of Stylized Bar Chart

A scatterplot displays the Iris dataset, plotting petal length on the x-axis against sepal width on the y-axis, with each flower represented by a teal circle. The React app fetches CSV data from a GitHub gist using `d3.csv`, then renders SVG circles via the `Marks` component. Axes are generated by `AxisBottom` and `AxisLeft`, using `d3.scaleLinear` and `d3.extent` to compute domains, with tick formatting via `d3.format`.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart shows the population of the top 10 countries in 2020, using horizontal bars with a teal fill and a clean, minimal axis design. The visualization is built with React and rendered as SVG, using D3 v5 utilities such as `scaleBand`, `scaleLinear`, and `csv` to load and scale the data. Axes are custom components that map tick values to grid lines and labels, while hover tooltips display formatted population values via the `title` element. The chart loads data from a CSV file containing UN population statistics.

Loading thumbnail…

Fork of Margin Converntion

This example displays a horizontal bar chart of the top 10 countries by population for 2020, with labeled axes and tick marks. The visualization uses React state to asynchronously load CSV data via `d3.csv` and renders SVG elements. Margins are handled by transforming a group element, with `d3.scaleBand` positioning categories and `d3.scaleLinear` mapping population values to bar widths. The code constructs the bar chart with React components and d3 utilities, producing an interactive-ready visualization.

Loading thumbnail…

Margin Converntion

This example displays a horizontal bar chart of the top 10 countries by 2020 population, drawn with SVG rectangles. The code loads the dataset with `d3.csv`, uses React state to manage the data, and applies the margin convention by translating an inner group. `d3.scaleBand` and `d3.scaleLinear` position the bars, while `max` scales the width axis.

Loading thumbnail…

Fork of Fork of Rendering data with react

This example renders a horizontal bar chart of the top 10 countries by 2020 population, loading data from a CSV file of UN population estimates. The visualization uses React with the `useState` and `useEffect` hooks to fetch and store the data via `d3.csv`, then maps over the dataset to generate SVG `<rect>` elements. Position and size are determined by `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population values, while `d3.max` computes the domain for the linear scale.

Loading thumbnail…

Fork of Rendering data with react

This example displays the full set of CSS named colors as a pie chart, where each slice represents one color and is filled with its corresponding RGB hex value. The visualization loads data from a CSV file using D3’s `csv` utility, while React manages the asynchronous data fetching through `useState` and `useEffect`. The pie layout and arc paths are generated with `d3.pie` and `d3.arc`, rendered as SVG elements within React’s declarative component structure.

Loading thumbnail…

Rendering data with react

A React application renders the CSS named colors dataset, loading it via D3’s `csv` utility into React state with `useState` and `useEffect`. The data appears as a vertical stack of thin horizontal bars, each colored by its RGB hex value from the CSV. While loading, a large “Loading…” message displays. The code uses `ReactDOM.render`, `map` over the data array, and inline styles for background colors, with D3’s `csv` handling the remote file parsing.

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a bubble chart of religious affiliation by country, using circle size to encode population counts. It is built with the Vega-Lite API, demonstrating programmatic chart construction through chained method calls like `vl.markCircle()` and `vl.size().fieldQ('population')`. The visualization reads data from a CSV file via `d3.csv`, registers tooltips through `vega-tooltip`'s `Handler`, and renders as an SVG. The code configures axis styling and figure dimensions, with a dark color scheme for readability.

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a bar chart from CSV data, with a custom dark theme applied through configuration. The visualization is built declaratively in `viz.js` using `vl.markBar()`, mapping fields `a` and `b` to the x and y axes, while `index.js` orchestrates the data loading via D3’s `csv` function and registers Vega-Lite with tooltip support. The chart is sized to fill the viewport using the `autosize` directive, with axis and label styling customized in `config.js` for readability.

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between vehicle displacement and horsepower, with tooltips revealing car model names. Built with the Vega-Lite API, it loads CSV data from a GitHub repository, renders points with an SVG renderer, and uses Vega Tooltip for hover details. The visualization auto-sizes to the browser window, applying custom color and font styling from a JSON config.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower in automobiles, with tooltips revealing car names. Built using the vega-lite-api, it constructs a scatterplot via `vl.markPoint` and encodes quantitative x- and y-axes with `vl.x()` and `vl.y()`. Data loads asynchronously from a CSV via `d3.csv`, then renders through Vega and Vega-Lite, styled with a custom config for cleaner axis labels. The visualization fills the browser window using `autosize({ type: 'fit' })` and applies semi-transparent points for readability.

Loading thumbnail…

Mouse Follower

This example shows a single yellow circle that follows the mouse cursor as it moves across an SVG canvas. Built with React and rendered as SVG, the circle’s position is updated on every mouse movement event using the `onMouseMove` handler and React’s `useState` hook. The cursor coordinates, obtained from the event’s `clientX` and `clientY` properties, directly set the circle’s `cx` and `cy` attributes, creating a simple interactive follower effect.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to combine React state with D3’s data-loading utilities. It fetches a CSV file containing CSS named colors from a GitHub gist using `d3.csv`, then displays the dataset’s size, row count, and column count in a large HTML `<pre>` element. The React component uses the `useState` and `useEffect` hooks to manage asynchronous data fetching and trigger a re-render once the data arrives. The code also relies on `d3.csvFormat` in `message.js` to calculate the data size in kilobytes, showcasing a simple React–D3 integration pattern.

Loading thumbnail…

Fork of Loading Data with React & D3

This interactive React visualization displays a single gray circle that tracks the user's mouse movements across an SVG canvas. The application uses React hooks, specifically `useState` and `useCallback`, to manage and update the circle's position coordinates in response to mouse events. The `onMouseMove` handler captures the client coordinates from each mouse movement and sets them as the new center point for the circle. The visualization is rendered entirely through SVG elements, with ReactDOM mounting the component to the root div. The circle maintains a constant radius of 30 pixels while following the cursor in real time.

Loading thumbnail…

Loading Data with React & D3

This example shows a simple interactive visualization where a circle follows the mouse cursor across an SVG canvas. React state tracks the cursor's current x and y coordinates, updating the circle's `cx` and `cy` attributes on every mouse movement. The code combines React’s `useState` and `useCallback` hooks with ReactDOM to manage the UI, while the SVG scene renders a single circle element whose position is bound to the live mouse data. The interaction is driven by the `onMouseMove` event handler on the SVG, demonstrating direct state-to-rendering synchronization within a React-D3 pairing.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote source. The page displays the dataset's size in kilobytes, the number of rows, and the number of columns in large text. The code uses `fetch` to retrieve the text and then the `d3.csvParse` method to parse the CSV string into a data object. It also shows alternative methods involving `d3.csv` and `d3.csvFormat` for data handling and formatting, with the data sourced from a GitHub Gist of CSS named colors.

Loading thumbnail…

Mouse Follower

A yellow smiley face fills the browser window, with its eyes positioned relative to the screen’s center. The visualization is built with React and rendered as an SVG, using React 16.9 and ReactDOM to mount the component. The face’s radius adapts to the window height, while the stroke and eye offsets are fixed constants. The code includes a mouse move handler, but it is currently empty, so the face does not actually follow the cursor.

Loading thumbnail…

Fork of Hello HTML

A static SVG graphic shows a simple face composed of three circles: two small eyes above a larger yellow head with a black outline. Drawn directly in the markup with hard-coded coordinates, the example avoids JavaScript and relies on basic SVG shapes. The `index.html` file contains inline circles, demonstrating how raw SVG elements can render visual content within an HTML page without external libraries.