ZeroKurosakii

@ZeroKurosaka·13 public vizzes

Untitled

This example visualizes daily average air pollution levels for multiple cities across six pollutants (CO, O3, NO2, PM10, PM2.5, SO2) using stacked horizon charts. Each chart represents one city-pollutant pair, with a color scale unique to each pollutant type. The code loads D3 v4 via UNPKG and the d3-horizon-chart library, processes an air-pollution.csv file by computing 24-hour means, and uses `d3.csv` and `d3.select` to bind data and render the horizon charts.

Nov 15, 2023

Loading thumbnail…

Untitled

This example visualizes daily average air pollution levels for multiple cities across six pollutant types (CO, O3, NO2, PM10, PM2.5, and SO2) using horizon charts. Data is loaded from a CSV file, aggregated from hourly measurements, and each chart displays a time series for a city-pollutant pair with a color scale specific to the pollutant. The code uses D3 v4, the d3-horizon-chart plugin, and Canvas rendering via the horizon chart’s internal draw method. Charts are appended to the body with titles and computed average values.

Nov 15, 2023

Loading thumbnail…

SANKEY Experiment

This Sankey diagram visualizes the flow of categorical values across six attributes—buying, maintenance, doors, persons, luggage boot, and safety—from the car.data dataset. Nodes are colored by attribute using the `d3.scaleOrdinal` scheme, with labels and values displayed. The graph is constructed using a custom `d3.sankey()` implementation, with node dragging enabled via `d3.drag()`. The layout is computed through iterative breadth and depth algorithms, rendering SVG paths for links.

Nov 15, 2023

Loading thumbnail…

Untitled

This example shows the Times Higher Education World University Rankings 2024 as interactive stacked bar charts. Each page displays 100 universities, with bars segmented by six performance categories (overall, teaching, research, citations, industry income, and international outlook). Users can reorder the bars by ascending or descending score for any category and page through the dataset. The visualization uses D3 v7 with `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal`, rendered as SVG with hover tooltips.

Oct 23, 2023

Loading thumbnail…

Iris_Scatter_Plot_Matrix

This interactive scatter plot matrix displays the four numeric attributes of the Iris dataset across a grid of pairwise scatter plots, with points colored by species (setosa, versicolor, virginica). The visualization uses D3.js v6 to create the SVG, with `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical color mapping, and `d3.brush` to enable brushing—selecting points in one cell highlights the corresponding points across all other cells. Axis tick lines extend across the entire plot for readability, and species labels appear in the top-left area.

Oct 16, 2023

Loading thumbnail…

Correlation_Matrix

This visualization displays a correlation matrix for the Abalone dataset, showing pairwise Pearson correlation coefficients between physical measurements and age. Across the main diagonal, variable names are labeled, while off-diagonal cells use either colored text or circles with varying radius and color intensity to represent correlation strength and direction. The matrix is filtered by selecting a categorical variable (Male, Female, or Infant) from a dropdown menu, which recomputes correlations for that subset. Built with D3 v7 in React, the code uses `d3.scaleLinear` for color encoding, `d3.scalePoint` for axes, and `d3.scaleSqrt` for circle sizing, rendering to SVG.

Oct 9, 2023

Loading thumbnail…

Parallel Coordinate

This interactive parallel coordinate plot visualizes the Iris dataset, showing each flower’s measurements across four selectable axes, with lines colored by species (setosa, versicolor, virginica). Users change variables via dropdown menus, triggering a d3 transition that animates the polylines to new positions. The visualization uses D3 v7 with d3.scaleLinear, axis generators (axisLeft, axisBottom), d3.csv for data loading, and SVG rendering.

Oct 2, 2023

Loading thumbnail…

parrelPlot

This interactive parallel coordinates plot visualizes relationships across multiple dimensions of a dataset, with four dropdown menus allowing the user to select which columns appear on each axis. Written in React with SVG rendering using D3 v7, it employs `d3.csv` to load data, `scaleLinear` for axis scaling, and `axisLeft`/`axisBottom` to draw the coordinate frames. The `menu` function dynamically generates select elements, and the `on change` handler triggers re-rendering of the plot when axis assignments change.

Oct 2, 2023

Loading thumbnail…

Iris_Scatter

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal length, sepal width, petal length, and petal width as colored points representing three species. Users can select which measurement appears on each axis via dropdown menus, with smooth animated transitions updating the axes and point positions. The visualization uses D3.js v7, including d3.csv for data loading, d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and d3.transition for animated updates. Each species receives a distinct color: red for setosa, green for versicolor, and blue for virginica.

Sep 25, 2023

Loading thumbnail…

Iris

This visualization displays the classic Iris dataset, plotting measurements of sepal and petal dimensions against each other. Users can select which two traits to compare from dropdown menus for the x and y axes. The scatterplot uses colored circles (red, green, blue) to differentiate the three iris species, with a legend below the plot. Built with D3 v7, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and transitions with `transition().duration()` to animate points when axes change, loading data from a local CSV file.

Sep 25, 2023

Loading thumbnail…

Iris

This interactive scatterplot visualizes the classic Iris dataset, allowing users to compare any two measured features (sepal/petal length and width) via dropdown menus. D3 v7 axes and scales update with animated transitions when a new axis is chosen. Circles are color-coded by iris species, with a legend showing the three classes. The data is loaded from a CSV using `d3.csv`, and the visualization leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` for smooth updates.

Sep 25, 2023

Loading thumbnail…

Iris

This interactive scatterplot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other. Users select the x and y axes from dropdown menus, and the points animate smoothly to their new positions with staggered transitions. The visualization encodes the three Iris species with red, green, and blue semi-transparent circles. Built with D3 v7, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` to handle scaling, axes, and animated updates when the selected columns change.

Sep 25, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup required to render text with D3 version 7. The page displays the phrase “Hello D3 version 7” in extremely large type, centered on a blank background. The code imports the `select` function from the D3 library and uses it to target the `<body>` element, then sets its text content directly. The project also includes a bundled JavaScript file and references the D3 library via a CDN, with a video tutorial in the README explaining how to begin using D3 version 6.

Sep 25, 2023