E

exchoco

@exchoco·16 public vizzes

Loading thumbnail…

Slider JS

This example demonstrates a dual-range slider interface for filtering numeric attributes. It displays two sets of sliders and corresponding numerical inputs for "HP" and "ATK" values, allowing users to set minimum and maximum thresholds. The sliders use HTML `input[type=range]` elements alongside `input[type=number]` fields, synchronized via event handlers. JavaScript functions like `controlFromSlider` and `fillSlider` manage the interaction, updating a gradient background to visually indicate the selected range. The code also tracks the current range values in a `num_range` object, providing a simple, interactive filtering mechanism for data exploration.

Loading thumbnail…

Pokemon_Map

A scatterplot map of Pokémon battle data visualizes each creature’s danceability against a user-selectable audio feature (e.g., liveness, energy) using a continuous color gradient from dark blue to teal. Built with React and D3, it renders an SVG canvas with scaled axes, and hovering over a point triggers a tooltip showing metadata. The code uses `Delaunay.voronoi` for hit-testing, `d3.axisLeft` and `scaleLinear` for scales, and reads from an `iris.csv` dataset (despite the Pokémon title). A slider control adjusts the number of bar-chart sections shown in separate containers.

Loading thumbnail…

Spotyfy Track Merge

This example visualizes Spotify track features across multiple genres using a bar-chart interface. It shows how audio attributes like danceability, energy, and liveness vary between tracks, with a slider controlling the number of sections displayed. The visualization uses React for component state and rendering, while d3-array and d3-scale handle data parsing and linear scaling. SVG elements are generated for the chart, and a d3.Delaunay-based Voronoi overlay enables interactive hover tooltips that display track metadata. The data comes from an iris.csv file containing Spotify track attributes, rendered with a purple-to-teal color gradient.

Loading thumbnail…

Iris_Scatter

This interactive scatter plot visualizes the Iris dataset, showing relationships between four flower measurements (sepal length/width, petal length/width) across three species. Users select which attributes to plot on the x- and y-axes via ReactDropdown menus, with points colored by species. Hovering over the color legend highlights one species while fading the others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles, with axes rendered as custom tick components.

Loading thumbnail…

Iris_Parallel_Coor_P

This interactive parallel coordinate plot visualizes the Iris dataset, using D3.js v4 to draw polylines across four axes representing sepal and petal measurements. Each of the three Iris species is color-coded, and hovering over any line highlights all flowers of that class while dimming the rest. The visualization uses `d3.scaleLinear` and `d3.scalePoint` for positioning, `d3.line` for the polylines, and `d3.axisLeft` for the categorical axes. Users can drag any axis horizontally to reorder the dimensions, which triggers a redraw of lines and axes, with the interaction handled by a custom drag event.

Loading thumbnail…

Iris Parallel Coordinate Plots ref 4

This parallel coordinate plot visualizes the Iris flower dataset, with each line representing a sample and colored by species using a d3.scaleOrdinal. The code uses d3.scaleLinear and d3.scalePoint to position axes for sepal and petal measurements. Users can drag any axis to reorder the dimensions, triggering an event handler that removes and redraws the paths. The SVG rendering relies on d3.axisLeft for axis ticks and labels, with data loaded from the iris.csv file using d3.csv.

Loading thumbnail…

Iris visualize parallel coordinates ref2

This visualization uses parallel coordinates to explore the classic Iris dataset, with each flower’s measurements drawn as a polyline across four vertical axes. Users can reorder the axes (sepal length, sepal width, petal length, petal width) via dropdown menus, and the lines are colored by species (blue, orange, green) with a legend. Built with D3 v5, it uses `d3.scaleLinear`, `d3.scalePoint`, and `d3.axisLeft` to render the SVG paths and axes, updating interactively on selection changes.

Loading thumbnail…

Iris parallel coordinate plot ref 3

This interactive parallel coordinate plot visualizes the Iris dataset, with each line representing a flower and colored by species (setosa, versicolor, virginica). Users can hover over lines to highlight a selected species while dimming others, and drag the axis titles to reorder dimensions. Built with D3 v4, it uses `d3.scaleLinear`, `d3.scalePoint`, `d3.axisLeft`, and `d3.drag` to handle axis repositioning, while `d3.line` generates the polylines. The SVG rendering includes static axis labels and color-coded legend swatches.

Loading thumbnail…

Iris_Parallel_Coor_P

This parallel coordinate plot uses D3 v6 within a React framework to visualize the classic Iris dataset. It displays four measured attributes (sepal and petal length and width) as vertical axes, with each iris flower represented as a colored line connecting its values. The lines are colored by species using `scaleOrdinal`, and hovering over a line highlights that flower while dimming all others. The visualization includes axis labels, a legend, and uses SVG paths generated via `line()` and `scalePoint` for layout.

Loading thumbnail…

Iris_Parallel_Coor_P

This parallel coordinate plot uses D3 v6 within a React framework to visualize the classic Iris dataset. It displays four measured attributes (sepal and petal length and width) as vertical axes, with each iris flower represented as a colored line connecting its values. The lines are colored by species using `scaleOrdinal`, and hovering over a line highlights that flower while dimming all others. The visualization includes axis labels, a legend, and uses SVG paths generated via `line()` and `scalePoint` for layout.

Loading thumbnail…

Parallel_Coor_Plot_ref

This parallel coordinate plot from D3 v5 visualizes the Iris dataset, displaying four measured attributes—sepal length, sepal width, petal length, and petal width—as vertical axes. Each of the 150 samples is drawn as a polyline connecting its values across these axes, with the stroke color encoding the species (setosa, versicolor, or virginica) via a custom color mapping. The plot includes axis labels, tick marks, and a legend for the three classes. The code uses `d3.csv` to load the data, `scalePoint` and `scaleLinear` for axis scaling, `axisLeft` for tick generation, and custom `line` functions to construct the paths. Rendering is SVG-based.

Loading thumbnail…

Iris Scatter ref

This interactive scatter plot visualizes the classic Iris Dataset, displaying measurements of sepal length, width, petal length, and petal width for three iris species. Users can change which measurement appears on each axis via dropdown menus built with React and the `react-dropdown-browser` library. The visualization, rendered as SVG with D3 v5, uses `d3.scaleLinear` for axes and `d3.extent` for domain calculation, while circles are colored by species using a predefined color mapping.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatterplot of the Iris flower dataset lets users explore relationships between four measured attributes (sepal length/width, petal length/width) by selecting which attribute appears on each axis via drop-down menus. Points are colored by the three Iris species, with a color legend that fades the opacity of non-hovered classes and filters the underlying data on hover. Built with React and D3 v5, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and renders marks as SVG circles with tooltips.

Loading thumbnail…

Iris_ScatterPlot

This interactive scatter plot of the Iris dataset displays the relationships between sepal and petal measurements, with points color-coded by flower species. Users select which measured attribute appears on each axis via dropdown menus, and the visualization updates accordingly. The SVG rendering is built with React and D3 v5, using d3.scaleLinear for coordinate mapping, d3.axisBottom and d3.axisLeft for tick marks, and d3.min/max to determine the domains. A legend identifies the three species with their respective colors.

Loading thumbnail…

Scatter Plot

This example shows a scatter plot of car horsepower versus weight, with each circle representing a vehicle and axes labeled accordingly. The visualization uses D3 v5’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs within an SVG container, loading data from a CSV via `d3.csv`. Circles are rendered with purple fill and opacity, while grid lines from tick marks and styled axis labels enhance readability. The code dynamically maps data domains to pixel ranges and applies margins for layout.

Loading thumbnail…

Bar Chart

This bar chart displays the top 10 most populous countries, with purple horizontal bars representing population values in thousands. The chart includes a titled y-axis listing country names and an x-axis labeled "Population" with tick formatting that converts large numbers to abbreviated forms. Built with D3 v5, the visualization uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for scaling, `axisLeft` and `axisBottom` for axes, and SVG elements rendered in an HTML page. Population values are multiplied by 1,000, and the axis labels are styled via CSS.