R

Rochelle

@Rochelle-Wu·22 public vizzes

Loading thumbnail…

The Sales Number VS The Different platform

This dashboard visualizes video game sales across four coordinated charts: a bar chart of publisher sales, a scatter plot of regional sales, a stacked bar chart of genre sales by continent, and a rose chart of platform counts. The D3 v7 code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.pie`, and `d3.arc` to render these SVG views, with animated transitions and interactive tooltips. Users can filter the bar chart by genre and year range using dropdown menus. All charts share a CSV dataset of video game sales loaded via `d3.csv`.

Loading thumbnail…

Game sale >5 Million with Brushing

A D3 scatter plot displays video game sales over time, plotting each game's release year against its global sales figures. Users drag a rectangular brush across the chart to highlight selected points in pink while dimming others, and a hidden table populates with the game name, year, and sales data for brushed points. The visualization uses d3.brush for selection, d3.axisBottom and axisLeft for scales, and loads CSV data from a GitHub-hosted Kaggle dataset.

Loading thumbnail…

Game sale with Brushing

This scatter plot visualizes video game sales data from Kaggle, plotting global sales against year of release. Users can brush a rectangular region over the plot to select and highlight specific data points in pink, while unselected points dim to gray. Upon brush completion, a table appears listing the game name, year, and global sales for all highlighted entries. The visualization leverages d3.brush for interaction, d3.csv for data loading, and standard d3.scaleLinear, d3.axisBottom, and d3.axisLeft for the axes and scales.

Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes income breakdown across three categories—Sales, Dividends, and Interest—using repeated rows from a CSV file. Built with D3 v5, it renders an SVG donut with labeled slices and a hover tooltip displaying each category’s percentage. The code leverages `d3.pie` for arc calculation, `d3.arc` for path geometry, and `d3.scaleOrdinal` for color mapping. Hovering highlights a slice and dynamically positions a tooltip using mouse coordinates.

Loading thumbnail…

D3 Scatter Plot for Video Game Sales

This D3 v6 scatter plot visualizes global video game sales across years, with each point representing a game and its platform encoded by color. Using SVG rendering, it scales the x-axis by year and y-axis by sales, allowing viewers to compare platform performance over time. The chart includes a d3.brushX brush for interactive selection and highlighting of data ranges, with d3.scaleLinear handling axis scales. Data comes from Kaggle’s video game sales dataset, parsed from CSV via d3.csv.

Loading thumbnail…

Scatter Plot For > 5 million Video Game Sales -brush

This scatter plot visualizes over 5 million video game sales, comparing global sales against year for various platforms. Users can select different quantitative variables—such as North America, EU, or Japan sales—for the x- and y-axes via custom dropdown menus. The chart uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with d3.brush enabling interactive selection of data points. Animated transitions via d3.transition and selection.join update circle positions and radius. Data comes from a CSV file loaded with d3.csv.

Loading thumbnail…

The sales number for Wii Series Platform

This bar chart visualizes global sales figures for Wii and Wii U video games, sourced from a TidyTuesday dataset derived from TheGlobalEconomy.com. The chart sorts games by descending sales, with a steelblue bar for each title and labeled axes for game name and sales in millions. The visualization uses D3 v7 with `scaleBand` and `scaleLinear` to map data to SVG rectangles, rotates the x-axis labels for readability, and includes a title. The y-axis is fixed to a 0–90 million range.

Loading thumbnail…

The Sales Number VS Publisher for the different genre

This interactive bar chart shows total global video game sales in millions for major publishers, with buttons to filter the display by game genre such as Sports, Racing, or Action. Each genre button triggers a D3.js update that re-aggregates the CSV data from a gist source, re-sorts publishers by summed sales, and animates the bars over one second via transition. The SVG chart uses d3.scaleBand and d3.scaleLinear for axes, rotates the x-axis labels, and joins rect elements to reflect the updated dataset.

Loading thumbnail…

Scatter Plot For > 5 million Video Game Sales

This interactive scatter plot visualizes over 5 million video game sales, using the d3 library to map various sales figures (such as North American, European, or global sales) to the x and y axes. Users can dynamically change the axes through HTML menus, with each point colored by the game's platform, such as Wii or PS. The SVG chart animates transitions via d3's `transition` API as selections change, and the chart is built with reusable, modular charts as seen in the `scatterPlot` and `menu` JavaScript files.

Loading thumbnail…

The ratio of

This donut chart visualizes the proportion of five apple values from a static dataset. The chart uses a blue-to-red color scale and places value labels outside the donut’s outer radius, with thin pointer lines and circular markers connecting each label to its corresponding arc segment. Built with D3 v6, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, rendering labels and markers as SVG text and path elements, with label positioning calculated from arc start and end angles.

Loading thumbnail…

The number of video game sales bar plot

A bar plot shows global video game sales for hundreds of game-platform combinations from a Kaggle dataset, loaded via a gist CSV URL. The example uses D3 v7's `scaleBand` for the categorical x-axis, `scaleLinear` for the numeric y-axis, and renders steel-blue rectangles with `svg` and `selectAll('barplot')` integration. Axis labels are rotated 45 degrees via `attr('transform', 'translate(-10,0)rotate(-45)')`. The chart’s height is fixed at 500 pixels, with margins adjusting the plot area.

Loading thumbnail…

D3 Scatter Plot-Nuclear Explosions

This scatter plot visualizes global nuclear explosions, mapping detonation year on the x-axis and depth on the y-axis for each test. The dataset, sourced from the Stockholm International Peace Research Institute, is color-coded by country using a fixed palette. The code loads CSV data via `d3.csv`, scales positions with `d3.scaleLinear`, and renders circles as SVG elements. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while the plot fills the browser window with a responsive layout.

Loading thumbnail…

D3 Scatter Plot for Video Game Sales

This scatter plot visualizes video game sales data from Kaggle, showing global sales figures against release year for each title. The visualization uses D3 v6 with an SVG rendering approach, employing `d3.csv` for data loading, `scaleLinear` for both axes, and `axisLeft`/`axisBottom` for tick generation. Circles are positioned using x/y coordinates derived from the year and sales values, with a fixed radius of 5 pixels, and the chart fills the entire browser window using `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

D3 Scatter Plot for Education rate of Student

This D3 scatter plot shows the student-to-teacher ratio across different countries over time, with each circle representing one country-year observation. The data comes from the Global Economy rankings via a tidytuesday GitHub dataset, loaded as CSV with d3.csv. The visualization uses d3.scaleLinear for both the x-axis (year) and y-axis (student ratio), along with d3.axisLeft and d3.axisBottom to render the axes. Circles are drawn in SVG with semi-transparent fills, positioned using the projected coordinates from the scales.

Loading thumbnail…

The ratio of students in the country (Primary Education)

This visualization shows the ratio of students in primary education across countries, with bars sorted in descending order to highlight the highest ratios. A bar chart rendered with SVG uses D3 v7’s `scaleBand` and `scaleLinear` to position and size the rectangles, while `d3.axisBottom` and `d3.axisLeft` display the country-year labels and ratio scale. The data is loaded from a CSV file sourced from the Global Economy and tidytuesday dataset, with bars colored steelblue and axis labels added via SVG text elements.

Loading thumbnail…

The ratio of students in the country bar plot

This bar plot shows the student-to-teacher ratio for every country-year pair in a global education dataset. Each vertical bar represents one country-year combination, with bar height mapped to the ratio value, while the x-axis lists concatenated country codes and years. The visualization uses D3 v7’s `scaleBand` and `scaleLinear` to position and size rectangles, and loads data from a CSV file via `d3.csv`. The data originates from the Global Economy rankings and was consolidated through a TidyTuesday GitHub repository.

Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with sized points representing nuclear explosions, where the point radius corresponds to the blast depth. The map is rendered using SVG with D3’s `geoNaturalEarth1` projection, showing graticules, land masses, and country boundaries from the World Atlas TopoJSON. City data, sourced from a CSV of nuclear explosions, is plotted as semi-transparent teal circles scaled by a `scaleSqrt` size scale based on depth values. The visualization is built with React, D3 v5 for geospatial projection and data loading, and topojson for processing world atlas shapes.

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using a square root scale to encode population values. The visualization renders geographic landmasses, graticules, and interiors via D3’s `geoNaturalEarth1` projection and `geoPath`, while city points are positioned with the same projection. Data comes from a Simplemaps CSV of cities with populations over 50,000, and country boundaries from TopoJSON’s world-atlas. React manages the component state, and SVG circles use a max radius of 15 pixels with a teal fill.

Loading thumbnail…

World Population Data

This example displays basic metadata about the world population dataset from 1960 to 2020, including its file size, row count, and column count. The visualization itself is minimal, showing only these statistics in a large text element. The code loads the CSV data using D3 v5’s `d3.csv` method, then calculates and displays the dataset’s size using `d3.csvFormat` and the built-in `data.length` and `data.columns.length` properties. It also includes commented-out alternatives using the Fetch API and `d3.csvParse`.

Loading thumbnail…

Video Game sales

This example displays basic metadata about a video game sales dataset, showing its size in kilobytes, row count, and column count in large text. It loads a CSV file from a GitHub gist using the D3.js v5 `d3.csv` method, then formats the content with `d3.csvFormat` to calculate the data’s byte size. The code also includes commented alternatives using the Fetch API and async/await with `d3.csvParse`. The dataset originates from Kaggle’s video game sales collection, with the visualization serving primarily to demonstrate CSV loading and summary statistics.

Loading thumbnail…

PM2.5

This example displays the size and structure of a PM2.5 global air pollution dataset. A large text message reports the file size in kilobytes, the number of rows, and the number of columns after loading the CSV. The code uses D3.js v5’s `d3.csv` method to fetch and parse the data from a GitHub Gist, then computes the metrics using `d3.csvFormat` and array properties. The data originates from a Kaggle dataset covering mean annual PM2.5 exposure for 240 countries from 2010 to 2017.

Loading thumbnail…

SVG Fundamentals

This example demonstrates a collection of basic SVG shapes, including overlapping circles, squares, and a stylized face with a hat, drawn directly in an HTML file using the SVG markup language. It shows how paths, circles, and rectangles can be combined with various stroke and fill colors to create illustrative figures. The rendering uses native SVG elements like `path` and `circle` within an inline `<svg>` container, without relying on external JavaScript libraries. The design is inspired by a Kati-dev-hu tutorial.