Skip to main content
Log in
G

gayatrisridhar

@gayatrisridhar·19 public vizzes

Loading thumbnail…

Fork of World Map

This visualization displays a world map with a dark blue sphere and graticule, overlaid with country boundaries and circular city markers. It uses d3.geoEqualEarth, d3.geoPath, and d3.geoGraticule to project and render geographic features, while React manages the SVG elements. City coordinates from a CSV file are projected onto the map, and country outlines come from a world-atlas TopoJSON source. The map is rendered as an SVG using React components.

May 28, 2021
Loading thumbnail…

another one

This example shows a scatter plot of the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis, with each flower as a circle. It uses React with D3.js (v5) to render an SVG, employing `scaleLinear` for both axes, `extent` to set domains, and `scaleOrdinal` (unused for coloring here). The CSV data is loaded via `d3.csv` and parsed into numbers, with axes drawn using custom `AxisBottom` and `AxisLeft` components that generate ticks and grid lines.

May 26, 2021
Loading thumbnail…

new

This interactive scatter plot explores the Iris dataset, allowing users to select which four numeric flower measurements appear on the x- and y-axes via React dropdown menus. The SVG visualization uses d3.scaleLinear for both axes, with d3.axisBottom and d3.axisLeft rendering labeled ticks and gridlines. Each flower is plotted as a circle, and hovering reveals a native tooltip showing the x-value. The data is loaded as CSV using d3.csv and parsed with unary plus operators.

May 26, 2021
Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. The code uses React components to render SVG elements, with d3.scaleLinear for both axes and d3.extent to compute domains from the data. Axis components generate tick marks and labels, while circle marks include native SVG title elements for tooltips. The data is loaded asynchronously via d3.csv and parsed into numeric values before rendering. The visualization adopts a minimal design with subtle tick styling and rotated axis labels for clarity.

May 26, 2021
Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load an external CSV file into a React component using D3’s `csv` method, then display summary statistics about the dataset. The code uses `useState` and `useEffect` hooks to fetch the data asynchronously from a GitHub gist containing CSS color names, and renders a message showing the row count, column count, and file size in kilobytes. The visualization itself is minimal, relying on React’s declarative rendering and D3’s data parsing to present the information clearly.

May 26, 2021
Loading thumbnail…

World Map

This example renders a world map from TopoJSON data using D3 v5 and React, drawing countries as filled paths on an SVG canvas. The visualization uses `geoEqualEarth` for the projection, `geoPath` to generate paths, and `geoGraticule` to display a graticule overlay, with a distinct red sphere background and blue landmasses. Country geometries are loaded from the world-atlas TopoJSON file and converted to GeoJSON via `feature()`. The React component hierarchy separates data loading (`useData`) from the presentational `Marks` component.

May 26, 2021
Loading thumbnail…

scatter plot with menus

A scatter plot of the Iris dataset, rendered as SVG, lets users explore relationships between floral measurements by selecting attributes for the X and Y axes from dropdown menus. Built with React and D3 v5, the visualization updates the axes and circles when new attributes are chosen, using d3.scaleLinear for data mapping and d3.extent to set domains.

May 24, 2021
Loading thumbnail…

Menus with react

This example shows a pet-selection menu built with React, where choosing an option from the dropdown updates a displayed value. The interface consists of a label and a dropdown list populated with pet names. The code uses React’s `useState` to manage the currently selected value and a custom `Dropdown` component that renders an HTML `<select>` element. D3.js is imported but only for its `arc` function, which is unused in the visible logic. The dropdown options are defined in a JavaScript array and rendered dynamically.

May 23, 2021
Loading thumbnail…

Data viz by me

This interactive scatter plot visualizes the Iris dataset, mapping sepal length and width for individual flower specimens. Built with React and D3 v6, it uses `d3.scaleLinear` and `d3.extent` to compute scales, while SVG renders the axes and plot. The data loads asynchronously from a CSV via `d3.csv`, with numeric parsing applied to each row.

May 22, 2021
Loading thumbnail…

React starter code

This React starter code renders a simple “Hello react” message in a web page. It imports the `arc` function from D3, though it is not used in the displayed content. The example demonstrates the basic setup for combining React 17 and D3 v6, using `ReactDOM.render` to mount the `App` component into a root `div`. The page loads React, ReactDOM, and D3 via CDN scripts and uses a separate `bundle.js` file.

May 21, 2021
Loading thumbnail…

Line chart

This line chart displays temperature readings over time from a week-long San Francisco weather dataset. The visualization uses React with D3 v5 scales and axis components to render an SVG plot, with a smooth curve applied via d3.line() and curveNatural. A custom useData hook fetches the CSV data and parses timestamps and temperature values. The chart includes labeled axes for time and temperature, with tick marks styled through CSS.

May 18, 2021
Loading thumbnail…

Line chart of temprature

This line chart displays temperature readings over a week, with circular marks positioned by timestamp and temperature values. The visualization uses React to render SVG elements, with D3 v5 utilities such as `scaleLinear` for axes, `extent` for domain calculation, and `timeFormat` for tick labels. Data comes from a CSV file containing San Francisco weekly temperatures, and hoverable tooltips show the formatted date for each point. The chart includes labeled axes for time and temperature, with a clean, minimalist styling.

May 17, 2021
Loading thumbnail…

Stylized Bar chart

This stylized bar chart displays the ten most populous countries in 2020, using horizontal bars ranked by population count. Built with React and rendered as SVG, the visualization employs D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis, with data loaded asynchronously from a CSV via the `d3.csv` parser. Custom axis components generate tick marks and labels, while `rect` elements include tooltips that format values using D3’s `format` function with abbreviations like “G” for billions. The chart’s styling uses the Roboto font and a muted color palette for a clean, modern aesthetic.

May 15, 2021
Loading thumbnail…

Refactored Bar Chart

This interactive bar chart displays the top ten countries by population for 2020, sourced from a UN Population CSV file. The visualization is built with React and D3 v5, using an SVG rendering approach. The code creates a horizontal bar chart by leveraging D3's `scaleBand` and `scaleLinear` functions to map country names and population values to the chart's dimensions. The chart is modularized into separate components for the bottom axis, left axis, and the rectangular marks, demonstrating a clean, refactored approach to building D3 visualizations within a React framework.

May 15, 2021
Loading thumbnail…

Axes with react and D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, with custom axes rendered as SVG elements. D3 scales (scaleBand, scaleLinear) compute bar positions and sizes, while React manages state and renders ticks, labels, and rects. The code manually generates axis ticks via xScale.ticks() and maps domains, avoiding d3.axisBottom. Data loads from a CSV file using d3.csv.

May 14, 2021
Loading thumbnail…

mouse follower

A black dot follows the mouse cursor across an SVG canvas. The application is built with React, using the `useState` hook to store the cursor's `clientX` and `clientY` coordinates and `useCallback` to prevent unnecessary re-renders during mouse movement. The `onMouseMove` event triggers updates to a circle element's `cx` and `cy` properties, with radius fixed at 30 pixels. The chart uses D3's `arc` import and renders via the `ReactDOM.render` method against a background of 960 by 500 pixels.

May 14, 2021
Loading thumbnail…

Data vizualization(css colors)

This example displays every named CSS color as a single slice of a pie chart, with each slice filled using its corresponding hex value. The visualization is generated with React and D3 v5, using the `d3.pie` layout and `d3.arc` generator to compute slice paths from a CSV of color data. An SVG element renders the result, with all slices sharing an equal arc length to create a uniform, rainbow-like disc that highlights the full spectrum of CSS color names.

May 9, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatterplot of automobile data, plotting horsepower against displacement for individual car models. Each point is rendered as a semi-transparent circle, with tooltips revealing the vehicle name on hover. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications and render SVG output. Data is loaded asynchronously from a remote CSV file using d3.csv, while the vega-tooltip Handler enables interactive tooltips. The chart dynamically fits its dimensions to the browser window through an autosize configuration.

May 9, 2021
Loading thumbnail…

Fork of Vega-Lite API Template 2

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses both color (by origin) and size (by weight) to reveal patterns among vehicles. Built with vega-lite-api, it includes tooltips showing car names and configures axis styles for readability. The code loads data via d3.csv, renders the chart as SVG, and supports hover interactions through vega-tooltip.

May 9, 2021