Skip to main content
SimilarExport ZIP
100%

Students_Dataset_Viz

✓ Published0🌍 Public
Zzeyneb.mhamedi@gmail.com
Last edited Mar 31, 2023
Created on Mar 28, 2023
Forked from Hello VizHub

This example demonstrates a principal component analysis (PCA) workflow on the `full_gea.csv` dataset. It loads the CSV with D3’s `csv` method, parses numeric columns, and reduces the data to two dimensions using a custom PCA implementation in `pca.js`, which relies on the `numeric` library’s `eig` function for eigenvector computation. The resulting projected coordinates are logged to the console, with no visual rendering shown. It illustrates importing local ES6 modules alongside D3 v6.

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…

Students_Dataset_Viz

This example demonstrates Principal Component Analysis (PCA) on a student dataset, reducing high-dimensional data to two components for a scatter plot visualization. It loads CSV data from a GitHub repository, processes the numeric values, and applies a custom PCA implementation using the numeric library to compute eigenvalues and eigenvectors. D3 v6 renders the resulting projections as blue circles with x and y axes, using d3.scaleLinear and d3.axisBottom/axisLeft for the chart layout. The visualization shows how PCA reduces complex data into a clear 2D representation.

Zzeyneb.mhamedi@gmail.com
88% match
Loading thumbnail…

PCA Projection

A PCA projection scatter plot maps cereal data onto two principal component axes. The visualization uses D3 v3's `d3.svg.axis` for the coordinate system and `d3.scale.linear` to map the domain `[1, -1]` to the plot area. Points are positioned on a 900x700 SVG canvas with axes crossing at the center. The code includes data loading from `cereal.csv` and circle elements for each cereal, though the dot placement logic is commented out, leaving only the axis framework rendered.

MMohamedZaki
67% match
Loading thumbnail…

PCA Projection

A PCA projection scatter plot maps cereal data onto two principal component axes. The visualization uses D3 v3's `d3.svg.axis` for the coordinate system and `d3.scale.linear` to map the domain `[1, -1]` to the plot area. Points are positioned on a 900x700 SVG canvas with axes crossing at the center. The code includes data loading from `cereal.csv` and circle elements for each cereal, though the dot placement logic is commented out, leaving only the axis framework rendered.

MMohamedZaki
67% match
Loading thumbnail…

PCA Projection plot

A PCA projection plot maps cereal brands onto two principal components, with each dot representing a cereal and its position determined by the eigenvalue projection. The visualization uses a custom x-scale ranging from 1 to -1 and a y-scale from -1 to 1, centered axes with gridlines, and an SVG container of 900 by 700 pixels. Built with D3 v3, the code defines linear scales and axes via `d3.scale.linear` and `d3.svg.axis`, though the cereal dataset is present but not dynamically loaded in the visible script.

MMohamedZaki
65% match
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js workflow in VizHub, loading a small CSV dataset that maps student names to exam grades. It uses `d3.csv` to fetch the data and logs the parsed array to the browser console within a `render` function, while the page itself remains visually empty aside from an empty `#chart` container. The code styles the body with an Ubuntu font and large text, but performs no chart rendering or DOM manipulation beyond data loading.

GGlenn Henshaw
64% match
Loading thumbnail…

Graph Devinsa

This visualization shows a scatter plot of PCA results from the Devinsa dataset, with each point representing a data sample positioned along two principal components (Axe 1 and Axe 2). The chart uses red circles with hover highlighting and includes axis labels, tick marks, and a title. Built with D3 v5, the code loads CSV data, applies linear scales, and renders SVG circles. Interactive zoom and panning are enabled via `d3.zoom`, which rescales the axes and repositions points on user input, with a clip path constraining the visible plot area.

GGuillaume-Delbarre
64% match
Loading thumbnail…

Display table Students Dataset

This example displays a tabular view of a student dataset loaded from a remote CSV file hosted on GitHub. Using D3 v5, the code fetches the data with `d3.csv` and dynamically builds an HTML table by appending a header row with `Object.keys` and body rows with `Object.values`. The page structure includes a standalone `index.html` with a linked stylesheet, and the table is styled via CSS. The visualization demonstrates straightforward data import and DOM manipulation with D3 selections like `selectAll`, `enter`, and `append`.

Zzeyneb.mhamedi@gmail.com
64% match
Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing a remote CSV file using D3.js version 7. The page displays the dataset's size, row count, and column count within a styled HTML element, alongside an embedded SVG image. It uses the `d3.csv` method to fetch and parse the data from a GitHub gist URL, then formats the summary with `d3.csvFormat` and updates the DOM via `document.getElementById`. The code also includes an unused `index.js` that imports from D3 and a local ES6 module, illustrating VizHub's modular workflow.

RRahulSai05
63% match