erin1234567

@erin1234567·5 public vizzes

d3-force

A force-directed graph rendered in SVG displays 410 nodes and 1,217 links from the Les Misérables character co-occurrence dataset. Nodes are colored by group using `d3.schemeCategory10`, based on the number of links each character has. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to compute layout, while `d3.drag` enables node repositioning and `d3.zoom` supports panning and scaling. Link width reflects connection weight.

Nov 4, 2020

Loading thumbnail…

Parallel Coordinates

This interactive parallel coordinates plot visualizes the classic Iris dataset, showing the relationships between sepal and petal measurements across three flower species. The code uses D3.js (v3) to render an SVG chart with lines colored by species (setosa, versicolor, virginica) via an ordinal color scale. Users can drag axis labels to reorder dimensions, dynamically rearranging the lines and transitions. The visualization includes a legend, background lines for context, and brushing functionality for each axis, demonstrating multidimensional data exploration in a React framework.

Oct 22, 2020

Loading thumbnail…

Parallel Coordinates

This visualization uses parallel coordinates to compare country-level indicators like happiness, environmental engagement, and religious participation, with each country represented by a drawn path. The code loads data from a CSV file using `d3.csv` and renders the chart with D3 v3’s SVG and animation support. Users can drag any axis to reorder dimensions, and the `d3.svg.brush` component enables filtering along individual axes, temporarily hiding background paths during interaction. The visualization also uses ordinal and linear scales to map categorical dimensions and quantitative values to screen coordinates.

Oct 22, 2020

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing measurements of sepal and petal length and width for three iris species, with each species distinguished by color. The visualization uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the plot as SVG circles. Users can select any of the four measurement variables for either the x-axis or y-axis through dropdown menus built with d3.select and d3.merge, which triggers complete re-renders via the render function. A legend displays the species color mapping using d3.scaleOrdinal.

Oct 4, 2020

Loading thumbnail…

Iris3

This interactive scatter plot displays the Iris dataset from UCI Machine Learning Repository, showing all pairwise comparisons between sepal and petal measurements. Users can change which measurements appear on the x and y axes via dropdown menus. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and d3.axisBottom/axisLeft for tick marks, rendering circles as SVG elements. Data loads asynchronously via d3.csv from the iris dataset.

Oct 3, 2020