Skip to main content
Log in
B

brad1024

@brad1024·8 public vizzes

Loading thumbnail…

parallel coordinate plot

This parallel coordinate plot compares four numeric attributes of Iris flowers—sepal length, sepal width, petal length, and petal width—across three species, using color-coded polylines to reveal clustering and separability. Users can drag any vertical axis to reorder the dimensions, with the lines and scales updating live. The visualization loads data from a CSV file and renders as SVG, built with d3.scalePoint, d3.scaleLinear, d3.axisLeft, d3.drag, and d3.line within a React framework.

Oct 20, 2022
Loading thumbnail…

0816096

This interactive scatterplot visualizes the classic Iris dataset, comparing four floral measurements across three species. Users select which measurement to plot on each axis via dropdown menus. The D3.js code uses `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` to build the chart, with circles transitioning from the center to their positions over a 2-second animation. A legend of colored dots identifies each species.

Oct 20, 2022
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two attribute columns by selecting them from dropdown menus. The chart updates dynamically, with points animating to their new positions over two seconds. Built with D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical color mapping, and `dropdownMenu` for the interactive controls. Data is loaded from a local CSV file containing sepal and petal measurements for three Iris species.

Sep 29, 2022
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot displays the classic Iris dataset, showing sepal length and sepal width for three flower species, with each species color-coded (blue, red, green) as points on an SVG canvas. The visualization is built with D3 v5, using `scaleLinear` for axes, `axisBottom` and `axisLeft` for grid lines, and `csv` to load the data from a local file. The code calculates the value ranges dynamically with `extent` and applies `.nice()` for axis scaling, while circle opacity is set globally via CSS.

Sep 28, 2022
Loading thumbnail…

Fork of Auto MPG Summary

This example displays a plain-text summary of the Iris dataset, showing the total row count, column count, file size in kilobytes, and the first ten rows formatted as JSON. The visualization uses d3.csv to load the data from `iris.csv` and d3.csvFormat to calculate the data’s size. It renders the text into `pre` elements appended to the page body, with dark styling from the linked stylesheet. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, though the code loads the Iris sample instead.

Sep 28, 2022
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, summarizing the dataset’s size, row count, and column count in a large text display. It uses D3 v5’s `d3.csv()` method, which returns a promise, to fetch the auto-mpg dataset from VizHub. The code also shows commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, highlighting different ways to handle asynchronous data loading in a React-based project.

Sep 28, 2022
Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub demonstrates the basic structure of a D3.js visualization using ES6 modules. It renders a static text message, centered via CSS, into an HTML pre element. The code imports the `select` function from D3 and a local module to compose the message, showcasing how to combine external library imports with local JavaScript files. The example relies on D3 v5 loaded from a CDN, with no dynamic data or interactive features.

Sep 20, 2022
Loading thumbnail…

Cars Reports

This example demonstrates how to export and import data from local ES6 modules in a VizHub project, displaying a static message on the page. It uses D3 loaded via UNPKG, though the visible code does not employ any D3 methods—only the import syntax is shown. The app imports an array of car objects from `cars.js` and a string from `myMessage.js`, but the `index.js` file leaves both the imported data and message unused, with placeholder text. The HTML contains a single `<pre>` element whose content is updated via the DOM API, styled by `styles.css`. The dataset includes five car records with year, make, model, and price fields.

Sep 20, 2022