The-World-Muda

@The-World-Muda·14 public vizzes

Force Directed Graph

A force-directed graph visualizes node-link relationships alongside an adjacency matrix, with both views linked by highlighting a selected node’s row and column on hover or click. The SVG rendering uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while `d3.drag` enables interactive repositioning and `d3.zoom` supports scaling. Links are colored by group, and matrix cells reflect edge weights via fill opacity, with data loaded from CSV text.

Jan 12, 2021

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the classic Iris dataset, plotting sepal length against sepal width for 150 flower samples. The code loads the data from a local CSV file and uses d3.csv, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to construct the plot, which renders as red semi-transparent circles in an SVG. Each circle represents a single iris flower, and the chart includes labeled axes, a title, and grid lines created via tickSize. The dataset comes from the UCI Machine Learning Repository.

Dec 14, 2020

Loading thumbnail…

Untitled

This example is a data dashboard that visualizes flight and ship passenger volumes by country, year, and transport type, using a dropdown menu to select years and checkboxes to filter by continent or individual country. The data is loaded from a Google Sheet CSV using `csv()`. The interface is built with dat.gui, which generates the control panel for filtering and date selection. While the code sets up these UI controls and data bindings, it does not include any charting, mapping, or rendering logic, so the actual visualization is not present in this version of the code.

Dec 14, 2020

Loading thumbnail…

Parallel Coordinates

This interactive parallel coordinates plot displays the classic Iris dataset, with each colored polyline representing a flower across four numeric dimensions (sepal length, sepal width, petal length, petal width). The three Iris species are distinguished by color—orange, green, and blue—as shown in the legend. Using D3 v3, the visualization renders both background and foreground SVG paths, where the foreground lines are colored via an ordinal scale mapped to the `class` column. Users can drag axis labels to reorder dimensions, which triggers a live update of the line paths through `d3.behavior.drag` and `d3.svg.axis`.

Oct 22, 2020

Loading thumbnail…

Untitled

This parallel coordinates plot displays the Iris dataset, with each of the 150 flowers colored by species (red for setosa, green for versicolor, blue for virginica) across four dimensions: sepal width, sepal length, petal width, and petal length. The visualization highlights that sepal length is constrained to a range of 5-6 centimeters using Plotly’s `constraintrange` feature. Built with Plotly.js, the code loads the CSV via `Plotly.d3.csv` and constructs the chart using the `parcoords` trace type, with annotations pointing to high sepal width values and lower petal measurements.

Oct 22, 2020

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the Iris dataset, allowing users to compare sepal and petal measurements through dropdown menus that select the x- and y-axis variables. Each point represents one flower, colored by its species class, with a legend identifying the three categories. Built with D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for gridlines, and updates circles and labels dynamically via a render function. SVG rendering handles all graphical elements, while the dropdowns are created through a custom function that binds options to data.

Oct 6, 2020

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, showing measurements of sepal and petal dimensions colored by flower species. Users can select which attributes to display on the x- and y-axes using dropdown menus, with hover interactions fading non-selected species. Built with React and D3 v5, it renders SVG circles using `scaleLinear` and `scaleOrdinal` for positioning and color encoding. The visualization includes custom axis components, a color legend, and tooltips, with data loaded via D3's `csv` parser and formatted using `d3.format`.

Oct 6, 2020

Loading thumbnail…

Interactive Color Legend

An interactive scatterplot of the Iris dataset lets users explore relationships between sepal and petal measurements, with colored dots representing species. A clickable color legend on the right highlights points of a selected species while dimming the others, using React state to track the hovered value. Built with React and D3 v5, the plot renders as SVG and uses scales from `d3.scaleLinear` for axes and `d3.scaleOrdinal` for categorical colors. Dropdown menus allow switching which measurements appear on the x- and y-axes.

Oct 6, 2020

Loading thumbnail…

Untitled

An interactive scatter plot explores the classic Iris dataset by Fisher, visualizing measurements of sepal and petal dimensions across three flower species. Dropdown menus allow the user to select which attributes appear on the x and y axes, while a color legend distinguishes species and fades non-hovered points. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical colors, and renders marks as SVG circles with tooltips.

Oct 6, 2020

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users explore the relationships between sepal and petal dimensions through dropdown menus. The visualization uses React, a D3 component architecture, and SVG rendering to display data points colored by species. Hovering over the interactive color legend highlights points from a particular species while fading the others, using React state management and mouse event handlers to dynamically adjust opacity. The plot features D3's linear scales for axes and an ordinal color scale for categorical species assignment.

Oct 6, 2020

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the classic Iris dataset, letting users explore relationships between sepal and petal measurements by selecting variables from dropdown menus. A color legend maps the three Iris species to distinct hues; hovering over a species name highlights only those data points while fading all others, making group distinctions immediately apparent. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for the categorical color mapping, and native SVG circles for marks. The data is loaded as CSV using D3's `csv` utility.

Oct 6, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

A scatter plot of the Iris dataset, displayed in a React interface, uses dropdown menus to select which of the four measured attributes (sepal length/width, petal length/width) maps to the x- and y-axes. The visualization includes a plotted point for each iris specimen, with axis labels and tick marks rendered as SVG elements. The data is loaded from a CSV file using the D3.js `csv` function, and the chart uses D3's `scaleLinear` and `extent` for scaling the axes.

Oct 6, 2020

Loading thumbnail…

Scatterplot using react and D3 with DropDown Menu |Filtering for OnChange of data not fully working...yet!

This scatterplot displays asylum case wait times in days against case entry dates, using a sample of 200 cases from a larger dataset. A dropdown menu filters the data by year, though the onChange handler currently updates the selected value without applying the year filter to the rendered marks. The visualization uses React hooks with d3.v5 scales (scaleTime, scaleLinear), SVG rendering for axes and circles, and a custom CSV loading hook. The filterYear utility parses OSC_DATE values to match selected years, but is not yet connected to the chart's data pipeline.

Oct 6, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 392 cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles are positioned using d3.scaleLinear for both axes, with d3.axisBottom and d3.axisLeft providing labeled ticks. The code loads CSV data via d3.csv, converts values to numbers, and renders the chart as SVG with d3-v5. Axis labels and a title are appended as text elements within a margin-defined group.

Sep 29, 2020