Viewing Data with React & D3

100%

Viewing Data with React & D3

✓ Published0🌍 Public

Last edited Sep 24, 2019

Created on Sep 17, 2019

A bar chart displays the number of video plays per course from a 10,000-person MITx dataset, sourced via CSV from a GitHub gist. Loaded into React with `useState` and `useEffect`, the data drives a D3 SVG visualization using `scaleBand` for courses on the y-axis and `scaleLinear` for the x-axis, rendering axis ticks and rectangles without axes.

AI-generated description

A program that makes a bar chart using data data from the [UN World Population Prospects 2019] (https://population.un.org/wpp/Download/Standard/Population/) but there are no axes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sophie's Stylized Scatter Plot v.2

This example shows the relationship between video views and final grades for HarvardX and MITx online courses during the 2013 academic year, sourced from the MITx-HarvardX Dataverse. Each circle represents a student, with position determined by d3.scaleLinear scales mapping video-play counts to the x-axis and grades to the y-axis. The React components render SVG axes and marks, using d3-format’s `.2s` tick formatting to abbreviate large view counts. Loading states display a large "Loading..." text while the data is fetched via d3.tsv from a remote CSV URL.

Ssophburke

79% match

Loading thumbnail…

Bar Chart with React & D3

A bar chart displays the Grades of the top 10 students, with student names on the y-axis and grade values on the x-axis. The visualization uses React hooks (`useState`, `useEffect`) to fetch CSV data asynchronously from a GitHub URL, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes are manually constructed from tick values, with grid lines drawn using SVG `<line>` elements. D3 v5 and React 16.9 are loaded via UMD scripts, and the chart updates reactively once data arrives.

Kkirangithub23

78% match

Loading thumbnail…

Rendering BAR data with React

This example shows a horizontal bar chart built with React and D3 v6, displaying the first three rows of a CSV dataset. The chart maps each data point’s `Origin` category to the y-axis band scale and its `Cylinders` value to the x-axis linear scale, rendering `<rect>` SVG elements. Data is loaded asynchronously via `d3.csv` into React state using the `useEffect` and `useState` hooks, with the final SVG output managed by ReactDOM. The visualization relies on `scaleBand`, `scaleLinear`, and `max` from D3.

Ppsabela

78% match

Loading thumbnail…

Bar chart with React & D3

This example shows a horizontal bar chart of population counts per activity category, using D3 for data loading and scales while React renders the SVG elements. The code fetches CSV data from a GitHub gist via `d3.csv` in a custom `useData` hook, then builds the visualization with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Custom React components `AxisBottom`, `AxisLeft`, and `Marks` draw the ticks and colored bars, with each bar assigned a color from a small array.

AAditya Khandelwal

78% match

Loading thumbnail…

Sophie's Stylized Scatter Plot v.3

This scatter plot visualizes video views versus grades for HarvardX and MITx courses on EdX during the 2013 academic year. Each circle represents a course participant, with position encoding the number of video plays and final grade. The visualization uses React to render SVG elements, with D3 scales (scaleLinear) handling the x and y axes. Data loads asynchronously from a CSV file via d3.tsv, while axis components and marks are built using React components in the code.

Ssophburke

78% match

Loading thumbnail…

data2

A scatterplot shows the number of video plays versus days active for HarvardX and MITx students, with each point colored by course and a legend that filters points on hover. An inset US bubble map marks the location of each course’s team. The visualization uses D3 v5 scales and axes, React for components, and D3’s `geoAlbers` and `geoPath` for the map. Data comes from the MITx-HarvardX Dataverse and the US Atlas TopoJSON.

FFAN CHI YU(范紀予)

78% match

Loading thumbnail…

Menus with React -Aggregation by Country + Dropdowns!

This interactive map visualizes video view counts for Harvardx/MITx online courses in 2013, aggregating data by country. A dropdown menu lets users filter the displayed points by individual course. The visualization uses D3’s `geoPath` with a Mercator projection to render the world map and graticule, while `scaleSqrt` sizes circles representing views. Hovering over a point reveals the country name and view count. Data is loaded from a CSV using D3’s `csv` function, and the interface is built with React state management for the dropdown selection.

Ssophburke

77% match

Loading thumbnail…

Making a bar chart with React & D3

This example demonstrates how to build a bar chart using React to render SVG elements and D3 to load and parse data. The visualization fetches population data from a CSV file via `d3.csv` and displays it as a series of rectangles, with React’s `useState` and `useEffect` managing the asynchronous data loading. D3 v6 and React 17 are used together, with the chart showing a loading message until the dataset is ready. The SVG-based chart currently renders blank rectangles without positional or size encodings, highlighting the integration of React’s declarative component model with D3’s data utilities.

EElvira Nassirova

77% match