Skip to main content
SimilarExport ZIP
100%

CAP 4744/5745 - Interactive Data Visualization - Project 2

✓ Published0🌍 Public
Aanagi2597
Last edited Feb 16, 2021
Created on Feb 15, 2021
Forked from Hello VizHub

This interactive dashboard presents four distinct datasets—Calvin College 2004, Iris, Titanic Passenger List, and World Bank Science & Technology—each accessible via a Bootstrap navigation bar. The main page displays thumbnail images linking to separate visualizations. The code uses D3.js v5 to generate simple scatterplots, loading data and mapping values to x and y scales with `d3.scaleLinear` and `d3.extent`. Circles are appended to SVG containers using `selectAll` and `data` joins, with positioning based on array indices and a specified y-field.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

310712009

This interactive scatter plot of the Iris Dataset lets users explore relationships between measurements by selecting axes from dropdown menus. Built with React and D3 v5, it renders SVG circles with opacity, using `d3.scalePoint` for positioning and `d3.axisBottom`/`d3.axisLeft` for labeled ticks. The data is loaded via `d3.csv` from a remote gist, with axis labels dynamically updated based on menu selections.

JJoshuoYang
75% match
Loading thumbnail…

Zoomable #4

This interactive scatter plot visualizes the Iris dataset, encoding multiple quantitative attributes via dropdown menus that switch the X and Y axes. D3 v6 scales (scaleLinear and scalePoint) map values to positions, while categorical variables use point scales. The reusable chart pattern uses selection.join with transitions, animating circles and axes over 1 second when data mappings change. SVG rendering displays semi-transparent circles that grow on entry, with axes drawn using d3.axisLeft and d3.axisBottom.

Aamnicpo
74% match
Loading thumbnail…

Data Visualization ICE5

This example displays a bar chart of the Titanic disaster dataset, with bars colored by survival status and gender, using D3.js v7 for data binding and SVG rendering. It shows the number of passengers per class and sex, with an interactive tooltip revealing exact values on hover. The page also includes a message container that reports the CSV file size, row count, and column count, demonstrating basic data loading and inspection. The code loads data from a GitHub-hosted CSV and uses `d3.csv` and `d3.select` for chart construction.

TTharun2022
74% match
Loading thumbnail…

Scatter Plots: Part 2 - Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which attributes appear on the x- and y-axes via two dropdown menus. Built with React and D3 v5, the visualization renders SVG circles for each data point, with axis labels updating to reflect the selected measurements. The code leverages `d3.scaleLinear` for continuous scales, `d3.extent` for domain calculation, and custom `AxisBottom` and `AxisLeft` components to generate tick marks. Dataset values are loaded asynchronously through a `useData` hook that parses CSV data using `d3.csv`.

Zzeeeeem
73% match
Loading thumbnail…

dv2020-ep32-viz33 - scatter plot w/ menus

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between four measured attributes. The visualization uses dropdown menus to select which attributes are plotted on the x and y axes, with the chart updating dynamically. Built with React and D3 v5, the SVG rendering uses `scaleLinear` for axes and circle marks with tooltips. The data is loaded from a CSV file, and the menus are implemented using the `react-dropdown` library.

Zzach b.
73% match
Loading thumbnail…

Untitled

This example presents an interactive scatterplot of the classic Iris dataset, allowing users to compare any two of the four measured flower features by selecting the x- and y-axes from dropdown menus. It uses D3 v5 to render an SVG with semi-transparent circles for each flower, color-coded by species (setosa, versicolor, virginica) and accompanied by a legend. The code demonstrates reusable D3 components, such as a drop-down menu factory and dynamically rendered axes, with all elements re-rendered when a new variable is chosen.

Mmmry310531
73% match
Loading thumbnail…

Dataviz 2020_Ep32 - 25. Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which measurement attributes appear on the X and Y axes via dropdown menus. Built with React and rendered as an SVG, it uses D3 utilities like `scaleLinear` for axis scaling, `extent` for domain calculation, and `csv` for data loading. The visualization displays the data points as teal circles, with tick marks and axis labels generated by custom React components, all styled with the Poppins font.

MMinwoo Pak
73% match
Loading thumbnail…

Dataviz 2020_Ep31 - 24. Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, with the x and y axes each controlled by dropdown menus that let users select which of the four numeric attributes to compare. The visualization shows how different combinations of sepal and petal measurements distribute across the sample. Built with React and d3.scaleLinear, the chart renders SVG circles positioned by the selected attributes, with axis labels generated from the menu choices. Data loading uses d3.csv from a remote gist, and the React useState hooks manage the dropdown selections.

MMinwoo Pak
73% match