nikki81140

Data

This example presents an interactive scatter plot of Spotify song attributes, allowing users to compare musical features such as Tempo, Energy, and Danceability across tracks from 2010 to 2020. A year slider filters the dataset, while dropdown menus let users select which attributes to plot on the x- and y-axes and which categorical field, either Top Genre or Artist, to use for color encoding. The visualization is built with React, using D3 v6 and v5 APIs including `scaleLinear` and `scaleOrdinal` for axes and color, alongside ReactDropdown for menu selection, and it renders SVG circles with native tooltips. Data is loaded via `d3.csv` from a GitHub gist containing the yearly music trend dataset.

Fork of Fork of Histogram with Iris Data - Data Decoder - July18

This interactive visualization displays the Iris dataset as a dual histogram, allowing users to select which attributes appear on the X and Y axes via dropdown menus. It shows the distribution of the selected attribute through teal bars and the other attribute through orange circles overlaid on the same axes. The visualization uses React for the interface and D3 v7's `bin` and `scaleLinear` functions to compute and render the histograms as SVG rectangles and circles, with data loaded from a remote CSV file.

Fork of Fork of Histogram with Iris Data - Data Decoder - July18

This interactive visualization displays histograms of the Iris dataset, allowing users to select which sepal or petal attribute to bin on both the X and Y axes. The chart renders two overlaid binned histograms as semi-transparent rectangles within an SVG, with a color scale distinguishing the three Iris species. Built with React and D3.js v7, it uses D3's `bin`, `scaleLinear`, and `scaleOrdinal` APIs for data processing and scaling, while the `csv` function loads the data from a remote gist. Dropdown menus from the `react-dropdown-browser` library control attribute selection.

Fork of Fork of Histogram with Iris Data - Data Decoder - July18

This interactive visualization explores music trends, allowing users to select which numeric attribute to display on the X and Y axes from a dropdown menu. It renders a dual-histogram overlay using React and D3 v7, featuring both a bar chart for x-axis bins and a scatter of circles for y-axis bins, colored by species via an ordinal scale. The interface updates state through React hooks, and the data is loaded from a CSV of yearly music attributes using D3's `csv` and `bin` functions. The SVG output includes custom axes and tooltips for each mark.

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, letting users select which numeric columns map to the X and Y axes via dropdown menus. The visualization uses D3 v5 to render SVG circles with animated transitions, scaling axes based on the selected attributes. Data is loaded from a CSV file using `d3.csv`, and the dropdown menus are managed by a custom `dropdownMenu` function, while the scatter plot is drawn through the `scatterPlot` component.

Untitled

This interactive parallel coordinates plot, built with React and D3 v4, visualizes the Iris dataset across four user-selectable dimensions (sepal and petal length/width). Each of the 150 flower specimens is drawn as an SVG path, colored red, green, or blue by species (setosa, versicolor, virginica). Four dropdown menus and a "Go!" button allow reordering or replacing the axes, triggering a recomputation of the line geometry through `d3.line()` and `d3.scalePoint()` on the raw CSV data.

Fork of Selecting a Year on a Line Chart

This line chart visualization displays population trends over time for various world regions. Users can hover over the chart to select a specific year, which triggers a vertical line to appear and updates the visualization accordingly. The chart is built using D3 v5, with the data sourced from UN population estimates. It employs D3’s `scaleTime`, `scaleLinear`, and `nest` functions to manage the time axis, population values, and multiple region groups, rendered as SVG paths.

Fork of Coronavirus Deaths Over Time by Country

This chart displays cumulative COVID-19 deaths over time for multiple countries, with each country represented by a colored line on a logarithmic scale. The visualization uses React to structure components and d3.v5 for scales, axes, and the line generator. Data comes from the Johns Hopkins Coronavirus Dataset, loaded via d3.csv and transformed into time series per country. The chart features grid lines from d3.axisBottom and axisLeft, with random RGB colors assigned independently to each country’s path on an SVG canvas.

Fork of Scatter Plot with Menus

This interactive scatter plot explores the relationships between attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. The user can dynamically reassign which numeric column maps to the x- and y-axes via custom dropdown menus. The visualization is built with D3 v5, using `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft`. SVG circles animate into position with `transition().duration(2000)`. Axis labels and menu text are styled as large, clickable HTML controls.

Fork of Let's make a face with D3.js!

A smiling face rendered with SVG circles, rectangles, and an arc path animates its eyebrows up and down in a looping transition. The D3.js v5 code uses `select`, `arc`, and chained `transition().duration()` calls to manipulate DOM attributes directly, shifting the eyebrow group's transform between two vertical positions. A red circular head with green stroke and two black eyes remain static while the eyebrows move, demonstrating fundamental D3 DOM selection and attribute updates without data binding.

Fork of Color and Size Legends

This example demonstrates two custom legend components rendered side-by-side in a single SVG: a categorical color legend and a quantitative size legend. The color legend uses `scaleOrdinal` to map fruit names to colors, while the size legend uses `scaleSqrt` and its `ticks` method to generate five radius values. Both legends are built through reusable `colorLegend` and `sizeLegend` functions that append `g` elements with circles and text, with styling applied via the CSS class `tick`.

Fork of Scatter Plot with Menus

This interactive scatter plot explores the relationships between numeric attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Dropdown menus let users select which columns to assign to the X and Y axes, with axis labels updating to reflect the chosen variables. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to render scales and axes, while `transition().delay()` animates the points into their new positions. The SVG rendering uses semi-transparent red circles to show overlapping data points.