eyxxr1260@gmail.com

Fork of 1025

This animated horizon chart visualizes air pollutant concentrations (SO₂, NO₂, O₃, CO, PM10) over time, with each band color-coded by pollutant and overlaid to show temporal trends. Users toggle pollutants via switches and select time bands from dropdown menus. The chart is built with D3 v7, using SVG paths, interactive checkboxes, and a fixed tooltip to display values. The update mechanism triggers loaders and redraws the horizon bands dynamically, with pollutants rendered individually and stacked for comparison.

1025

This visualization displays daily average concentrations of six pollutants (SO2, NO2, O3, CO, PM10, PM2.5) for multiple station codes in 2019. Each small multiple is a horizon chart built with D3 v6, using `d3.area` to render SVG paths and `d3.rollups` to aggregate measurements by station and date. The interactive charts support zooming via `d3.zoom` and show a tooltip on hover that reveals the exact date and pollutant value. Data comes from a CSV file loaded with `d3.csv`, with districts extracted from address strings.

Fork of Fork of Fork of Shapes and Colors with SVG and CSS

Fork of Fork of Shapes and Colors with SVG and CSS

This example shows an interactive horizon chart for air pollution data, letting users compare pollutant levels across six types (SO2, NO2, O3, CO, PM10, and PM2.5) for selected years. The visualization uses D3.js (v7) with an SVG rendering approach, displaying time-series data from a GitHub-hosted CSV dataset. It employs d3.rollup to aggregate measurements and d3.scaleTime for the x-axis, while a dropdown menu switches between annual datasets. The chart updates dynamically by redrawing the SVG elements when the user changes the year selection.

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a Horizon Chart for visualizing air pollution measurements across multiple locations over time. The interactive interface allows users to select a specific year/month, pollution class (PM2.5, PM10, NO2, etc.), color scheme from six D3 sequential scales, and adjust the number of bands via a slider. The chart is rendered using SVG, with data loaded from a CSV file via `d3.csv` and processed using `d3.timeParse` and `d3.curveLinear`. The visualization applies the `d3.schemeBlues` through `d3.schemeGreys` color arrays to encode amplitude through color intensity.

Fork of HTML Starter

Fork of Theme River Graph

This interactive stream graph visualizes the median property prices in Massachusetts over time, allowing users to toggle between coloring by property type (house or unit) and by number of bedrooms (1–5). The D3.js v4 code uses `d3.stack`, `d3.stackOffsetSilhouette`, and `d3.area` to render the layered areas from a CSV file of quarterly sales data. Users switch coloring modes via buttons, which re-organize the data with `d3.nest` and recalculate medians before redrawing the SVG. Hovering over the graph reveals details through a tooltip element.

Fork of React Starter

This stacked bar chart visualizes world university rankings, with bars grouped by university and colored by ranking criteria, with scores plotted along the y-axis. Users can arrange the data by different ranking attributes and sort bars in ascending or descending order via dropdown menus. The chart is built with D3 v6, using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.stack()` to generate the stacked series. It renders as SVG, includes an interactive tooltip on hover, and displays a legend alongside the chart.

Fork of Interactive Stacked Bar Chart

This fork of an interactive stacked bar chart visualizes World University Rankings, with bars segmented by scoring criteria and universities sorted via dropdown menus. Users can toggle legend items to hide or show criteria, and hover over bars to reveal tooltips with detailed scores. The visualization is rendered as SVG using D3 v7, leveraging `d3.scaleBand`, `d3.scaleLinear`, and D3’s data-join pattern to update charts dynamically on sort or filter changes.

tryyyyyyy

Fork of 1010

This visualization displays 2024 World University Rankings as a stacked bar chart, breaking down each institution’s total score into five component categories: teaching, research, citations, industry income, and international outlook. Users can sort the bars by any category or the total, toggle ascending/descending order, and upload their own CSV data to update the chart. Built with D3 v7, it uses `d3.stack()` for stacking, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG `rect` elements with mouseover tooltips.

1010

This stacked bar chart visualizes the Times World University Rankings 2024, breaking down each institution's overall score into five components: Teaching, Research, Citations, Industry Income, and International Outlook. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, with d3.stack() to create the stacked segments. Interactive sorting by any score metric, in ascending or descending order, is provided via HTML dropdown menus, and a tooltip displays segment values on mouseover. The data is loaded from a CSV file, with schools ranked as "Reporter" filtered out.

Fork of Fork of Fork of Fork of 1006

A brushable scatter plot matrix displays the Iris dataset across four morphological traits, with each cell showing the relationship between a pair of features and colored points representing three Iris species. Users can drag a rectangular brush over any scatter plot to highlight corresponding data points across all other plots simultaneously, while hovered circles enlarge and reveal a tooltip. Using D3 v4, the visualization employs `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.brush`, and `d3.scaleOrdinal` to render the SVG grid, with animated transitions for circle radius and opacity.

Fork of Fork of Fork of 1006

This brushable scatter plot matrix displays the classic Iris dataset, showing relationships among sepal and petal measurements for three flower species. Users can brush a rectangular region in any scatter plot to highlight corresponding data points across all other plots. The visualization uses D3 v4 with `d3.brush`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG grid, with circle elements colored by species via `d3.scaleOrdinal`. Tooltips appear on hover, and selected points maintain their original colors while unselected points fade to gray.

Fork of Fork of 1006

This interactive scatter plot matrix visualizes the Iris dataset, showing pairwise relationships between sepal and petal measurements. Each cell displays the correlation between two features, with points colored by species. Users can brush a region in any plot to highlight the selected data points across all other cells simultaneously. The visualization uses D3 v4 with `d3.brush()` for selection, `d3.scaleLinear()` and `d3.axisBottom()`/`d3.axisLeft()` for axes, and `d3.scaleOrdinal()` for species coloring. Data is loaded from an external CSV file and rendered as SVG circles.

Fork of 1006

A 4x4 scatterplot matrix visualizes the classic Iris dataset, with each cell plotting one pair of four flower measurements and the diagonal showing histograms of each feature. Points are colored by species using `d3.scaleOrdinal`. Rendering in SVG via D3 v6, the visualization incorporates `d3.brush` with a callback that filters the original data to highlight points within the brushed selection across all plots. Binning for the histograms uses `d3.histogram`, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

0927

0927

This visualization displays three correlation matrices for male, female, and infant abalones, using the abalone.csv dataset. Each matrix shows pairwise correlations between physical measurements and rings (age), with colors ranging from blue (negative correlation) to red (positive correlation). The code uses d3.v6 with `d3.scaleBand`, `d3.scaleSequential`, and `d3.interpolateRdBu` to render the SVG cells, and includes interactive tooltips on mouseover. The three matrices appear side-by-side, allowing comparison of correlation patterns across sex categories.

Fork of 0924

0924

Three side-by-side correlation matrices visualize the relationships among eight physical measurements of abalone, split by sex (male, female, infant). Each cell’s color encodes the Pearson correlation coefficient between two attributes, using a red-blue diverging scale. Computed from the `abalone.csv` dataset, the matrices are rendered as SVG using D3 v6, with d3.mean, d3.sum, and custom functions calculating correlations. Interactive tooltips reveal exact correlation values on hover.

Fork of Fork of hw222222

Fork of hw222222

This interactive parallel coordinate plot visualizes the Iris dataset, showing the relationships between sepal length, sepal width, petal length, and petal width across three iris species, colored using an ordinal color scale. Users can drag the vertical axes to reorder dimensions, with the polylines and remaining axes smoothly transitioning to new positions via d3.drag and d3.transition. The visualization is built with D3 v7, using d3.scalePoint for axis placement and d3.scaleLinear for each trait’s y-axis, rendering semi-transparent SVG paths for each data record.

Fork of hw2

A fork of the classic Iris parallel coordinate plot visualizes the Fisher iris dataset across four numeric traits, colored by species. The SVG lines encode each flower's measurements, with draggable y-axes for reordering dimensions. The code uses D3 v5 APIs such as `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.line`, with drag behavior and transitions to animate axis reordering.

2222333

An interactive scatter plot of the Iris dataset lets users compare any two measured attributes—sepal and petal length and width—via dropdown menus. Points are colored by species with a legend for classification. The visualization uses D3 v7 to load the CSV data, render SVG circles and axes with d3.scaleLinear and d3.axisBottom/Left, and updates the chart on selection change.

Fork of Blank Slate with Hot Reloading

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates plot visualizes the classic Iris dataset, showing relationships between sepal and petal measurements across three flower species. The D3.js v6 implementation uses `d3.scaleLinear` and `d3.scalePoint` to map dimensions, with `d3.brushY` enabling multidimensional filtering by drawing horizontal brush regions on any axis. Lines are rendered as SVG paths generated by `d3.line()`, colored via a categorical scale, and animated with `d3.transition` when reordering dimensions. A linked YouTube tutorial demonstrates the building process from setup to interactive brushing.

hw2

This animated parallel coordinates plot displays the Iris dataset with four quantitative axes (sepal length/width, petal length/width) and one categorical axis (species). Lines show each flower’s measurements, colored by species using `d3.scaleOrdinal` with `schemeCategory10`. Users brush along any axis via `d3.brushY`, filtering lines dynamically with opacity transitions using `transition().duration(500)`. The code imports from `d3` and `d3-rosetta` for reusable rendering, resizing via `observeResize`, and memoization.

Fork of 0

This interactive D3.js scatter plot visualizes the classic Iris dataset, showing measurements of sepal and petal dimensions for three species. Users can change the X and Y axes using dropdown menus, instantly re-projecting the data. The visualization uses `d3.scaleLinear` for axis scaling and `d3.axisBottom` and `d3.axisLeft` for tick marks and grid lines. Points animate from the plot’s center using D3’s `.transition().duration(1500).delay((d, i) => i * 10)` and are colored by species via the `.style('fill', (d) => color(d.class))` mapping, creating a dynamic, reconfigurable view of multidimensional plant data.

0

This interactive scatter plot displays the Iris dataset, allowing the user to compare any two measured features by selecting them from dropdown menus for the X and Y axes. The visualization uses D3 scales and axes to map the data, with circles animating to their new positions when the selection changes. It is rendered as an SVG, and the code demonstrates the use of `scaleLinear`, `axisBottom`, and `axisLeft` to build the chart.

20240912

Fork of 2222333

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal and petal dimensions. Users can dynamically select which measurement appears on the X or Y axis via radio buttons. The visualization encodes the three Iris species—setosa, versicolor, and virginica—using semi-transparent red, green, and blue colors. Built with D3 v4, the plot uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and re-renders the SVG plot on each axis change.

1111122222

An interactive scatter plot visualizes the Fisher Iris dataset, allowing users to select which sepal and petal measurements appear on the x- and y-axes via dropdown menus. Three iris species are distinguished by colored circles (red, green, blue), with a legend and animated transitions when axes change. The visualization is built with D3 v7, using `scaleLinear` for scales, `axisLeft` and `axisBottom` for axes, and `transition().duration()` for smooth circle movement.

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a scatterplot visualization of the Iris dataset, showing the relationships between sepal and petal measurements across three flower species. The visualization uses D3.js (d3.v4) with an SVG rendering approach, implementing multiple scatterplots to compare different attribute combinations. The code employs d3.scaleLinear for axis scaling, d3.scaleOrdinal with a categorical color scheme for species differentiation, and d3.axisBottom/Left for tick marks. The iris data is loaded from a CSV file and mapped to separate plot regions within a single SVG canvas.