Abin

Fork of Polished World Map

This example renders a polished world map using a Natural Earth projection. It displays land masses in teal, country borders, graticules, and a subtle sphere outline. The visualization loads World Atlas TopoJSON data, which is converted to GeoJSON features and a country mesh. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to draw the map, while React manages the component structure and state. The SVG output is styled with CSS for a clean, modern aesthetic.

Apr 23, 2021

Fork of Working with Time

This scatter plot visualizes weekly temperature readings from the Data Canvas Sense Your City dataset, plotting temperature over time using React and D3 v5. It renders SVG circles positioned by `d3.scaleTime` and `d3.scaleLinear`, with axis components generated through the D3 `ticks()` method. The chart includes a `<title>` tooltip showing abbreviated weekday labels via `timeFormat`, and loading states display a "Loading..." message while `d3.csv` fetches the data.

Apr 23, 2021

Fork of Stylized Scatter Plot

A scatter plot of the Iris Dataset displays petal length against sepal width, with each flower represented as a teal circle. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes and renders SVG circles via the `Marks` component. Axis components generate tick lines and labels, while data loads asynchronously through D3’s `csv` parser with numeric coercion. A Poppins font and muted color palette style the chart, which includes rotated and horizontal axis labels.

Apr 22, 2021

Fork of Refactored Bar Chart

A horizontal bar chart displays the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The chart renders with React components and SVG, employing d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and custom tick formatting to abbreviate population values. Axes are drawn as React components with d3 scale ticks, and bars include tooltips showing exact population figures.

Apr 22, 2021

Fork of Fork of Pathetic Bar Chart

This chart displays the top 10 most populous countries as horizontal bars, with bar lengths proportional to each country’s 2020 population. The visualization omits axes, labels, or tick marks, making it deliberately minimal. Built with React and D3 v5, the code uses `scaleBand` for vertical positioning and `scaleLinear` for bar widths, rendering SVG rectangles. Data loads from a United Nations World Population Prospects 2019 CSV via D3’s `csv` function, and the view is updated through React state.

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars with no axes, making the ranking immediately visible through bar lengths. Built with React and D3 v5, it loads United Nations World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and slices the first 10 rows. The SVG rendering uses `d3.scaleBand` for the y-axis country positions and `d3.scaleLinear` for the x-axis population widths, with each bar drawn as a `<rect>` element.

Fork of Fork of Rendering Data with React & D3

This visualization displays UN population data for 2020 as a horizontal bar chart, where each bar’s length corresponds to a country’s population. The chart is built with React and rendered as SVG, using D3’s `csv` loader, `scaleBand` for the y-axis, and `scaleLinear` for the x-axis. The example demonstrates how D3 utilities handle data loading and scaling, while React manages the component state and maps each data row to an SVG `<rect>`.

Fork of Pathetic Bar Chart

Fork of Rendering Data with React & D3

This example renders a radial burst of CSS named colors, loaded from a CSV file via D3’s `csv` utility. React manages the component state and lifecycle, while D3’s `pie` and `arc` functions compute and draw each colored slice as an SVG path. The visualization uses d3.v5, React 16.9, and SVG output, with arcs filling the full 960 by 500 pixel canvas from the center outward.

Fork of React Starter

This example demonstrates a React component that renders an interactive SVG circle. The circle follows the mouse cursor across a 960-by-500 viewport, updating its position in real time through React state management. The code uses React hooks (`useState`, `useCallback`) to track mouse coordinates and re-render the circle on every `onMouseMove` event. The SVG circle is rendered with a fixed radius of 30 pixels, and the initial mouse position is set to the center of the viewport. The project relies on React 16.13.1 and ReactDOM for rendering the component into the DOM.

Fork of HTML Starter

This example demonstrates a minimal setup for fetching and displaying data from a remote CSV file using native browser APIs. The page renders no visible content beyond a large empty body, as the script defines an `async` function that fetches text from a GitHub gist URL but never calls it or processes the response. The code uses the Fetch API to retrieve the CSV, though the function is misspelled as `asyc` and remains unused. It relies on plain HTML, CSS, and JavaScript, with no external libraries, serving as a basic template for future data visualization work.

Fork of Smiley Face Part V

This example shows a smiley face built from modular React components, with a yellow circular face, two black radial-gradient eyes, and a curved mouth arc. It demonstrates splitting D3-based SVG rendering into separate ES6 module files, using React fragments in the eyes component and a shared face container for positioning. The code uses React 16.9, D3 v5’s `arc()` API for the mouth path, and renders everything into an SVG via `ReactDOM.render`. All geometry values are defined as constants in the main `index.js` file.

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as SVG, with two eyes, a curved mouth, and a thick black outline. It builds the face from reusable React components, including `BackgroundCircle`, `Eye`, and `Mouth`, and positions them within a centered `<g>` element. The mouth uses D3’s `arc` generator to create a semicircular path, while the eyes and background are plain SVG circles. The project runs on React 16 and D3 v5, with coordinates and sizes defined as constant variables in the main React component.

Fork of Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows, moving them up and down. The example demonstrates basic D3.js DOM manipulation by selecting the SVG element, appending groups, and building the face from circles, rectangles, and an arc path. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` methods to create the two-second eyebrow animation loop, with dimensions defined via attributes on the root SVG.