Xiaojun

Week 14: IMDB Top 250 Movies – Interactive Visualization Dashboard

This interactive dashboard visualizes IMDB's top 250 movies across five linked charts, including scatter plots, stacked bars, a genre bar chart, and a hierarchy tree. Users filter by decade and toggle regression or trend lines while hovering over genres in the legend to highlight specific categories. Built with React and D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, `hierarchy`, `tree`, and `linkHorizontal` APIs. The dataset comes from a Kaggle compilation of IMDB ratings, budgets, runtimes, and genres. Interactive controls include dropdowns, buttons, and zoomable tree navigation with tooltips.

Week 13: IMDB Top 250 Movies – Interactive Visualization Dashboard

This interactive dashboard explores the IMDB Top 250 Movies dataset, presenting a tabbed interface with four distinct visualizations: scatter plots of rating versus runtime and year versus rating, a stacked bar chart of genre distribution across runtime bins, and a genre count bar chart. A hierarchical tree organizes movies by decade and genre. Users can filter by decade, toggle regression and trend lines, and interact with the legend to highlight specific genres. The dashboard uses D3.js v7 within a React framework, utilizing APIs such as `scaleLinear`, `scaleOrdinal`, `stack`, and `tree` for rendering.

Week 12: IMDB Top 250 Movies Bar Chart: Genre VS Count

This bar chart visualizes the distribution of genres among IMDb’s Top 250 movies, showing that a single film can be counted under multiple genres. The visualization counts genres from the loaded CSV data and sorts them in descending order. It uses D3.js v7 scales, axes, and SVG elements to render the chart, with a Seaborn-derived color palette and hover interactions that dim non-target bars and display a tooltip with the count and percentage for each genre.

Week 12: IMDB Top 250 Movies Scatter Plot: Year VS Rating

Week 12: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

This stacked histogram shows the distribution of movie runtimes across the top 6 genres in the IMDB Top 250 list, with each bar broken into colored segments for genres like Drama, Crime, and Action. The chart uses D3 v7's `scaleLinear`, `scaleOrdinal` with `schemeSet2`, and `bin` functions on a 10-minute interval to aggregate data parsed from a CSV. The React app loads the dataset, filters out null runtime values, and categorizes movies without a top genre as “Other.”

Week 12: IMDB Top 250 Movies Scatter Plot: Rating vs. Runtime

Week 11: IMDB Top 250 Movies Scatter Plot: Rating vs. Runtime

Fork of Week 11: IMDB Top 250 Movies Scatter Plot: Rating vs. Runtime

Week 11: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

This histogram shows the distribution of movie runtimes for the top 250 IMDB movies, broken down by genre with stacked bars at 10-minute intervals, distinguishing the six most frequent genres from an "Other" category. The chart uses D3 v7’s `bin` and `scaleLinear` functions to create and scale the bins, while `scaleOrdinal` with `schemeSet2` applies colors. Data comes from a CSV file containing runtime, genre, and other movie attributes, parsed into minutes and genre lists by a custom parser.

Week 10: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

This histogram visualizes the distribution of movie runtimes for the top 250 IMDB movies, broken down by genre as a stacked bar chart. Using D3.js and React, the visualization filters the data to the six most common genres, categorizes all others as "Other," and bins runtimes into 10-minute intervals. Each bar segment is colored via `d3.scaleOrdinal` and `d3.schemeSet2`, with axes rendered by `d3.axisBottom` and `d3.axisLeft`. The chart reads from a CSV file containing movie metadata.

Week 9: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

Week 10: IMDB Top 250 Movies Scatter Plot: Rating vs. Runtime

Week 10: IMDB Top 250 Movies Scatter Plot: Year VS Rating

Week 9: IMDB Top 250 Movies Scatter Plot: Year VS Rating

This scatter plot visualizes the top 250 IMDB movies, plotting each film’s release year against its rating. The chart uses D3 v7 scales and SVG circles, with colors encoding the primary genre. Hovering over the legend highlights films of that genre by adjusting circle opacity. Data is loaded from a CSV and processed in React, with axes rendered via D3’s axisBottom and axisLeft.

Fork of Week 7: IMDB Top 250 Movies Tree Visualization

This interactive scatter plot visualizes the IMDB Top 250 movies, mapping release year on the x-axis and rating on the y-axis. Colored circles represent movie genres, with a legend that highlights selected genre points on mouseover. The visualization uses D3 v7 scales, axes, and ordinal color schemes within a React application, processing CSV data to categorize the top six genres and grouping remaining ones as "Other." The chart includes a title, axis labels, and interactive legend filtering.

Week 9: IMDB Top 250 Movies Movie Bubble Chart: Movie Runtime Trends Over Time

This bubble chart displays the relationship between the release year and runtime of the top 250 IMDB movies, with each bubble’s size representing its rating and its color indicating a simplified genre. The visualization reveals a general trend of increasing movie runtimes over time. It uses a React frontend with d3.v7’s `scaleLinear`, `scaleOrdinal`, and `axisBottom` to map data. Data is preprocessed from a CSV file, with runtimes parsed from strings like “2h 22m” into minutes. The genre legend allows interactive highlighting, filtering bubbles by genre on click or hover.

Week 7: IMDB Movie Hierarchy Tree

Week 6: IMDB Top 250 Movies Bar Chart: Genre VS Count

A bar chart visualizes the distribution of genres among the IMDb Top 250 movies, with each bar's height representing the count of movies in that genre and a tooltip showing the exact count and percentage. The visualization uses the D3.js library, including `scaleBand` and `scaleLinear` for axes and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a CSV file, and genres are split and counted from a comma-separated field. The chart uses a Seaborn-derived color palette with interactive hover effects that highlight the selected bar and dim others.

Fork of Week 5: IMDB Top 250 Movies Bar Chart: Genre VS Count

This bar chart displays the distribution of genres among the IMDb Top 250 movies, counting each genre assigned to a film (including multi-genre entries) and sorting the results descending by frequency. The visualization uses D3 v7 scales (`scaleBand`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) within a React component, with data loaded from a local `data.csv` file. Bars are colored with a gradient from a Seaborn-inspired palette, and the chart includes rotated x-axis labels and a bold title.

Fork of Week 5: IMDB Top 250 Movies Bar Chart: Genre VS Count

This bar chart shows the distribution of genres across IMDb’s Top 250 movies, counting each genre listed for a film and sorting the results by frequency. The visualization uses React and D3 v7’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to render the bars and axes. Titles and labels are added via D3 selections, while bars use a gradient fill defined in an SVG `linearGradient`. The data comes from a local CSV file loaded with `d3.csv`.

Fork of Week 5: IMDB Top 250 Movies Bar Chart: Genre VS Count

This interactive bar chart visualizes the distribution of genres among the IMDb Top 250 movies, showing the count of movies for each genre. The data is loaded from a CSV file and processed to count genres, with results sorted in descending order. The visualization uses D3.js version 7 to render the chart, employing `scaleBand` and `scaleLinear` for axes, and `axisBottom` and `axisLeft` for ticks. It is built with React, using a Seaborn-inspired color palette for the bars.

Fork of Week 5: IMDB Top 250 Movies Bar Chart: Genre VS Count

Fork of Week 6: IMDB Top 250 Movies Movie Bubble Chart: Movie Runtime Trends Over Time

A bubble chart maps the top 250 IMDB movies by release year (x-axis) and runtime in minutes (y-axis), with circle size encoding rating and color distinguishing simplified genres. The D3 v7 code uses a linear scale for axes and radius, an ordinal color scale from `schemeSet2`, and renders axes via `axisBottom` and `axisLeft`. Data is parsed from a CSV, with runtimes converted from strings like "2h 22m" to minutes. React manages the SVG lifecycle, passing filtered data to the `viz` function.

Week 6: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

This visualization shows the distribution of movie runtimes across the top 6 genres in the IMDB Top 250 list, using stacked histograms to display genre frequency within 10-minute runtime bins. The code uses React with D3 v7, employing `d3.bin` for binning, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeSet2` for genre colors. Runtime data is parsed from the CSV's `run_time` field, and genres are categorized with an "Other" fallback.

Week 6: IMDB Top 250 Movies Scatter Plot: Year VS Rating

This scatter plot displays the top 250 IMDB movies, plotting release year on the x-axis against rating on the y-axis. Each point is colored by genre, using a d3.scaleOrdinal with the schemeCategory10 palette, and the top six genres are shown in a legend with others grouped as "Other." Built with React and D3 v7, the visualization loads data from a CSV file and renders circles with fixed radius and 70% opacity, using d3.scaleLinear for both axes and d3.axisBottom and d3.axisLeft for tick marks.

copy Week 6: IMDB Top 250 Movies Scatter Plot: Year VS Rating

This scatter plot visualizes the relationship between release year and IMDb rating for the top 250 movies, with each point colored by genre. The visualization uses D3.js scales to map year and rating to x and y coordinates, while a categorical color scale assigns distinct colors to the seven most frequent genres. A legend identifies the genre colors, and both axes include labeled tick marks. The code processes CSV data in React, flattening multi-genre entries before passing them to the visualization module.

Week 6: IMDB Top 250 Movies Movie Bubble Chart: Movie Runtime Trends Over Time

Week 5: IMDB Top 250 Movies Histogram: Movie Runtime Distribution

Week 5: IMDB Top 250 Movies Movie Bubble Chart: Movie Runtime Trends Over Time

A bubble chart displays the IMDB Top 250 movies by release year on the x-axis and runtime in minutes on the y-axis, with circle size encoding ratings and color encoding genre. The visualization reveals trends in movie runtimes over time. Using D3.js v7 within a React app, the code loads data from a CSV, parses runtime strings, and applies scales for positioning, sizing, and coloring via `scaleLinear` and `scaleOrdinal`.

Week 5: IMDB Top 250 Movies Scatter Plot: Year VS Rating

This scatter plot displays the release year and IMDB rating of the top 250 movies from Kaggle, with each film shown as a colored circle representing its genre. The visualization uses the React framework to load data from a CSV file, then relies on d3.scaleLinear and d3.extent to map the year and rating axes, while d3.scaleOrdinal with a category-10 scheme colors the points by genre. Fixed-radius dots at 70% opacity reveal the distribution of critically acclaimed films across decades, with axes rendered via d3.axisBottom and d3.axisLeft.

Week 5: IMDB Top 250 Movies Bar Chart: Genre VS Count

This bar chart visualizes the distribution of genres among IMDb’s Top 250 movies, showing how many films fall into each genre category. Using D3.js v7 within a React component, the code loads movie data from a CSV file, splits each movie’s comma-separated genre list, and counts occurrences to create the dataset. The chart employs scaleBand and scaleLinear for positioning, with bars colored via a linear color gradient from light to dark blue. The y-axis represents genre counts, while rotated labels on the x-axis identify each genre.

Week 4: IMDB Top 250 Movies Scatter Plot with React & D3

This scatter plot visualizes the IMDB Top 250 movies dataset, mapping each film's release year on the x-axis against its user rating on the y-axis. Each point represents a movie, colored by its primary genre, revealing trends in how ratings have evolved over cinema history. Built with React and D3.v7, the implementation uses `scaleLinear` for axes and `scaleOrdinal` with `schemeCategory10` for genre coloring. The code reads from a local CSV file, applying numeric coercion before rendering the visualization with the `viz` function.

Fork of Week 5: IMDB Top 250 Movies Bubble

This scatterplot visualizes IMDB’s Top 250 movies, plotting each film’s release year on the x-axis against its runtime in minutes on the y-axis. Circle size encodes the movie’s rating, while color distinguishes its primary genre. The visualization uses D3 v7 scales including `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` for positioning, radius, and categorical coloring, with React managing the SVG lifecycle. Data is loaded from a CSV file and filtered to exclude missing values before rendering.

WHR2024

Week 5: viz-happiness-2024 Scatter Plot

This scatter plot visualizes the World Happiness Report 2024 data, mapping each country's Ladder score against its explained component from Log GDP per capita. The visualization uses D3 v7, importing data via `csvParse` and rendering the filtered dataset with a simple `pre` element display. The interactive example loads the CSV file asynchronously, parses and converts the relevant columns to numeric values, and filters out any rows with missing Ladder score or GDP data before presenting the results.

Week 5: IMDB Top 250 Movies Bar Chart

Fork of Circles with D3

This gallery example uses D3.js v7 to render a circular composition of filled circles on an SVG canvas. A large purple circle is positioned at the center, while six smaller circles with vivid colors orbit around it, evenly spaced using basic trigonometric placement with `Math.cos` and `Math.sin`. The layout dynamically adjusts the ring radius based on container dimensions and circle sizes, ensuring the arrangement fits within the viewport. The code uses D3’s data join pattern with `selectAll().data().join()` to bind circle elements, applying position, radius, and color attributes with 70% opacity against a light green background.

IMDB Top 250 Movies Scatter Plot with React & D3

A scatter plot of the IMDB Top 250 movies displays release year on the x-axis and rating on the y-axis, using steel-blue circles. The React component loads the dataset via `d3.csv` and passes it to a custom `viz` function, which employs `d3.scaleLinear` and `d3.extent` to set the scales. Static circle attributes like `cx`, `cy`, and `r` are set using `selection.attr`, with no axes or interactivity included.

IMDB Top 250 Movies.csv

This example loads the IMDB Top 250 Movies dataset and initially displays the raw parsed data as a JSON string in a `<pre>` element. It uses D3 v7's `csvParse` to fetch and transform the CSV file, converting numeric fields like rank, year, rating, budget, and box office to numbers, and parsing run_time strings into total minutes. The visualization shows a loading state before the data appears, demonstrating a simple data-loading and parsing workflow with D3's file handling and selection APIs.

Fork of React Starter

This example shows a minimal React application that renders the text “Hello React!” centered on the page. The code uses React 19 and `react-dom/client` to mount a functional component into a `#root` element, with styling applied via a CSS class. It demonstrates the basic structure of a React starter template, including an import map for loading React and JSX runtime modules from a CDN.

Circles with SVG

This example demonstrates how to generate and display a set of circles using SVG within a simple HTML page. The code relies on standard SVG elements to draw each circle, with no external visualization library involved. It uses basic SVG syntax for positioning and styling the circles, while the overall structure is built directly in the HTML body. The rendering approach is static, showing circles as visual primitives without any interaction or animation. The example serves as a minimal starting point for creating SVG-based graphics in a browser environment.

Global_education

This visualization displays educational metrics across countries and regions, using the World Educational Data dataset from Kaggle. It renders the data as raw JSON in a `<pre>` element, with the dataset loaded via `fetch` and parsed using `d3.csvParse`. Each row’s numerical attributes, such as out-of-school rates, completion rates, and proficiency scores, are converted to numbers using the unary plus operator, and geographic coordinates (latitude and longitude) are also parsed. The visualization uses the D3 library for data loading and DOM manipulation via `select`, with state management handled through custom `setState` and `render` functions.

viz-happiness-2024

This example displays the raw data from the World Happiness Report 2024 as a formatted JSON preview, showing country names and their associated happiness indicators including Ladder score, social support, and GDP per capita. The visualization loads data from a CSV file using the `fetch` API and parses it with `d3.csvParse`, converting numeric fields from strings to numbers. The code renders the parsed data structure in a `<pre>` element, providing a simple text-based investigation of the dataset before any graphical mapping is applied. The implementation follows a state management pattern where data loading triggers a re-render of the view.

Fork of circles

This example displays the text “Hello World!” at a large, fixed font size, centered within the container. The code directly sets the HTML content using a template literal, applying a font-size of 217 pixels via inline styles. It demonstrates a minimal, static visualization approach, relying solely on the DOM and CSS for styling. No data is loaded, and no external libraries such as D3 or Canvas are used. The entire rendering is handled by the browser’s native HTML and CSS engine.

Fork of Circles with D3

This example renders seven semi-transparent circles in fixed positions across a light green background using D3 v7. Each circle is defined by explicit x, y, radius, and fill color data, with the `select` API and `.join()` pattern binding data to SVG circle elements. The visualization demonstrates basic data-driven shape generation and styling through D3’s attribute setters, producing a static, colorful composition without interaction or animation.

Fork of Blank Slate

A minimal example that renders the text "Hello World!" in a single, large font size of 217 pixels, centered horizontally within the container. The code sets the font size as a JavaScript variable and injects it into an HTML string via a template literal. It relies on the Observable Plot v3 API's `main` export function to receive the container element, with no external data or interaction beyond the optional Alt-drag behavior.

Fork of Circles with D3

This example renders seven semi-transparent circles in fixed positions across a light green background using D3 v7. Each circle is defined by explicit x, y, radius, and fill color data, with the `select` API and `.join()` pattern binding data to SVG circle elements. The visualization demonstrates basic data-driven shape generation and styling through D3’s attribute setters, producing a static, colorful composition without interaction or animation.

Fork of Visual Editor Demo