E

Eunice Tu

@eunicetu16·38 public vizzes

Loading thumbnail…

Diverging Bar chart in D3

A diverging bar chart displays the population percent change across U.S. states, using the State Demographic dataset from the U.S. Census Bureau. The chart shows each state’s population change from April 1, 2020 to July 1, 2019, with positive changes extending right and negative changes extending left from a central zero axis. D3 v7’s `scaleLinear`, `scaleBand`, and `scaleSequential` with an `interpolateRdBu` color scheme map values to positions and colors, while the `d3.legend` plugin adds a color legend. Data is loaded as CSV via `d3.csv` and rendered as SVG rectangles.

Loading thumbnail…

Node-link diagram with force-directed layout in D3

This node-link diagram visualizes the FIRM-HI-TECH dataset, showing the connections between entities as a force-directed network. The visualization uses D3 v7 with d3.forceSimulation to position nodes and links, applying charge, link, and center forces to create an organic layout. Nodes are rendered as colored circles using d3.scaleOrdinal with the schemeSet1 palette, while links appear as thin black lines. Interactive tooltips appear on hover, displaying the node ID and enlarging the circle for emphasis. The data is loaded as CSV and parsed into numeric source and target values for the simulation.

Loading thumbnail…

Adjacency matrix in D3

This example uses D3 v7 to render an adjacency matrix for the FIRM-HI-TECH dataset from networkrepository.com. It shows the relationships between firms as a grid of lightblue cells, where each row and column represents a node. The code loads CSV data with `d3.csv`, builds a matrix using a JavaScript `Map` and `Set`, and applies `d3.scaleBand` for the axes. Hovering highlights the row and column via stroke-width changes and displays a tooltip with the matrix cell’s link. The SVG is drawn with appended `rect` elements, and the interface includes numbered axis labels.

Loading thumbnail…

multi-line Chart in D3

This multi-line chart visualizes the average daily cigarette consumption among smokers in the top five countries from 1980 to 2012, using data from the CORGIS smoking dataset. The chart displays five distinct colored lines, one per country, with dots marking individual yearly data points. Built with D3 v7, the visualization employs `d3.csv` to load data, `d3.group` to organize by country, and `d3.scaleLinear` for both axes. The color scale uses a ColorBrewer qualitative scheme, while the legend is generated using the d3-legend library's `d3.legendColor` function. The SVG rendering includes labeled axes and a title.

Loading thumbnail…

Small multiple line chart in D3

This small multiple line chart displays the average daily cigarette consumption for smokers across eight countries between the years 2000 and 2010, using data from the CORGIS smoking dataset. Each country’s time series is rendered as a separate line within a small SVG panel, with a shared y-axis scale, while a categorical color legend distinguishes the countries. The visualization is built with D3 v7, using `d3.csv` for data loading, `d3.scaleLinear` for axes, `d3.line` for path generation, and `d3.legendColor` for the color key. The color palette comes from ColorBrewer, and the overall layout follows a referenced small-multiple line chart pattern.

Loading thumbnail…

Heatmap with time series in D3

A heatmap displays annual property-crime rates for U.S. states from 2000 to 2019, using color intensity to show per-100,000-person offense counts. It uses `d3.scaleThreshold` with `d3.interpolateBlues` to map rates to colors and a sequential color scale for fill, while `d3.legendColor` provides a threshold legend. Data comes from the CORGIS smoking dataset, filtered for property crimes. Tooltips reveal exact values on hover, and axes are labeled using `d3.axisBottom` and `d3.axisLeft`, with the SVG rendered via D3 v6.

Loading thumbnail…

test

This example displays multiple small multiples line charts, each representing a different data group from a CSV file. The visualization uses d3.csv to load the dataset and d3.nest() to group data by the "name" column, then creates an SVG element for each group. Each chart shows a line colored by a d3.scaleOrdinal palette, with d3.axisBottom and d3.axisLeft for the x and y scales. The data source is a remote CSV from GitHub, rendered using D3 version 4's SVG path generation.

Loading thumbnail…

Heatmap with tooltip: Billionaires D3

This heatmap shows the total wealth in billions for billionaires grouped by region and wealth type, with a tooltip revealing exact values on hover. The visualization uses D3 v6 to render an SVG grid where each rectangle’s fill color is mapped via `d3.scaleLinear` from white to steelblue. Axes are built with `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`, while mouse events control the tooltip’s opacity and position. Data comes from the CORGIS Billionaires Dataset, pre-aggregated and loaded as CSV via `d3.csv`.

Loading thumbnail…

Qualitative Scatter Plot in D3

This qualitative scatter plot displays the relationship between passenger age, fare paid, and survival status for 887 Titanic passengers. Each circle represents a passenger, with blue and red indicating survival (1) or non-survival (0), using a color scale from D3’s ordinal scale. The visualization uses D3 v7 to load CSV data from a remote source and render SVG circles, axes, and a legend. The code specifically employs `d3.csv`, `d3.scaleLinear` for the x (age) and y (fare) axes, and `d3.legendColor` to create the categorical legend, with the chart positioned within an SVG container using custom margins.

Loading thumbnail…

Diverging Bar chart in D3

This diverging bar chart visualizes population percent changes across U.S. states between April 2020 and July 2019, using horizontal bars that extend left or right from a central zero axis. The visualization first loads CSV data via `d3.csv`, then applies `d3.scaleLinear` for axes and bar lengths, `d3.scaleBand` for the categorical y-axis, and `d3.scaleSequential` with an `interpolateRdBu` color scheme. A color legend is generated using `d3.legendColor` from the d3-legend plugin, while bars are rendered as SVG `<rect>` elements. The chart includes axis labels, a title, and subtitle, all styled with D3 v7.

Loading thumbnail…

Fork of D3 Diverging Color Bar Chart

This fork of a D3 diverging color bar chart visualizes state-level changes in natural gas consumption by the electric power sector, with horizontal bars diverging from a central zero axis. The chart encodes each state’s positive or negative percentage change through bar direction and a sequential red-blue diverging color scale, using `d3.scaleLinear` for bar lengths and `d3.scaleSequential` with `d3.interpolateRdBu`. Rendered as SVG, it reads data from a CSV via `d3.csv`, and includes dual y-axes plus a color legend from the `d3-legend` plugin, with axes drawn by `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`.

Loading thumbnail…

Bar chart with a Sequential color scale in D3

This bar chart displays the average fiber content across six cereal manufacturers, using a sequential color scale where darker green bars represent higher fiber values. The visualization relies on D3 v7 to load a cleaned cereal dataset from a CSV, scale the categorical x-axis with `d3.scaleBand` and the continuous y-axis with `d3.scaleLinear`, and render SVG rectangles for each bar. Colors are assigned via `d3.scaleSequential` with an interpolator, while a legend generated by the d3-legend library explains the color encoding. The chart includes labeled axes, a title, and a subtitle, with all data drawn from the provided cereal_fiber.csv file.

Loading thumbnail…

Cereal Bubble Chart in D3

This bubble chart compares breakfast cereals by plotting calories on the x-axis, weight on the y-axis, and using bubble radius to represent ratings. Color encodes the manufacturer, with a legend showing both color categories and rating sizes. The visualization loads CSV data via `d3.csv`, renders SVG circles using `d3.scaleLinear` for axes and bubble size, and applies `d3.scaleOrdinal` with `d3.schemeTableau10` for manufacturer colors. The dataset contains nutritional information for 80 cereals from seven manufacturers.

Loading thumbnail…

Scatter Plot Matrix in D3

This scatter plot matrix displays pairwise relationships among four numeric Iris flower measurements, with points colored by species using a D3 ordinal scale. Each cell is an SVG chart rendered via `d3.axisLeft`, `d3.axisBottom`, and `d3.scaleLinear`, with diagonal cells labeling the corresponding dimension. The code loads Iris data from a GitHub Gist CSV, parses numeric fields, and iterates through all column combinations to generate a 4×4 grid of plots using `d3.csv` and `d3.select`.

Loading thumbnail…

Tesla Stock Line Chart in D3

This line chart displays Tesla’s monthly opening stock prices from March 2023 to February 2024, using data sourced from Yahoo Finance. A steel-blue path connects points across a time-scaled x-axis and a linear y-axis, with labeled axes and a descriptive title. The visualization is built with D3 v7 using `d3.csv`, `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`, all rendered as SVG within an HTML page.

Loading thumbnail…

Olympics Line Chart in D3

This example shows the opening price of Tesla stock over a one-year period from February 2023 to February 2024 as a single blue line. It uses d3.line to generate the path, with d3.scaleTime and d3.scaleLinear for the axes, and d3.axisBottom and d3.axisLeft to render them. The data is loaded from a remote CSV using d3.csv and parsed with d3.timeParse. The chart is drawn as an SVG with a steelblue stroke, includes labeled axes, and is titled "Tesla Stock - Open."

Loading thumbnail…

Fork of Bubble Chart in D3

This fork of a D3 bubble chart compares breakfast cereals by calories on the x-axis, weight on the y-axis, and rating as the bubble radius. Each circle is colored by manufacturer using the `d3.scaleOrdinal` with `d3.schemeTableau10`. The visualization includes custom legends for bubble size and manufacturer colors, rendered as SVG elements built with `d3.csv` data loading and `d3.axisBottom` and `d3.axisLeft` scales. Data comes from a CSV file hosted on GitHub.

Loading thumbnail…

Bubble Chart in D3

This bubble chart visualizes breakfast cereal data, plotting calories on the x-axis against weight on the y-axis. It uses D3 v7 with an SVG rendering approach, loading the dataset from a GitHub gist via `d3.csv`. The chart employs `scaleLinear` for both axes and renders them with `axisBottom` and `axisLeft` on an SVG group element, including a title and subtitle. The code sets explicit margins and dimensions, demonstrating a clean, static scatter-style bubble chart without any interaction or animation.

Loading thumbnail…

Bubble Chart - Cereal

This heatmap visualizes billionaire wealth by region and wealth type, using a linear color scale from white to steelblue to represent total wealth worth in billions. The tooltip reveals each cell’s exact value on hover. The code employs d3.csv to load data, d3.scaleBand for axes, d3.scaleLinear for color encoding, and SVG rectangles with mouse event handlers for interactivity. The dataset, sourced from the CORGIS Billionaires Dataset, is grouped by region and wealth type in the CSV.

Loading thumbnail…

Fork of Bubble Chart in D3

This bubble chart compares Lionel Messi’s goals and assists across seasons from 2004 to 2022, with each circle sized by the square root of goals and colored by year. It uses d3.csv to load the data, d3.scaleLinear for axes, d3.scaleSqrt for bubble size, and d3.scaleOrdinal for color mapping. The SVG rendering includes axis labels and hover effects that alter circle strokes.

Loading thumbnail…

Scatter Plot with D3

This scatter plot visualizes the correlation between city miles per gallon and engine horsepower for a dataset of cars from the CORGIS Dataset Project. The visualization reveals a moderate negative linear relationship between the two variables, shown as a dense cluster of points descending from the upper-left to lower-right. Built with D3 v7, the example uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and renders circles as SVG elements. The code loads data via `d3.csv` and converts string values to numbers before plotting.

Loading thumbnail…

Billionaires Bar Chart with D3

This bar chart visualizes the relationship between inheritance type and the average net worth of billionaires, using a dataset from the CORGIS Billionaires project. It shows how average worth in billions varies across different inherited-type categories, with horizontal bars whose lengths encode the values. The visualization is built with D3 v7, using `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis positioning, and `axisBottom`/`axisLeft` to render axes with light gray gridlines. Data is loaded via `d3.csv`, and hover states change bar colors to orange via CSS.

Loading thumbnail…

Heatmap: Billionaires D3

This heatmap visualizes billionaire wealth across regions and wealth types, with each cell colored by total wealth worth in billions and a tooltip displaying the exact value on hover. The chart uses D3 v6 with SVG rendering, employing `d3.scaleBand` for the x and y axes and `d3.scaleLinear` for the color mapping. Data is loaded from a CSV via `d3.csv`, and interactivity is handled through mouseover, mousemove, and mouseleave events that control a custom tooltip div. The visualization is titled and subtitled directly within the SVG.

Loading thumbnail…

Fork of Heatmap: Billionaires D3

This fork of the Billionaires D3 example displays a heatmap where each cell’s color intensity, using the Inferno interpolator via `d3.scaleSequential`, encodes a numeric value from a CSV file. The chart renders as an SVG with `d3.axisBottom` and `d3.axisLeft` for the categorical group and variable axes. Interactive tooltips are created with a `div` element and updated through `mouseover`, `mousemove`, and `mouseleave` events, showing the exact value of the hovered cell. The code uses D3 v6 and loads external data from GitHub.

Loading thumbnail…

Billionaires Bar Char in D3

A horizontal bar chart compares the average worth of billionaires by inheritance type, using a band scale for categorical labels and a linear scale for worth values. Built with D3 v7, the SVG visualization reads data from a remote CSV file containing billionaire statistics. The code demonstrates the `d3.csv` data-loading method, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` to render gridlines and tick marks. Each rectangle's height and width derive from the scales, with steelblue fill styling applied via CSS.

Loading thumbnail…

Fork of Bar Char in D3

This bar chart visualizes the average worth of billionaires grouped by inheritance type, showing that those who inherited wealth from a spouse or father tend to have higher average worth than those without inheritance. The visualization uses D3 v7 to render SVG elements, employing `d3.scaleBand` for both axes and `d3.axisLeft` for the y-axis ticks. Data comes from an edited CSV file loaded via `d3.csv`, which is processed by converting the inherited type values before rendering the chart.

Loading thumbnail…

Bar Char in D3

This bar chart visualizes the most successful film distributors from 1995 to 2021, ranking them by movie count on a horizontal layout. The visualization uses D3 v7 with an SVG rendering approach, employing `d3.scaleLinear` for the numeric axis and `d3.scaleBand` for the categorical distributor positions. Data is loaded from a CSV file of billionaires via `d3.csv`, with gridlines drawn as SVG lines and bars styled in steelblue. The chart includes axis labels for "Movies" and "Distributor," with animated text elements providing context.

Loading thumbnail…

Fork of Bar Char in D3

This bar chart visualizes the relationship between inherited type and average total worth for billionaires, using a dataset loaded from a GitHub gist via `d3.csv`. The visualization employs `d3.scaleBand` for the categorical X-axis and `d3.scaleLinear` for the numeric Y-axis, rendering bars as SVG rectangles. Hovering changes bar color from steel blue to orange, and axes are styled with custom CSS. The chart updates its height based on the maximum value in the data, with a tidy layout defined by explicit margins.

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart visualizes the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts to bar lengths and country names to vertical positions, with customized axes created through `axisLeft` and `axisBottom`. Grid lines are generated by the x-axis tick marks, and tick labels are formatted using `format('.3s')` to display values in billions. The bars are rendered as SVG rectangles with a steelblue fill, and the data is loaded from a CSV file.

Loading thumbnail…

p5.js.Strip Plot with jittering

This p5.js example visualizes highway fuel efficiency for seven car makes, plotting each vehicle’s miles per gallon as a jittered point to reveal data distribution. The sketch loads a pre-cleaned CSV from a GitHub gist using `loadTable`, groups rows by make into a `Map`, and randomizes horizontal offsets via `random()`. Rendering uses Canvas drawing functions like `point()` and `line()` to create a strip chart with labeled axes, color-coded points, and a jitter effect that reduces overlap.

Loading thumbnail…

p5.js.boxplot

This p5.js visualization shows a boxplot of car engine horsepower across different models from 2009–2012, using data from the CORGIS cars dataset. The sketch loads a CSV via `loadTable()` in `preload()`, then calculates the minimum, quartiles, median, and maximum values from the horsepower column. It draws tick marks, axis labels, and statistical summary annotations using p5.js canvas API functions like `line()`, `rect()`, and `text()`. The dark background and white strokes highlight the distribution of horsepower in the sample.

Loading thumbnail…

p5.js.histogram

This visualization shows a histogram of city MPG values for a sample of cars, displaying the count of vehicles across eight MPG bins. The p5.js sketch loads pre-aggregated data from a CSV file hosted on GitHub, then renders bars on an 800x800 canvas using the `rect()` API. The chart includes labeled axes, gridlines at 200-count intervals, and a title, with data sourced from the CORGIS cars dataset. The bars are drawn in blue against a light gray background, with the y-axis representing counts and the x-axis displaying MPG values.

Loading thumbnail…

dotplot_billionaires.p5.js

A dot plot shows the average net worth in billions for billionaires grouped by inheritance type, ranging from spouse or widow at $4.53 billion to fifth-generation at $2.64 billion. Built with p5.js, the sketch loads a remote CSV via `loadTable` in `preload`, then draws axes, gridlines, labels, and blue circles positioned by scaling each value along the x-axis in `draw`. The data comes from the Corgis billionaires dataset, filtered to two columns and averaged per category.

Loading thumbnail…

dotplot

A dot plot compares average wealth across inherited types of billionaires, using the Corgis Education billionaire dataset with two columns: inherited type and average worth. The sketch renders gray and black horizontal grid lines, axes, tick labels, and vertical bars encoded with negative height scaling based on worth values. Built with p5.js, it loads data via `loadTable`, draws shapes with `rect` and `line`, and positions rotated text using `push`, `translate`, and `rotate`. A legend and title clarify categories from not inherited to spouse/widow.

Loading thumbnail…

dot

This dot-and-bar visualization displays the relationship between inherited type and total net worth for billionaires, plotting categorical data along the x-axis and numerical worth values scaled vertically. The sketch loads a CSV dataset from a GitHub gist using the `loadTable` function in Processing (via p5.js), then draws axes, gridlines, and text labels on an 800×800 canvas. Bars represent worth values, with labels for inherited types positioned below, while the y-axis includes tick marks and numeric increments.

Loading thumbnail…

dotplot.billionaires.p5.js

This dot plot compares the average net worth of billionaires across different inheritance categories, from non-inherited wealth to those inherited through a spouse or widow. The p5.js sketch loads a filtered CSV dataset from the Corgis billionaires collection via `loadTable`, then renders labeled axes with tick marks and grid lines. It places each category label along the x-axis while computing the plotted positions from the average worth values in billions, though the visual encoding relies on the canvas drawing API rather than a dedicated charting library.

Loading thumbnail…

p5.js.billionaires.dotPlot

This dot plot visualizes the relationship between billionaire inheritance type and total wealth, with each circle representing an individual. Data is loaded from a remote CSV file using p5.js `loadTable` in `preload()`. The sketch draws axes, gridlines, labels, and data points via the p5.js `circle()` function, mapping wealth values to x-coordinates and inheritance categories to y-positions. The visualization uses a dark background and blue circles to distinguish data points.

Loading thumbnail…

p5.js.billionaires.barplot

This bar plot visualizes the average wealth of billionaires grouped by inheritance type, using a dataset derived from the CORGIS Billionaires project. The p5.js sketch loads a CSV file via `loadTable` in `preload` and renders static bars with `rect`, axes with `line`, and text labels with `text`. The y-axis tick marks and labels are manually drawn, while each bar’s height scales proportionally to the average worth value. The chart shows that spouse/widow inheritors hold the highest average worth, while fifth-generation inheritors hold the lowest.