iffath.namira@csedge.org

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, a classic multivariate flower dataset, with five attributes selectable for the x- and y-axes through dropdown menus. React manages the component state and user interactions, while D3’s `scaleLinear`, `extent`, and `csv` handle data loading and scaling. The visualization renders as SVG, with marks shown as circles and axis labels derived from menu selections.

Fork of Menus with React

This example demonstrates a simple pet-selection interface with a large, prominent dropdown menu. The React application uses the `useState` hook to manage the currently selected pet value, which is logged to the console, and a custom `Dropdown` component. The component renders a native HTML `<select>` element, mapping option values and labels from a data array. The ReactDOM library is used to render the `App` component into the page’s root element, with all styling defined in the HTML.

Fork of Smiley Face Part III

This example shows a yellow smiley face drawn with SVG primitives: a large circle for the head, two smaller circles for eyes, and a mouth created using the d3.arc() path generator. The shape is centered on a 960×500 canvas, with all coordinates derived from the SVG width and height. React manages the component structure and lifecycle, while D3 v5 provides the arc’s inner and outer radii and start/end angles. ReactDOM renders the final SVG to the #root element, with D3 included via a global script tag.

Fork of Polished World Map

A world map of country boundaries is rendered as an SVG with a natural Earth projection, using a light-filled sphere with graticules overlaid as subtle gray lines and landmasses colored teal. Interiors between countries are drawn with a contrasting stroke. The visualization is built with React, using D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, and derives geometry from the World Atlas TopoJSON via `topojson.feature` and `topojson.mesh`.

Fork of Stylized Line Chart

This fork of a stylized line chart visualizes weekly temperature trends from the Sense Your City dataset, plotting time on the x-axis and temperature on the y-axis. The React-based component uses d3.scaleTime, d3.scaleLinear, and d3.line with a natural curve to render a smooth SVG path, while custom axis components generate tick marks and labels. The chart includes clear axis labels and a clean, minimalist design with a Poppins font and muted color palette.

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, mapping petal length and sepal width for individual flowers. The plot uses React components and D3's `scaleLinear` function to position SVG circles within a styled chart, employing custom `AxisBottom` and `AxisLeft` components to render quantitative scales. Data is loaded asynchronously via D3's `csv` utility from a GitHub gist. The visualization includes interactive tooltips through SVG `<title>` elements, which reveal the petal length value when hovering over a data mark.

Fork of Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2019, sourced from a CSV file. It uses React components to render SVG marks and channels, with D3 v5 handling data loading via `d3.csv`, scales (`scaleBand`, `scaleLinear`), and axis tick generation. The chart encodes country names on the y-axis and population values on the x-axis, with grid lines and labeled axes.

Fork of Pathetic Bar Chart 2

This example shows the top 10 most populous countries as a set of horizontal bars, with no axes, labels, or other chart furniture. Each bar’s length encodes the country’s 2020 population, drawn from the United Nations World Population Prospects 2019 dataset. The visualization is built with React, using D3 v5’s `scaleBand` for the y-axis positions and `scaleLinear` for the bar widths, and renders as an SVG. The data is fetched via D3’s `csv` loader and mapped to rectangles.

Editing Pathetic Bar Chart

This example visualizes the top 10 most populous countries as horizontal bars with no axes, using population data from the United Nations World Population Prospects 2019. React state manages the loaded CSV data, while d3’s `scaleBand` and `scaleLinear` position and size the SVG rectangles. The chart intentionally omits ticks and labels, emphasizing raw bar lengths. Data is fetched asynchronously via `d3.csv` and rendered through React components.

Fork of Simple Bar Chart

This fork of a simple bar chart visualizes the top 10 most populous countries in 2024, using data from the UN population estimates. The chart shows population counts in thousands, with each bar labeled by country name. The visualization uses D3's `scaleBand` and `scaleLinear` for axes, along with `axisLeft` and `x`/`y` axis label functions from the `@curran/axis-labels` library. A light gray inner rectangle highlights the plot area, and the bars are rendered as `rect` elements. The data is sorted in descending order and filtered to only include country or area types before selecting the top 10.

Fork of Rendering Data with React & D3

This radial burst visualization displays CSS named colors as a pie chart, with each wedge filled with its corresponding color value from the dataset. The React component loads the data via D3's `csv` utility, then uses `d3.pie` to compute arc angles and `d3.arc` to generate SVG path geometry. React's `useState` and `useEffect` hooks manage asynchronous data loading and re-rendering, while D3 v5 utilities handle the layout and path construction for the SVG output.

Fork of Loading Data

This example demonstrates a React application that loads a CSV file of CSS named colors from a GitHub gist using D3’s `csv` function, displaying each color as a colored square. While the data loads, it shows a large “Loading…” message. The code uses React’s `useState` and `useEffect` hooks to fetch the data asynchronously, then maps over the resulting array to render `div` elements with inline styles for the background color. The implementation relies on `ReactDOM` for rendering and D3 v5 for CSV parsing, with a simplified, non-optimized approach visible in the code.

Fork of Stylized Line Chart

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with a y-axis labeling country names and an x-axis showing population counts. The chart is rendered as an SVG using React components that leverage d3’s scaleBand and scaleLinear functions to position bars and axes. Data comes from the United Nations World Population Prospects 2019 CSV, and the code imports d3’s csv loader to fetch and parse the data before slicing the first ten rows.

Fork 4 of Vega-Lite API Template

This example displays a line chart of temperature readings over time, rendered as a single thick line across the full viewport. The visualization is built using the Vega-Lite API, with the chart specification defined in `viz.js` via `vl.markLine` and encodings for a temporal x-axis and quantitative y-axis. Data is loaded from a remote CSV file using D3’s `csv` function in `getData.js`. The rendering pipeline registers Vega, Vega-Lite, and a tooltip handler in `index.js`, with axes and label styling customized in `config.js`.

Fork 3 of Vega-Lite API Template

This visualization displays a time-series line chart of weekly temperatures in San Francisco. The line mark plots temperature values against timestamps, with a tooltip showing the exact recorded temperature on hover. The example is built using the Vega-Lite API, which compiles specifications to Vega and renders via D3. Data is loaded from a remote CSV file using D3’s `csv` method, and the chart is configured with custom axis styles and font sizes for readability. The visualization automatically fits to the window dimensions.

Fork 2 of Vega-Lite API Template

This visualization displays automobile data from a CSV file, plotting each car as a point based on miles per gallon and horsepower. Points are colored by origin and sized by weight, with a tooltip revealing the car’s name on hover. The code uses the Vega-Lite API to construct the chart, registering Vega and Vega-Lite with a tooltip handler, and customizes axis styling from a configuration object.

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to create a scatter plot of auto-mpg data, plotting engine displacement against horsepower. Each point is a semi-transparent circle colored uniformly, with tooltips displaying the vehicle name. The visualization reads CSV data from a GitHub gist via D3’s `csv` function, and configures axes and label styling. It renders an SVG chart that fills the window using Vega-Lite’s `.width()` and `.height()` methods, with a custom tooltip handler from Vega-Tooltip.

Loading Data

This example demonstrates the process of loading and summarizing a CSV dataset. It shows a text display that either reports "Loading..." while data is fetched or presents the dataset's size in kilobytes, row count, and column count once loaded. The visualization uses React with hooks like `useState` and `useEffect` to manage state and trigger the asynchronous `d3.csv()` call. The fetched data is formatted using `d3.csvFormat` to calculate its size, with the React component rendering the result as an SVG-based `pre` element.

Parsing CSV

This example demonstrates the process of loading and parsing CSV data using D3.js within a React framework. It fetches a remote CSV file containing named CSS colors and displays summary statistics about the dataset, including file size in kilobytes, row count, and column count. The code uses the `d3.csv` function to fetch and parse the data, then computes metrics using `d3.csvFormat` and the parsed data structure. The output is rendered inside a `<pre>` element with large font styling.

Fork of Mouse Follower

This visualization demonstrates a smiley face that follows the user’s mouse cursor across an SVG canvas. Built with React hooks (`useState`, `useCallback`), the app tracks `clientX` and `clientY` coordinates from an `onMouseMove` event, updating the circle’s `cx` and `cy` attributes. The rendering uses React’s `ReactDOM.render` to inject the SVG into the DOM, while D3 v5 is loaded but not directly utilized in the interaction logic.

Mouse Follower

A black circle follows the mouse cursor across an SVG canvas, updating its position in real time with each mouse movement. The visualization uses React's `useState` and `useCallback` hooks to manage the circle's coordinates, while ReactDOM renders the SVG element. Mouse events are captured through the SVG's `onMouseMove` handler, which updates the circle's `cx` and `cy` attributes. The code imports React, ReactDOM, and D3 v5, though D3 is not utilized in the interaction logic itself.

Multiple Smiley Face

This example displays a grid of procedurally generated smiley faces, each with randomized features such as eye offset, eye radius, mouth width, and stroke thickness, resulting in a playful variety of expressions. The visualization is built with React components that compose SVG circles and a D3 arc path for the mouth, using `d3.arc` to define the mouth’s inner and outer radii and angular range. Faces are rendered via `ReactDOM.render`, with each face’s dimensions and parameters set in `index.js`. The code leverages D3 v5 and React to create a lightweight, SVG-based generative composition.

Fork of HTML Starter

This visualization displays a grid of sixteen randomly generated smiley faces, each with unique facial feature variations. The faces are composed of overlapping SVG circles for the background, eyes, and mouth, with the mouth drawn using a d3 arc generator. The React component structure separates concerns through reusable components like BackgroundCircle, Eyes, and Mouth, while the browser canvas renders all faces in a single SVG group. The d3 range function generates the grid positions, and the randomized parameters create variability across each face.