S

Sushan Prajapati

@Sushanprajapati·20 public vizzes

Loading thumbnail…

Using Points on a World Map

This visualization displays a world map with points marking cities that have populations greater than 50,000, sourced from the Simplemaps World Cities Database. Using d3.geoNaturalEarth1 and d3.geoPath, it renders land masses, graticules, and country interiors as SVG paths, with city coordinates projected onto the map. The React-based code loads TopoJSON world atlas data via d3.json and mesh, while city data is fetched as CSV. Circles are drawn with low opacity to reveal dense urban clusters across continents.

Loading thumbnail…

Polished World Map

This example displays a natural Earth projection world map with graticules, country boundaries, and interior borders, styled with a teal land color and gray sphere backdrop. It loads World Atlas TopoJSON data via d3.json and converts it using topojson.feature and topojson.mesh. React renders the SVG, while the d3.geoNaturalEarth1 projection and d3.geoPath draw the geographic features, including graticules from d3.geoGraticule.

Loading thumbnail…

Scatter Plot with menus

A scatter plot of the Iris dataset with dropdown menus for selecting which measured attribute appears on the x- and y-axes. The visualization renders as an SVG using React components, with D3 providing the linear scales, axis generation, and CSV data loading. Users can switch among sepal length, sepal width, petal length, petal width, and species for each axis, which updates the scales, axis labels, and plotted circles. Tooltips show tick values on hover.

Loading thumbnail…

Scatter Plot with Interactive color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width, with each point colored by species. An interactive color legend allows hovering over a species to highlight its corresponding data points while fading the others. Built with React and D3 v5, the visualization uses SVG for rendering, with scales and axes from `d3.scaleLinear` and `d3.scaleOrdinal`, and custom React components for marks and legends, interacting through hover state to update point opacity.

Loading thumbnail…

Scatter Plot with color legend

This scatter plot displays the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis, with species indicated by color and a legend. It uses React for component-based rendering and D3 scales (d3.scaleLinear, d3.scaleOrdinal) to position circles and assign colors. The data is loaded asynchronously via d3.csv, and the visualization is rendered as SVG with custom axis and legend components.

Loading thumbnail…

Scatter Plot with colors

This scatter plot displays the Iris Dataset, showing the relationship between petal length and sepal width, with dots colored by species. The visualization loads data asynchronously with `d3.csv` inside a React hook, then renders SVG circles through React components. Scales use `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for categorical colors. Axis components generate ticks and labels using D3’s `scale.ticks()` method, while formatted numbers come from `d3.format`.

Loading thumbnail…

Line Chart for timestamp

This line chart visualizes weekly temperature data from San Francisco using timestamp and temperature values from a Data Canvas Sense Your City dataset. The visualization uses React for component structure and d3.js v5 for scales, the line generator, and natural curve interpolation to draw the smooth path. SVG rendering displays the line in teal, while the Axes components generate tick marks and labels, with time formatting applied to the x-axis. Data is loaded asynchronously via d3.csv and converted to a Date object before scaling.

Loading thumbnail…

Scatter Plot for timestamp

This scatter plot visualizes temperature readings over a week from the Sense Your City dataset, with time on the x-axis and temperature on the y-axis. Each point represents a timestamped measurement, and hovering reveals the exact time via a native SVG `<title>` tooltip. The React-based implementation uses D3 v5 scales (`scaleTime`, `scaleLinear`) and `extent` to map data to coordinates, while custom axis components render tick marks and labels. The SVG circles are generated by a Marks component, and data loading relies on D3’s `csv` parser fetching from a GitHub gist.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, mapping petal length against sepal width using d3.scaleLinear for both axes. The React-based component uses D3 v5 to load data via d3.csv, render SVG circles for each observation, and generate bottom and left axes through custom tick components. A custom formatting function condenses large tick labels, and hover tooltips display the petal length value using SVG <title> elements. The visualization incorporates the Poppins font and a teal color scheme for the marks.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries in 2020, ranked from largest to smallest, with population values represented as horizontal bars. The chart uses React to render SVG elements, with d3-scale providing the linear and band scales for positioning, while d3-format converts large population numbers into abbreviated labels like “1.4B.” Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv, and each bar includes a native SVG tooltip showing its exact formatted value.

Loading thumbnail…

Refactored Bar Graph

This visualization shows the 10 most populous countries in 2020 using horizontal bars, with country names on the y-axis and population values scaled on the x-axis. The graph is built with React components that render SVG elements, using D3’s `scaleBand` and `scaleLinear` for positioning and sizing, while axis tick marks are generated with `xScale.ticks()`. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and filtered to the top ten entries. The code organizes reusable components for axes and marks, demonstrating a modular approach to chart construction in React with D3.

Loading thumbnail…

Bar chart with axes

This bar chart displays the top 10 countries by 2020 population, using horizontal bars with labeled axes. The visualization loads data from the United Nations World Population Prospects 2019 CSV file, then uses React to render the SVG and D3 v5 APIs including `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `max` to determine the domain. The chart shows population values with tick marks and country labels, encoding data through bar lengths.

Loading thumbnail…

Simple Bar Chart without any axes title

This example displays the top 10 most populous countries as horizontal bars, using the United Nations World Population Prospects 2019 dataset. The React app loads the CSV data with `d3.csv`, sorts by population, and renders SVG `rect` elements. `d3.scaleBand` positions countries vertically, while `d3.scaleLinear` maps population values to bar widths, with no axes or labels shown. The visualization relies on React state and hooks, with D3 v5 handling the data, scales, and SVG rendering.

Loading thumbnail…

Rendering Data with React & D3

A radial burst of CSS named colors, rendered as a pie chart where each slice represents a single color and is filled with its corresponding hex value. The visualization loads color data from a CSV file via `d3.csv`, then uses React's `useState` and `useEffect` hooks to fetch and store the data. The `d3.pie` function calculates slice angles, while `d3.arc` generates the SVG path data for each wedge, which React renders as SVG elements.

Loading thumbnail…

Vega-Lite API Template

This example demonstrates how to build an interactive scatter plot using the Vega-Lite API wrapper for D3.js, visualizing the relationship between miles per gallon and horsepower for various car models. The visualization encodes fuel efficiency on the x-axis, engine power on the y-axis, country of origin as color, and vehicle weight as point size, with a tooltip showing the car name. It loads automobile dataset from a CSV file using D3’s `csv` function and renders the chart via the `vega-lite-api` library, which converts the specification into Vega for display. The custom styling comes from a `config` object that adjusts axis and label fonts.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading and summarizing a CSV dataset within a React application that integrates D3.js. The interface displays a simple text report showing the file size in kilobytes, the number of rows, and the number of columns. The code uses React's `useState` and `useEffect` hooks to trigger a one-time asynchronous fetch of the data via D3's `csv` function, which populates the state. The `message` module then formats the summary using D3's `csvFormat` method to calculate the byte length.

Loading thumbnail…

Smiley Face Part IV

A smiley face built from basic SVG shapes is centered on a yellow circle with a thick black outline. Two small circles form the eyes, while a curved path, generated using the d3 `arc` generator, creates the mouth. The React component renders the SVG, positioning elements via a group transform, and the visualization is static with no interaction or data binding.

Loading thumbnail…

Interaction with react, interactive mouse pointer

A circle follows the mouse pointer across an SVG canvas in this interactive React example. The pointer's screen coordinates are captured by a mouse-move event handler and stored in component state, updating the circle's center position in real time. The visualization uses React's `useState` and `setMousePosition` for state management, ReactDOM for rendering, and renders output as SVG elements. The data is the live mouse position, with coordinates normalized to the 960×500 viewport, and the circle has a fixed radius of 30 pixels.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors using D3 v5. It displays the file size in kilobytes, row count, and column count in a large-font preformatted text element. The code primarily uses `d3.csv` with a promise-based approach to fetch data from a GitHub Gist URL, and also includes commented-out alternatives using `fetch` with `async/await` and `d3.csvParse`. The visualization is purely textual, focusing on data exploration rather than graphical representation.

Loading thumbnail…

Loading data in react with d3

This example demonstrates a simple interactive visualization where a single circle follows the mouse cursor within an SVG canvas. It shows how to combine React’s state management with D3.js for rendering. The code defines a React component using `useState` to track mouse coordinates, and handles `onMouseMove` events to update the circle’s `cx` and `cy` attributes. It uses `d3.v6` for SVG handling and `ReactDOM.render` to mount the component, with the circle radius hard-coded as 30 pixels.