YI-CHENG-SHIH645

@YI-CHENG-SHIH645·3 public vizzes

Fork of React Starter

This interactive bar chart visualizes internet usage percentages across countries, with controls to filter by year and select the top 20, bottom 20, or countries surrounding a user-specified nation. Built with React and D3 v7, it renders an SVG using d3.scaleBand and d3.scaleLinear, and updates the chart via d3.select and data joins. Hovering over bars triggers a tooltip displaying the exact percentage, while input fields and dropdown menus drive the filtering logic. The data comes from a CSV file fetched with d3.csv.

Jan 12, 2023

Loading thumbnail…

HW2

This interactive parallel coordinates plot visualizes the Iris dataset, displaying four flower measurements (petal and sepal length/width) across three species. Built with React and D3.v4, it renders SVG paths with animated transitions that highlight a selected species while dimming others on hover. Color-coded legends map species to distinct hues, and the chart’s axes are adjustable via radio buttons, allowing users to reassign features to each dimension. The visualization uses `d3.scaleLinear` and `d3.scalePoint` for coordinate mapping and `d3.line()` to construct the polylines.

Oct 19, 2022

Loading thumbnail…

HW1

This interactive scatterplot visualizes Fisher's Iris dataset, showing how measurements of sepal length, sepal width, petal length, and petal width relate across three flower species. Radio buttons let users select which measurement appears on each axis, updating the plot and axis labels accordingly. The visualization uses D3.js v4 with an SVG rendering, employing `d3.scaleLinear` for axes and `d3.scaleOrdinal` for color mapping to distinguish species.

Oct 19, 2022