Skip to main content
Log in
陳

陳泰元

@oscar1234456·13 public vizzes

Loading thumbnail…

Fork of 310551076_HW1_Scatter Plots (Interactive Legend)

This interactive scatter plot visualizes the Iris dataset, showing the relationships between four flower measurements with points colored by species. Two dropdown menus allow users to select which features appear on the x and y axes. Hovering over a point highlights all points of the same species while fading others, and the interactive legend responds to hover events. The visualization uses d3.v7 with scaleLinear, extent, axisBottom, and axisLeft to render the SVG axes and circles, with animations triggered by menu changes.

Nov 22, 2022
Loading thumbnail…

310551076_HW1_Scatter Plots (Interactive Legend)

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Dropdown menus select which features appear on the x- and y-axes, and hovering over any point highlights all points of the same species while dimming others. The visualization uses D3 v7 with `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, and updates the SVG via a `render()` function. CSV data is loaded with `d3.csv`, and species colors are mapped explicitly in the code.

Nov 22, 2022
Loading thumbnail…

Fork of 310551076_test

A histogram displays the popularity of the top ten songs for a selected music genre, chosen from a dropdown menu. Each bar’s height corresponds to the track’s popularity value on a fixed 0–100 scale. The visualization uses D3 v3 (imported via `d3.scaleBand` and `d3.scaleLinear`) to render SVG rectangles with a transition animation when the genre changes. Data comes from a CSV file, and the genre list includes many categories like pop, rock, and jazz.

Nov 22, 2022
Loading thumbnail…

310551076_HW3_Popularity_Bar_Plot

This interactive bar plot displays the top ten tracks by popularity within a selected music genre, using data loaded from a CSV file. A dropdown menu lets users switch between genres, triggering a smooth transition animation as bars update to reflect the new ranking. The visualization is built with D3.js v7, using `scaleBand` and `scaleLinear` for axes, `transition().duration()` for animated updates, and SVG rendering with rotated axis labels for track names.

Nov 21, 2022
Loading thumbnail…

310551076_HW1_Scatter Plots

This interactive scatter plot visualizes the Iris dataset, showing how three flower species cluster across selected measurement pairs. Two dropdown menus allow users to independently choose which of the four features (sepal length, sepal width, petal length, petal width) appear on the x- and y-axes. The code uses D3.js v7 with SVG rendering, employing `scaleLinear`, `axisBottom`, and `axisLeft` to build the axes and gridlines. Circles are colored by species using a hardcoded color map, and the chart updates dynamically through the `render` function.

Oct 20, 2022
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width for different iris species. Hovering over a species in the color legend highlights matching data points and fades the rest, using `onMouseEnter` and `onMouseOut` events. Built with React and D3 v5, it renders as an SVG with `scaleLinear` for axes, `scaleOrdinal` for colors, and custom `AxisBottom`, `AxisLeft`, `Marks`, and `ColorLegend` components.

Oct 1, 2022
Loading thumbnail…

Fork of HW!

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization updates dynamically when users select different axes from dropdown menus, with each point colored by iris species. The code uses D3 v5’s `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles for data points. The interface is built with React and the `react-dropdown-browser` library for menu controls.

Oct 1, 2022
Loading thumbnail…

Scatter Plot 2

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, sourced from the auto-mpg CSV file. Each car is represented as a semi-transparent red circle, with axes labeled "Horsepower" and "Weight" and a title "Cars Report." The visualization uses D3 v7 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to coordinates and draw the chart. Grid lines and custom tick styling enhance readability.

Oct 1, 2022
Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of ten countries, with each circle positioned along a linear population scale and a point scale for country names. The visualization reads population data from a CSV file, converts the values from thousands to absolute numbers, and renders the chart as an SVG. Using D3 v7, the code applies `scaleLinear` and `scalePoint` for axes, `axisBottom` and `axisLeft` for ticks, and `csv` for data loading. The chart includes formatted tick labels, gridlines, and a title, with circles colored steelblue.

Sep 30, 2022
Loading thumbnail…

Customizing Axis

This bar chart displays the top 10 most populous countries using population data from a CSV file. The visualization customizes both axes: the y-axis removes domain lines and ticks for a cleaner look, while the x-axis formats population values (e.g., converting "G" to "B" for billions) and extends tick lines across the chart. Built with D3 v7, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering as SVG. The x-axis label and title are added as text elements, with bars styled in steelblue via external CSS.

Sep 30, 2022
Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a simple horizontal bar chart using D3 v7, displaying population data for ten countries from a CSV file. The chart shows each country’s population as a steelblue rectangle, scaled linearly along the x-axis and positioned by a band scale on the y-axis. The code uses D3 modules like `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering SVG elements within a 960x500 viewport. Population values are converted from thousands to actual counts before being passed to the scales.

Sep 30, 2022
Loading thumbnail…

Make a face

A yellow circle with black outlines forms a face, featuring two eyes, eyebrows, and an arc-shaped mouth drawn in SVG. The eyebrows animate upward and downward in a repeating loop using D3 transitions. The visualization uses D3 v7 APIs including `select`, `arc`, and `transition` to construct the facial features relative to the center of an SVG canvas sized 960 by 500. All elements are positioned using SVG transform attributes.

Sep 30, 2022
Loading thumbnail…

Cars Report

This example demonstrates a dynamic car report that filters a dataset of vehicles priced under $2000 and displays the results as formatted text. The page initially shows a loading message while fetching car data asynchronously through a Promise in `getCars.js`, then uses `generateReport.js` and `formatCar.js` to process and render the filtered list. The visualization relies on D3 version 6 for data manipulation, while the SVG rendering includes basic shapes like circles and rectangles, with static HTML elements styled via CSS. The code also references a YouTube tutorial for D3 setup, but the core functionality focuses on promise-based data loading and text output.

Sep 30, 2022