chamce

@chamce·12 public vizzes

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the X and Y axes via dropdown menus. The visualization updates in real time, displaying sepal and petal dimensions with axis labels and tooltips. Built with React and D3 v5, it uses `scaleLinear` for axis scaling, SVG circles for data points, and custom components for axes and marks. The chart renders as a static SVG with the data loaded from a remote CSV file.

Jul 9, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal length, sepal width, petal length, and petal width. Users can select which attributes to plot on the x-axis and y-axis via dropdown menus, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses d3.scaleLinear for scaling, d3.extent for domain calculation, and SVG circles for data points. Each point includes a tooltip showing its x-axis value. The data loads asynchronously from a CSV file using d3.csv.

Jul 9, 2021

Loading thumbnail…

Menus with React

This example demonstrates a pet-selection menu built with React and a reusable Dropdown component. It shows how React state manages the chosen option, displaying a label and a styled `<select>` element. The code uses React’s `useState` hook to track the selected value, initializing it to "hamster," and passes options as an array of value-label pairs to the Dropdown component. ReactDOM renders the App to the DOM, while the Dropdown’s `onChange` event updates state via a callback prop.

Jul 9, 2021

Loading thumbnail…

World Map

A world map visualization displays country borders and landmasses using a Natural Earth projection. The map renders land areas in teal, interior borders in a lighter stroke, and includes graticules and a sphere outline for geographic context. Built with React and D3 v5, it uses `d3.geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project shapes, while TopoJSON processes the world-atlas dataset to extract land features and country boundaries. The SVG output updates asynchronously after loading the geographic data.

Jul 8, 2021

Loading thumbnail…

Working with Time

This visualization shows temperature readings across a week in San Francisco as a smooth, curved line chart. Time runs along the x-axis with day labels, while temperature appears on the y-axis, both using scales from `d3.scaleTime` and `d3.scaleLinear`. The line is generated with `d3.line` and `curveNatural`, and rendered as SVG paths within a React component. Data comes from a CSV file loaded via `d3.csv`, with axes built by custom React components that map ticks using D3's scale methods.

Jul 8, 2021

Loading thumbnail…

Stylized Scatter Plot

A scatter plot of the Iris Dataset reveals the relationship between petal length and sepal width. The visualization uses React and D3 v5 with SVG rendering, scaling both axes linearly via `d3.scaleLinear` and formatting tick labels with `d3.format`. Stylized elements include a Poppins font, teal circular marks, and custom axis components. Data loads asynchronously using D3's `csv` parser.

Jul 8, 2021

Loading thumbnail…

Stylized Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, ordered by population, with a labeled x-axis. It uses React with D3.js scales (`scaleBand`, `scaleLinear`) to map country names and population values, and renders SVG rectangles via the `Marks` component. The data, sourced from the UN World Population Prospects 2019, is loaded using D3's CSV loader, and the x-axis ticks are formatted with `.format('.2s')` to display values in billions.

Jun 29, 2021

Loading thumbnail…

Rendering Data with React & D3

This example visualizes a dataset of CSS named colors as a radial burst, with each color occupying an equal arc segment in a pie chart. The visualization is rendered as an SVG using React for component-based UI structure, while D3.js utilities handle CSV loading (`d3.csv`) and pie geometry calculation (`d3.pie` and `d3.arc`). The color of each path element is derived from the `'RGB hex value'` column in the data, producing a circular spectrum of named colors. React state management loads the external CSV asynchronously before rendering.

Jun 25, 2021

Loading thumbnail…

Rendering Data with React

This example displays all CSS named colors as horizontal stripes, loading color data from a CSV file using d3.csv. The React component uses the useState and useEffect hooks to fetch the data and render each row as a colored div element. The app shows a loading message until the data arrives, then maps over the array to create stacked color bands with heights of 5 pixels each. The implementation combines React's declarative rendering with D3's data loading utilities (d3.csv) and demonstrates the message export that reports file size, row count, and column count.

Jun 25, 2021

Loading thumbnail…

Smiley Face Part VI

A grid of eighteen randomly generated smiley faces demonstrates component-based data visualization with React and D3. Each face is composed of separate React components—BackgroundCircle, Eyes, and Mouth—that accept randomized numeric props for stroke width, eye offset, eye radius, and mouth dimensions. The Mouth component specifically uses d3.arc with outerRadius and innerRadius to draw a crescent-shaped path. Faces are rendered as SVG elements through a FaceContainer that applies a translate transform, allowing each instance to be positioned independently while sharing identical dimensions.

Jun 19, 2021

Loading thumbnail…

Mouse Follower

A React application renders an SVG circle that follows the mouse cursor across a 960 by 500 viewport. The component uses React hooks (`useState`, `useCallback`) to track mouse coordinates via the SVG `onMouseMove` event, updating the circle's `cx` and `cy` attributes. The initial position is centered, and the circle responds to pointer movement within the SVG element. Rendering uses React DOM with the production build of React 16.9.0.

Jun 19, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size in kilobytes, row count, and column count as text. The code uses `d3.csv` to fetch and parse the CSS Named Colors dataset, then `d3.csvFormat` to measure the formatted size. A commented alternative shows the same task using the Fetch API with `async`/`await` and `d3.csvParse`. The data is rendered into a large `<pre>` element using plain text manipulation.

Jun 19, 2021