Muhammad Talha

@muhammadtalha242·5 public vizzes

React & D3 CSV

This example shows a horizontal bar chart of population data for ten countries, with country names on the y-axis and a linear population scale on the x-axis. Built with React and D3 v7, it loads CSV data via `d3.csv` and renders SVG rectangles scaled by `d3.scaleLinear` and `d3.scaleBand`. The custom `AxisBottom` component generates tick marks and labels using `xScale.ticks()`, while React hooks manage data loading and state.

Jul 27, 2021

Loading thumbnail…

Bar Charts React D3

This example demonstrates loading and parsing a CSV dataset of CSS named colors using D3 v7 within a React-compatible HTML setup. The page fetches the data from a GitHub gist via `d3.csv` and logs the parsed result to the console, with alternative commented code showing `fetch` and `d3.csvParse` for manual text parsing. The minimal styling and script tags highlight a straightforward integration of D3’s data-loading utilities into a React-friendly single-file structure. No charts are rendered; the focus is on the data acquisition step.

Jul 5, 2021

Loading thumbnail…

D3 Css Colors

This example visualizes the named colors defined in CSS by loading a CSV file of color names and values. It uses D3 v7’s `d3.csv` method to fetch and parse the data from a GitHub gist, logging the parsed array to the browser console. The page is a minimal HTML document that includes the D3 library via a CDN link, with placeholder CSS in a `<style>` block and an empty body element. No graphical rendering occurs; the demonstration focuses solely on data loading and parsing.

Jul 4, 2021

Loading thumbnail…

Mouse following Circle

This example shows a single circle that follows the mouse cursor as it moves over an SVG canvas. The circle’s center coordinates are updated on every mouse movement event, re-rendering the shape in real time. Built with React, it uses the `useState` hook to manage the mouse position and an `onMouseMove` handler on the SVG element. The visualization demonstrates a straightforward interaction pattern, rendering with ReactDOM and the SVG namespace, with no data source involved.

Jul 4, 2021

Loading thumbnail…

Smile Face Part 1

This example draws a stylized smiley face using React and D3 v7, rendered as SVG elements. The code creates a yellow circle with a black border as the face, two smaller circles for eyes, and positions them via explicit coordinate arithmetic relative to the SVG’s center. The D3 arc API is imported but not used in the visible rendering, which relies instead on React JSX for circle elements and SVG stroke-width styling. The face lacks a mouth, leaving the expression incomplete.

Jul 3, 2021