jth500

@jth500·16 public vizzes

world map

This example displays a world map rendered as an SVG using React and D3. It visualizes geographic country boundaries from the World Atlas TopoJSON dataset. The code uses `d3.json` to load the data, `topojson.feature` to convert it to GeoJSON, and renders the resulting features with a `<g className="marks">` group, though the map itself is not yet drawn. The visualization is styled with Poppins font and a clean, minimal layout.

Apr 28, 2023

Loading thumbnail…

adjust to time

This example visualizes temperature readings over time as a line chart, with the x-axis displaying the day of the week derived from timestamps. It uses a time-based scale for the x-axis and a linear scale for temperature, with axes rendered via custom SVG components. The data is loaded from a CSV file using d3.csv, and the line is drawn with d3.line, while React manages the SVG rendering.

Apr 28, 2023

Loading thumbnail…

time

A time-series scatterplot displays temperature readings over the course of a week, with each point representing a timed measurement. The visualization uses a time-scaled x-axis and linear y-axis with labeled ticks to orient the viewer. Data comes from the San Francisco weekly temperature CSV, loaded asynchronously via `d3.csv` in a custom React hook. React components render SVG circles and axes using `d3.scaleTime` and `d3.scaleLinear`, with axis tick generation handled by reusable `AxisBottom` and `AxisLeft` components.

Apr 28, 2023

Loading thumbnail…

Fork of Stylized Line asdsad

This visualization displays temperature readings over time as a smooth, curving line, plotted on a scatter plot of the Data Canvas Sense Your City dataset. The chart uses a natural curve through the data points to create a stylized representation of the weekly temperature trend, with circular marks available for individual data points but currently commented out. The React-based implementation leverages D3 v5 modules, including `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `curveNatural` for line smoothing, all rendered as SVG elements within a standard chart frame.

Apr 28, 2023

Loading thumbnail…

Fork of Refactored Bar Chart

This example visualizes the Iris flower dataset, plotting sepal length against sepal width as a scatter plot of blue circles. The chart uses React components to render SVG elements, with D3’s `scaleLinear` and `min`/`max` functions determining the axis domains. The `AxisBottom` and `AxisLeft` components generate tick marks and labels, while the `Marks` component maps each data point to a circle. Data is loaded asynchronously via D3’s `csv` from a GitHub-hosted CSV file, and axes are styled with CSS classes.

Apr 27, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a blank page, styled with the Poppins font from Google Fonts. It demonstrates a minimal setup combining HTML, CSS, and JavaScript, with the message rendered in a large, responsive font size. The code uses React and ReactDOM from UMD builds, along with D3 v5, though the visualization itself is static and does not employ any data-driven or dynamic drawing APIs.

Apr 25, 2023

Loading thumbnail…

Fork of Axes with React & D3

This example renders the top 10 most populous countries as a horizontal bar chart using React and D3 v5. The bars and manually constructed axes are drawn as SVG elements inside a React component, with scales created via `d3.scaleBand` and `d3.scaleLinear`. Tick marks and labels are generated by iterating over the scales' domains, and the data comes from the United Nations World Population Prospects 2019 CSV. The chart displays population values for 2020, with no axes library used, only custom rendering.

Apr 25, 2023

Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous countries as a horizontal bar chart, using React to render SVG elements and D3 (v5) for scales and data loading. The `xScale` and `yScale` are created with `scaleLinear` and `scaleBand`, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. Data comes from the United Nations World Population Prospects 2019 CSV, loaded via D3’s `csv` function, and is sliced to the first ten rows for display.

Apr 23, 2023

Loading thumbnail…

Marign Convention

A horizontal bar chart displays population estimates for the ten most populous countries, using data from the UN Population 2019 dataset loaded via D3’s `csv` utility. React manages the component state and renders SVG elements, while D3’s `scaleBand` positions the categorical y-axis and `scaleLinear` maps population values to bar widths. Axis ticks are generated with `xScale.ticks()` and rendered as SVG lines with yellow strokes, and country labels appear along the y-axis. The visualization uses fixed margins and an inner chart area of 960 by 500 pixels.

Apr 23, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a bar chart of the top 10 countries by population from the UN Population 2019 dataset, rendered as SVG rectangles. It uses React hooks (useState, useEffect) to load and store CSV data via d3.csv, then maps each country to a rect with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. The chart updates after data is fetched and displayed as a loading message beforehand. React’s declarative rendering drives the SVG output, while D3 handles the data parsing and scales.

Apr 23, 2023

Loading thumbnail…

Fork of Loading Data with React & D3

A circular pie chart visualizes CSS named colors, rendered as an SVG with React and D3. The code loads color data from a CSV file using D3's `csv` utility and stores it in React state via `useState`. Each color is drawn as a pie slice using D3's `arc` function, with the fill color set from the hex value in the data. The chart is centered in the browser window, with a loading message displayed until the data is fetched.

Apr 23, 2023

Loading thumbnail…

Fork of Follower 2

This example renders a single circle that follows the mouse cursor across an SVG canvas sized to the browser window. The circle's position updates on every mouse movement using React's state management through the `onMouseMove` handler. The visualization uses React 16.9 with hooks (`useState`), ReactDOM to mount the component, and D3 v5 (imported as `d3`) to fetch a CSV of CSS named colors from a GitHub gist, though the fetched data is not used in the displayed output.

Apr 22, 2023

Loading thumbnail…

Follower 2

This example shows a React application that renders a single SVG circle that follows the user's mouse cursor across the full browser viewport. The circle updates its position in real time using React's `useState` hook and an `onMouseMove` event handler that reads the cursor's client coordinates. The rendering relies on `ReactDOM.render` to mount the component to the HTML root element, while D3 v5 is loaded but not utilized in the visible interaction. The SVG viewport dimensions are set dynamically from `window.innerWidth` and `window.innerHeight`.

Apr 22, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates three core methods for loading and parsing CSV data in D3, displaying file size, row count, and column count as large, plain text. Using CSS Named Colors data from a GitHub gist, it shows the concise `d3.csv` API first, then provides commented alternatives using `fetch` with `async`/`await` and `d3.csvParse`. The visual output is purely typographic, rendered in a `<pre>` element, emphasizing the programming workflow over chart construction. The code relies on D3's `d3.csv` and `d3.csvFormat` functions, alongside standard JavaScript fetch operations.

Apr 22, 2023

Loading thumbnail…

React follower

A smiling face drawn in SVG follows the mouse cursor, with its eyes, mouth, and nose positioned relative to the window center. The React component renders the face using static JSX elements, while the translucent background circle and facial features are drawn directly with SVG primitives. The code imports React and ReactDOM to mount the app, and uses D3 v5 only for the bundled `d3.min.js` reference, though no D3 API is actually invoked. Mouse tracking is implied by the README, not implemented in the visible script.

Apr 22, 2023

Loading thumbnail…

Smiley Face Part II

This example renders a full-screen smiley face using React and D3, centered within an SVG canvas sized to the browser window. The face consists of reusable components: a yellow background circle with a black stroke, two eyes positioned symmetrically, and a mouth drawn with a D3 arc path. A polygon forms a nose above the mouth. The layout positions all features relative to the window center, with radii and offsets calculated dynamically from the viewport height.

Apr 22, 2023