Salman Chowdhury

@salmanc2·5 public vizzes

Fork of Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset using React state and D3 utilities. The app fetches iris flower data from a remote URL via `d3.csv`, storing the parsed result with React's `useState` and `useEffect` hooks. While loading, it displays "Loading...", then renders a plain-text summary describing the data's size in kilobytes, row count, and column count using `d3.csvFormat` and the dataset's `columns` property. The visualization is minimal—a styled `<pre>` element—focusing on the integration of React's component lifecycle with D3's data-loading API.

Mar 6, 2022

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 10 most populous countries in 2019 as a horizontal bar chart. It uses a React app that fetches data from a CSV file and passes it through D3’s scale functions (`scaleBand`, `scaleLinear`) to map categories and values to screen coordinates. The chart is rendered as SVG, with axes drawn using custom ticks and lines, and bars as `rect` elements. The code imports specific D3 utilities like `csv`, `max`, and `format`.

Mar 6, 2022

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries in 2019, using an SVG rendering approach. The chart uses a categorical color scale for the bars and labels each country along the y-axis, with population values on the x-axis. The code imports and uses React components such as `useState` and `useEffect`, and leverages D3 functions including `csv`, `scaleBand`, `scaleLinear`, and `max`. The data is loaded from a GitHub Gist CSV file, and the chart is rendered entirely through SVG elements created in a React component.

Mar 6, 2022

Loading thumbnail…

Fork of React + D3 Viz Starter

This example shows a bare-bones React and D3.js starter template that renders a blank SVG visualization area. The `VizContainer` component abstracts the SVG and group elements, implementing D3’s margin convention with configurable outer and inner rectangles in gray and light gray to visualize the layout. The code uses React 16, ReactDOM, and D3 v6 loaded via CDN, with fixed dimensions of 960×500 pixels. The optional `showMargins` prop toggles the display of these guide rectangles, which can be removed for production use by deleting the prop from the call.

Feb 28, 2022

Loading thumbnail…

Scatterplot with Iris Data

This scatterplot visualizes the Iris dataset, plotting sepal width against petal length for individual flowers. The visualization uses React components to render SVG elements, with D3 scales (d3.scaleLinear) mapping data coordinates to screen positions. The code loads CSV data via d3.csv, applies numeric type coercion, and builds custom axes (AxisBottom, AxisLeft) alongside circular marks. Each circle includes a native SVG `<title>` element for basic tooltip functionality, with axis labels for Sepal Width and Petal Length displayed on the chart.

Feb 28, 2022