Skip to main content
SimilarExport ZIP
100%

1963 UPW Data Viz 1.0

✓ Published0🌍 Public
SSam Hege
Last edited Jan 25, 2023
Created on Jan 25, 2023

This interactive scatterplot explores the University of the Philippines Week 1963 dataset, allowing users to compare numeric attributes by selecting X and Y axes from dropdown menus. The visualization displays each data point as a colored circle, with hues representing the Topic category and a color legend explaining the mapping. Built with React and D3 v5, the chart uses scales and axes generated by `scaleLinear`, `scaleOrdinal`, `scalePoint`, and custom Axis components, rendering SVG marks with native tooltips.

AI-generated description

A program that loads and visualizes some data

MIT Licensed

Similar vizzes

Loading thumbnail…

UPW 1963 2.0 with time

This histogram displays aggregated product values over time, with time binned into monthly intervals on the x-axis and the summed product amounts on the y-axis. It uses React with D3 v5’s `scaleTime`, `scaleLinear`, and `histogram` APIs, and renders SVG rectangles for each bin. The data comes from a CSV file loaded via `d3.csv`, and hovering reveals exact values through SVG `<title>` tooltips.

SSam Hege
73% match
Loading thumbnail…

UPW Pie Chart

This pie chart displays the distribution of United Packing City visits in 1958 by brand, showing each brand’s percentage and total value in thousands. The visualization loads CSV data from a GitHub gist via `d3.csv`. Using `d3.pie` and `d3.arc`, it generates SVG paths with `d3.scaleOrdinal` for color coding. Legends are appended manually, with values formatted using `d3.format`. The chart is rendered entirely with SVG and styled through external CSS.

SSam Hege
71% match
Loading thumbnail…

Interactive Color Legend with Menus

This interactive scatter plot visualizes the College Dataset, showing relationships between attributes like enrollment numbers and faculty PhD percentages, with points colored by public/private status. Users select X and Y axes from dropdown menus built with ReactDropdown, while hovering over the color legend highlights matching points and fades others. The visualization uses React for component composition, D3 scales for positioning and color mapping, and renders data as SVG circles with axis components from D3.

Yyinhao0424
71% match
Loading thumbnail…

Interactive Color Legend with Menus

An interactive scatter plot of the College Dataset explores relationships among academic metrics. Dropdown menus switch the X and Y attributes, while hovering over the ordinal color legend highlights points from either public or private institutions by fading non-matching circles. The React and D3 v5 implementation uses `scaleLinear` for axes, `scaleOrdinal` for colors, and React state to manage selections and hover interactions, rendering the SVG marks with reusable axis and legend components.

AAlaouiadnane
70% match
Loading thumbnail…

Interactive Color Legend with Menus

This interactive scatter plot explores the College Dataset, showing relationships between academic metrics like enrollment, admissions, and faculty qualifications. Users dynamically select which attributes appear on the x and y axes using React dropdown menus, while the color legend distinguishes public versus private institutions. Built with React and D3 v5, the visualization uses `scaleLinear` and `scaleOrdinal` for positioning and coloring, rendering as SVG. Hovering over legend items filters the displayed points and fades non-matching data, providing an interactive way to compare institutional characteristics.

AAlaouiadnane
70% match
Loading thumbnail…

Interactive Color Legend with Menus

This interactive scatter plot explores the relationship between two user-selected attributes from the College Dataset, showing each institution as a circle colored by its public or private status. Two dropdown menus, built with ReactDropdown, control which numeric columns (such as Enroll, PhD, or Outstate) appear on the x and y axes. A custom color legend, implemented as an SVG component, highlights points of one category on hover while fading the others, using d3.scaleOrdinal for color mapping and d3.scaleLinear for axis scales. All marks and axes render as React components with d3 scales, with data loaded asynchronously via d3.csv.

AAlaouiadnane
69% 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
69% match
Loading thumbnail…

Data Visualization Assignment 3

This interactive scatterplot explores relationships between attributes of college majors, such as total graduates, gender distribution, employment numbers, and median salary. Users select the X and Y axes from dropdown menus or swap them, and hovering over the categorical color legend highlights a specific major category. Built with React and D3 v6, the visualization renders SVG circles positioned by linear scales, with a color legend encoding major categories. Data is loaded from a FiveThirtyEight CSV, which is processed with D3's `csv` function.

HHowardHan99
69% match