Kwame Porter Robinson

@robinsonkwame·7 public vizzes

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for individual flowers, with color encoding species. Built with React and D3 v5, it uses `scaleLinear` for axes and `scaleOrdinal` for the categorical color scale. A custom `ColorLegend` supports interactive hover, which dims non-matching points and re-renders the highlighted subset. Axes are generated via reusable `AxisBottom` and `AxisLeft` components, while SVG circles serve as marks.

Dec 16, 2022

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numerical attributes appear on the X and Y axes via dropdown menus. The chart renders data points as SVG circles, with axes and labels updating dynamically. Built with React and D3.js, it utilizes `scaleLinear` for axis scaling, custom `AxisBottom` and `AxisLeft` components for ticks, and the `Marks` component for rendering circles with tooltips. The data is loaded asynchronously from a CSV file using D3's `csv` function.

Dec 16, 2022

Loading thumbnail…

Scatter Plot with Menus

Two dropdown menus control which Iris flower measurements appear on the scatter plot’s x- and y-axes, with labels updating accordingly. Built with React and D3 v5, the visualization loads the classic Iris Dataset via `d3.csv`, maps the numeric fields to linear scales using `scaleLinear` and `extent`, and renders SVG circles for each data point. The `Dropdown` and `Marks` components handle the interactive selection and circle placement, while formatted tick labels and axis titles clarify the currently chosen attributes.

Dec 16, 2022

Loading thumbnail…

Menus with React

This example shows a pet-selection interface built with React, where users choose from a dropdown menu of goldfish, dog, or cat. It demonstrates state management with React’s `useState` hook, rendering a `<select>` element and dynamically highlighting the selected option. The app uses ReactDOM to render the component tree, with the dropdown options defined as an array of value-label pairs. The selected value is logged to the console, and the interface updates live as the user changes the selection.

Dec 16, 2022

Loading thumbnail…

Rendering data with React

This example displays a pie chart of CSS named colors loaded from a CSV file, with each slice filled according to its corresponding hex value. D3’s `csv` and `pie` utilities parse the data and compute arc angles, while `d3.arc` generates the SVG path geometries. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, and React maps the pie slices to SVG `<path>` elements. The visualization uses an SVG rendering approach with a fixed width and height.

Dec 15, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to show the relationship between automobile horsepower, weight, and model year, with points colored by country of origin and sized by weight. The data comes from the UCI Machine Learning Repository’s Auto MPG dataset. It is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries alongside d3.v5 for CSV loading, and uses the `vl.markCircle` and `vl.encode` methods to define the marks and channels. A custom config adjusts axis tick and label styling, with tooltips provided by the Vega Tooltip handler.

Dec 15, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates fetching and displaying the raw text content of a CSV file in the browser console. The code uses the `fetch` API to asynchronously retrieve the `cssNamedColors.csv` dataset from a GitHub Gist, then parses the response as plain text using the `text()` method. No data transformation or visualization occurs; the program simply logs the entire CSV contents to the console for inspection, illustrating a basic pattern for loading external tabular data before any parsing or charting takes place.

Dec 15, 2022