R

RedSorrel

@RedSorrel·20 public vizzes

Loading thumbnail…

Polished Stylized Scatter Plot with Color Legend

This interactive scatter plot explores the Iris dataset, displaying relationships between sepal and petal measurements with points colored by species and a corresponding legend. Users can select which attributes to plot on the x and y axes via dropdown menus, dynamically updating the visualization. Built with React and D3 v7, the chart renders as SVG, using `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and custom React components for axes, marks, and legends.

Loading thumbnail…

Polished Stylized Scatter Plot with Menus with Color

This interactive scatter plot explores the Iris dataset, allowing users to select which flower measurements are plotted on the x and y axes via dropdown menus. The visualization is built with React and D3.v7, using `scaleLinear` and `scaleOrdinal` to map data to positions and colors, with SVG circles for data points and custom components for axes and controls.

Loading thumbnail…

Polished Stylized Scatter Plot with Menus

This interactive scatter plot displays Fisher's Iris dataset, allowing users to select any of the five attributes for both the X and Y axes via dropdown menus. The visualization updates the axes, axis labels, and data point positions dynamically. Built with React and D3 v7, it uses `scaleLinear` for axis scaling and SVG circles for rendering data points. The chart features a polished Poppins font, styled tick lines, and a color scheme of teal and gray.

Loading thumbnail…

Stylized Scatter Plot with Menus

This example presents an interactive scatter plot of Fisher’s Iris dataset, letting users switch which flower measurements appear on the x- and y-axes via two dropdown menus. React manages the selected attributes and re-renders the SVG visualization, which is built with D3 scales (e.g., `scaleLinear`) and custom React components for axes and marks. Hovering over a circle reveals a tooltip with the formatted value of the x-axis variable for that point.

Loading thumbnail…

Menus with React

This example shows a simple pet-selection interface built with React. It demonstrates a reusable `Dropdown` component that renders a native `<select>` element, mapping an array of `{ value, label }` options into `<option>` tags. The component uses React’s `useState` hook to track the currently selected value, updates the selection via an `onSelectedValueChange` callback, and logs the chosen value to the console. The styling sets large fonts for the label and select, with a hidden body margin and overflow.

Loading thumbnail…

World Map with React and D3

This example displays a world map rendered with a Natural Earth projection, showing landmasses in teal with contrasting graticule lines and interior boundaries. The visualization is built using React components that leverage D3’s geographic utilities, including `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, to project GeoJSON features and generate the graticule. Data is sourced from the World Atlas TopoJSON, which is converted to GeoJSON via the `topojson` library’s `feature` and `mesh` functions, and served as an SVG element.

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature trends in San Francisco using data from the Data Canvas Sense Your City dataset. The chart displays time on the x-axis and temperature on the y-axis, with a smooth curved line connecting data points and circles marking each observation. Rendered as SVG in React, the visualization uses D3's `scaleTime`, `scaleLinear`, `line`, and `curveNatural` APIs to construct the plot, with custom `AxisBottom` and `AxisLeft` components handling tick generation. The Poppins font and teal color scheme create a clean, modern aesthetic.

Loading thumbnail…

Working with Time Scatter Plot

A scatter plot displays temperature readings over time, with each circle representing a single observation. The visualization uses React and D3 v7, leveraging `d3.scaleTime` and `d3.scaleLinear` for axes and `d3.csv` to load the Data Canvas Sense Your City dataset. SVG circles render the points, with hover tooltips showing the formatted time via `timeFormat`. The axis components are custom React functions, and the plot includes labeled axes for time and temperature.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping sepal length on the x-axis against sepal width on the y-axis with teal circular marks. Built with React and D3 v7, it uses `scaleLinear` to position points on an SVG canvas, with custom `AxisBottom` and `AxisLeft` components rendering tick marks and labels. The code loads CSV data asynchronously via `csv` and `useData`, applies a Poppins font, and includes tooltips using SVG `<title>` elements. Axis labels are rotated for vertical orientation, and the plot employs a "Loading..." fallback while fetching data.

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the populations of ten countries using data from the United Nations World Population Prospects for 2020. Horizontal bars are scaled with d3.scaleBand and d3.scaleLinear, with axes rendered through custom React components. The visualization is built with React and D3 v7, rendering to SVG, and includes formatted tick labels using d3.format and hover tooltips via the SVG title element.

Loading thumbnail…

Refactored Bar Chart

This visualization presents a horizontal bar chart comparing the 2020 populations of ten countries, sourced from UN World Population Prospects data on GitHub. Built with React and D3 v7, it renders SVG marks using scales: `scaleBand` positions countries along the y-axis, while `scaleLinear` maps population values to bar widths. The chart explicitly defines reusable components for axes and marks, with `AxisBottom` generating ticks and `AxisLeft` labeling country names, all within a fixed viewport. The data loads asynchronously via `csv`, showcasing a clean, modular refactoring approach.

Loading thumbnail…

Axes with React & D3

A horizontal bar chart displays United Nations population estimates for ten countries in 2020, with D3 scales mapping country names to the y-axis and population values to the x-axis. The example integrates D3's `scaleBand`, `scaleLinear`, and `max` functions within a React component, rendering SVG elements through ReactDOM. CSV data loads asynchronously via `d3.csv`, and the chart draws tick marks, labels, and bars using SVG `<line>`, `<text>`, and `<rect>` elements, with axes positioned using explicit margin calculations.

Loading thumbnail…

UN World Population Prospects 2020

This interactive bar chart displays the top ten countries by UN-estimated population for 2020. Each horizontal bar’s length is scaled to the population value, with country labels on the vertical axis. The visualization is built with React and D3 v7, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG elements within a React component.

Loading thumbnail…

Fork of Rendering Data React & D3

This example displays all named CSS colors as a radial burst of pie slices, each filled with its corresponding color, creating a full circular spectrum. It loads color data from a remote CSV file using D3’s `csv` utility, then uses React state (`useState`, `useEffect`) to fetch and store the data. The visualization is rendered as an SVG, with D3’s `pie` and `arc` functions computing the slice angles and paths, all positioned around a central point.

Loading thumbnail…

Rendering Data React & D3

This example displays CSS named colors as horizontal stacked bars, with each row rendered as a div whose background color corresponds to the RGB hex value from the dataset. It uses React hooks (useState, useEffect) to fetch and store data loaded via d3.csv from a gist, and conditionally renders a loading message until the data arrives. The visualization maps each color record to a fixed-width, 4-pixel-high row, producing a dense, rainbow-like strip.

Loading thumbnail…

White-tailed Deer in KY by County

This visualization plots White-tailed Deer observations across Kentucky counties over time, using a scatterplot where each point represents an observation dated by year-month on the x-axis and county on the y-axis, with point color and size encoding the county and month respectively. The data comes from an iNaturalist observation export, loaded via `d3.csv`. The chart is built using the vega-lite-api, which wraps Vega-Lite and Vega, with a custom tooltip handler and a dark-themed configuration for improved readability. The view renders as an SVG and auto-fits to the window size.

Loading thumbnail…

Vega-light Scatter Plot Course 3:40

This interactive scatter plot visualizes automobile horsepower across different countries of origin, with each point representing a vehicle from the UCI Auto MPG dataset. The visualization uses the vega-lite-api to construct a Vega-Lite specification, which is then rendered as an SVG canvas via the Vega rendering engine. Tooltips display the car model name when hovering over data points. The plot adapts to fill the browser window, and the config file customizes axis labels and colors for improved readability against the dark background.

Loading thumbnail…

Loading and Parsing CSV data

This example shows how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count in a large text element. It uses `d3.csv` to fetch and parse the data asynchronously, then formats the results with `d3.csvFormat` and `data.length`/`data.columns.length`. The data source is a GitHub-hosted CSV of CSS named colors. A commented-out alternative demonstrates manual fetching with `fetch` and `d3.csvParse`. The visualization is minimal, focusing on confirming data loading success through summary metrics.

Loading thumbnail…

Movement of circle via mouse

A single circle tracks the user's mouse in real time across a full-browser SVG canvas, updating its center position on every pointer movement. Built with React, the app uses the `useState` hook to store mouse coordinates and a `useCallback` event handler for `onMouseMove`. The circle's `cx` and `cy` attributes are bound to the current state, and React re-renders the SVG element accordingly. The initial circle is positioned at the viewport center, and the circle radius is fixed at 30 pixels.

Loading thumbnail…

Fork of HTML Starter

This example renders a stylized cartoon face composed of SVG shapes in a React component. The face features a yellow circular background, two empty eyes, and a mouth drawn as a d3 arc path. All elements are positioned and sized through props passed from the main App component. The code uses React 16.7 to manage the component hierarchy and d3.arc to generate the mouth’s path data, with the final SVG output centered within a 960x500 viewport.