shimos12468

Bar chart with react and D3

This example displays a horizontal bar chart of the top ten countries by population for 2020, using React to manage state and render the SVG, while D3 provides the scales and data loading. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.csv` to fetch data from a GitHub Gist. Axis labels and tick marks are generated manually with React components and D3’s tick function, with no additional libraries beyond the core React 16.9 and D3 v5 APIs.

Jun 6, 2021

Fork of Vega-Lite API Template

This example visualizes the relative proportions of religious affiliations across countries using a bubble chart, where each bubble’s size encodes population and its position maps country and religion. The visualization is built with the Vega-Lite API, using `vl.markCircle()`, `vl.x()`, `vl.y()`, and `vl.size()` to encode fields, while a tooltip displays population values. Data is loaded asynchronously via `d3.csv` from a remote URL, and the chart renders with d3.v5, Vega, Vega-Lite, and Vega-Tooltip, with custom styling applied through a config object.

Jun 6, 2021

DV PROJECT

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions as circles in a 2D coordinate system. The visualization uses a D3.js ordinal color scale to distinguish the three iris species as categorical data. Users can select which attributes to display on the x and y axes through dropdown menus. The chart is rendered as an SVG using React, with each data point rendered as a circle element that includes a tooltip. A color legend enables user interaction by highlighting all data points belonging to a selected species.

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying sepal and petal measurements as a series of circles. Two dropdown menus allow the user to independently select which quantitative or categorical attribute is plotted on the x- and y-axes. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.extent` to map data to SVG coordinates, while axis components and marks are rendered as reusable React functions. Data loading is handled asynchronously with `d3.csv`, and the chart updates dynamically when menu selections change.

React Starter

This example demonstrates a React-controlled dropdown menu for selecting a pet, with the chosen value displayed as a label above the selection. The interface updates the selected option in real time through React’s `useState` hook, passing the current value and an update function to a reusable `Dropdown` component. The component maps over an array of pet options to generate `<option>` elements, using the `selected` attribute to highlight the active choice. The code relies on React 16.9, ReactDOM, and d3.v5, though the actual visualization is minimal—just the interactive form controls rendered as SVG-ready HTML.

world Map

This visualization displays a world map using a natural Earth projection, rendered with SVG paths in a React component. The map shows landmasses filled in teal and country borders drawn as interior mesh lines, with graticule lines and a light gray sphere outline for context. The code uses d3.geoNaturalEarth1 and d3.geoPath for projection and path generation, with topojson to parse the world-atlas countries-50m dataset. The visualization is built with React and ReactDOM, dynamically loading geographic data via a custom useData hook.

Fork of load data

This visualization displays a color wheel constructed from a CSV dataset of named CSS colors, with each color represented as a slice of a pie chart. The code uses React hooks (useState and useEffect) to asynchronously load data via d3.csv, then maps it into arcs using d3.pie and d3.arc. The computed SVG paths are rendered inside React’s virtual DOM, with a d3 pie generator assigning equal value to each row. The chart initially shows a "Loading..." message until the external dataset arrives.

load data

This example visualizes CSS color data loaded from a CSV file, displaying each color as a thin horizontal strip that fills the screen. The visualization shows the raw color values in sequence, with each row’s background color set directly from the hex value in the data. React manages the component state and rendering, while d3.csv fetches and parses the remote CSV data. The code uses React hooks (useState, useEffect) to handle asynchronous data loading, and the strips are rendered as divs with inline styles derived from the d3-parsed data.

fitch

This example displays the text “fitch” in massive, 13em type that nearly fills the browser window, centered against a white background. It loads a CSV file containing CSS color names and values from a GitHub gist, then logs a summary of the dataset to the console, including the formatted file size in kilobytes, row count, and column count. The code uses D3 v6’s `d3.csv` and `d3.csvFormat` to fetch and measure the data, while the page layout relies on plain CSS.

circle movment

A single dark circle follows the mouse cursor across an SVG viewport, creating a direct and immediate interactive connection between user input and visual output. Built with React hooks for state management and event handling, the circle’s position updates on every mousemove event, while D3’s `arc` generator defines a static mouth shape visible in the initial markup. The visualization renders exclusively through SVG elements, with React managing the circle’s coordinates and D3 providing geometry utilities. This minimal example demonstrates the seamless integration of React’s declarative rendering with D3’s computational functions for interactive graphics.

Fork of React Starter

This example displays a static web page with the message “Hello React!” centered in large text. It loads React and ReactDOM from a CDN, then uses `ReactDOM.render` to mount a React component into the `#root` div. The component, defined with JSX syntax, returns a styled `<div className="message">`. No data source or interactive behavior is present; the visualization relies solely on the React library’s rendering pipeline to produce the output.

Jun 1, 2021