ne5ls7on@gmail.com

@NnAracy·6 public vizzes

3

This example demonstrates the basic structure of a VizHub V3 project, which serves as a blank starting point for interactive coding. The code exports a `main` function that receives a container DIV and an options object with `state` and `setState`, enabling the use of interactive widgets for live adjustment of properties like font size. The runtime environment supports continuous hot reloading, allowing developers to see immediate visual feedback as they modify values directly in the editor. This foundational setup illustrates the core API for building stateful, interactive visualizations without requiring an `index.html` file.

Sep 27, 2024

Loading thumbnail…

2

This interactive parallel coordinates chart visualizes the classic Iris dataset, showing how four flower measurements (sepal and petal length/width) relate across three species. Users can reorder the axes by selecting different dimensions from dropdown menus, with each axis using its own linear scale via `d3.scaleLinear`. The chart uses `d3.line` to draw individual paths, colored by species using `d3.scaleOrdinal`, and animates transitions between axis configurations.

Sep 22, 2024

Loading thumbnail…

1

This interactive scatter plot visualizes the classic Iris dataset, allowing users to dynamically explore relationships between sepal and petal measurements. The D3.js visualization renders circles colored by species, with dropdown menus to switch the variables mapped to the X and Y axes. Using D3's `scaleLinear`, `axisBottom`, `axisLeft`, and `transition`, the plot smoothly animates data points between configurations when selections change. The legend and axis labels update dynamically based on the user's chosen attributes.

Sep 14, 2024

Loading thumbnail…

new

This example demonstrates how to construct a color legend using the d3.legend library, pairing it with a quantized color scale from the D3.js API. It renders seven circles whose radii and fill colors correspond to an array of data values, mapped through the color scale to a nine-step Blues palette. The SVG output visually ties the legend's swatches to the circles' color encoding.

Sep 13, 2024

Loading thumbnail…

test

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any combination of sepal and petal measurements across three species. Dropdown menus control which numeric attributes appear on the x and y axes, with points colored by species using d3.scaleOrdinal and d3.schemeCategory10. The visualization uses D3 v7 to load CSV data, manage scales, render SVG circles, and update axes via d3.axisBottom and d3.axisLeft on selection changes.

Sep 11, 2024

Loading thumbnail…

hw1

This visualization displays the classic Iris flower dataset, showing all 150 samples as a grid of solid squares. The code loads the CSV data using `d3.csv`, converts the numeric columns, and renders each row as a 300-by-300-pixel rectangle via D3’s data join and `svg.selectAll('rect')`. While an `xScale` is defined with `d3.scaleLinear` based on sepal length, the rendered rectangles do not use any positional encoding, resulting in a static, uniform arrangement without visual differentiation between flower species.

Sep 11, 2024