Y

YF

@ilovemanu·36 public vizzes

Loading thumbnail…

Final Project

This example visualizes labor force information for college graduates, filtering the data by major category and STEM status. The main chart is an animated scatter plot, where the y-axis is categorical and the x-axis is a selected numeric measure. Users can interact by changing the x-axis through a dropdown menu and clicking legend items to filter the data and a supporting table. The visualization is built with D3 v5, using SVG and transitions for the animation. Legend selection triggers an update to the data table, and a tooltip appears on mouseover. The rendering also applies a mix-blend mode to the circles, and the dataset is loaded from a CSV file.

Loading thumbnail…

Project prototype 10/17

This interactive scatter plot visualizes earnings and labor force data for college graduates by major, sourced from FiveThirtyEight. Users select X and Y axes from dropdown menus, exploring relationships between variables like median salary and unemployment rate. Circles are colored by major category with a clickable color legend that filters selections. The visualization uses d3.csv, d3.scaleLinear, axis generators, and SVG animations with transitions, rendering interactively within a single-page d3.v5 application.

Loading thumbnail…

HW Map with Selectable Countries

This map visualizes world countries using a natural Earth projection, rendered with SVG paths via the d3.geoPath and d3.geoNaturalEarth1 APIs. The choropleth initially displays all countries in light green against a dark sphere. Clicking a country highlights it in a distinct green and displays its name in a fixed banner, allowing users to explore geographic identities interactively. Country names come from the world-atlas TSV dataset, joined to the TopoJSON geometries via their ISO numeric codes. The visualization also includes zoom functionality through the d3.zoom module, which applies a transform to the map group.

Loading thumbnail…

(HW) Let's make a face with D3.js!

An animated yellow face with a black outline reacts with embarrassment as its eyes shrink, eyebrows dart upward, and rosy cheek circles appear. The mouth narrows from a wide rectangle to a thin line, reflecting a bashful expression. This D3.js v5 example demonstrates fundamental SVG manipulation and chained transitions, using `d3.select` to target elements and `transition().duration()` to sequence animations of circles, rectangles, and groups. The face is centered via SVG transforms, with data-driven attributes set imperatively.

Loading thumbnail…

HW Scatter Plot

This scatter plot visualizes candy brands from FiveThirtyEight’s Ultimate Halloween Candy Power Ranking, showing sugar content against price. It demonstrates that there is little correlation between the two variables. The visualization uses d3.csv to load the data, d3.scaleLinear to map values, and d3.axisBottom and d3.axisLeft to render axes with grid lines. Data is drawn as semi-transparent purple circles using SVG, with axis labels and titles styled via CSS.

Loading thumbnail…

Project 10/24: added tooltip for each dot; will try to convert into a beeswarm

This scatter plot visualizes the earnings and labor force data of college graduates by major, sourced from FiveThirtyEight. Each dot represents a major, positioned by its category on the x-axis and a selected metric (e.g., median earnings) on the y-axis. Hovering over a dot displays a tooltip with the major’s name. The visualization uses d3’s `scaleOrdinal`, `scaleLinear`, and `scalePoint` for scaling, with dropdown menus to change the y-axis metric. Colors encode major categories, and clicking a legend entry highlights that group while dimming others.

Loading thumbnail…

prototype scatterplot

This prototype scatterplot visualizes the correlation between total graduates and median salary for 173 graduate programs, with points colored by major category using d3.scaleOrdinal. The code loads CSV data via d3.csv, applies d3.scaleLinear for both axes, and renders SVG circles with axis labels and gridlines via d3.axisLeft and d3.axisBottom. A legend enables interactive filtering by category through click events that adjust circle opacity. Data originates from FiveThirtyEight’s college majors dataset, and the chart uses d3.v5 with an SVG rendering approach.

Loading thumbnail…

HW Add a Menu

This interactive bar chart displays earnings and labor data for 16 graduate program categories, sourced from FiveThirtyEight. A dropdown menu lets the viewer select which metric to display on the y-axis. The visualization uses d3.scaleLinear and d3.scaleBand for scales, with d3.axisLeft and d3.axisBottom for axes. The bars animate via a d3.transition on rect attributes, while the menu is built with a custom dropdownMenu module.

Loading thumbnail…

HW Colored Scatter Plot With Interactive Filtering

This scatter plot visualizes the correlation between car horsepower and weight, with points colored by country of origin using the D3 ordinal color scale `d3.scaleOrdinal` and `d3.schemeDark2`. Users can click a legend item to filter the displayed points, dimming all other categories. The visualization is rendered as an SVG using D3 v5, with axes and scales built via `d3.axisBottom` and `d3.axisLeft`, and data loaded from the UCI Auto MPG dataset.

Loading thumbnail…

(HW) The World's Highest Paid Athletes in 2018

This bar chart displays the top 10 highest-paid athletes of 2018, with earnings combining salaries and endorsements from Forbes data. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for wealth values and `scaleBand` for athlete names. Axes are generated via `axisLeft` and `axisBottom`, while bars are appended as rectangles with widths proportional to each athlete’s total earnings in millions.

Loading thumbnail…

Project 10/31

A scatter plot uses a dropdown menu to compare different earning and labor force metrics for college majors from FiveThirtyEight data. Colored circles represent major categories, while a clickable legend filters points by STEM status. SVG elements animate into place using D3 transitions. The implementation relies on D3 scales, axes, and selection methods, with tooltips displaying major names on mouseover.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot from the D3 v5 gallery displays car attributes from the UCI Auto MPG dataset, with dropdown menus controlling the x- and y-axis variables. Users select columns like horsepower or weight to update the axes, and points animate to their new positions over two seconds using chained transition and delay methods. The visualization uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and SVG circles with opacity, while custom dropdown menu functions bind change events to trigger re-renders.

Loading thumbnail…

HW Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the d3 general update pattern’s special cases, using a bowl of fruit to show what happens when data entries are removed, replaced, or reordered. Animated transitions shrink and fade out exiting circles and text, while entering elements are drawn at their new positions. The code relies on d3’s `select`, `scaleOrdinal`, and `transition` APIs, with SVG rendering and pre-set timeouts driving the sequence. The fruit types are encoded by color and radius, with text labels showing type names, all within a static bowl-shaped rectangle.

Loading thumbnail…

HW Re-create Marks & Channels Graphic

This visualization recreates four basic symbol marks—cross, circle, square, and triangle—arranged horizontally across the center of an SVG canvas. The marks are generated using d3.symbol with a fixed size of 1000, while a d3.scaleLinear maps the array index to x-coordinates spaced 200 pixels apart. Each symbol is rendered as a purple-filled SVG path element, selected and bound to data via d3.select and data joins. The code uses d3 v5 and relies on importing select, scaleLinear, and symbol from the d3 module.

Loading thumbnail…

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart customizes both axes by removing default domain lines and tick lines, and formats population labels to abbreviate numbers with a "B" suffix. Built with d3.v5, it uses `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG, with tick lines extended across the plot area and a custom axis label.

Loading thumbnail…

Bowl of Fruit - Gerenal Update Pattern

Five circles representing fruit transition through a bowl using the general update pattern, with apples rendered larger in red and lemons smaller in yellow. The animation removes, replaces, and filters fruits sequentially over time, demonstrating enter, update, and exit selections. Built with d3.v5, the code uses `scaleOrdinal` for color and radius, `transition().duration(1000)` for smooth SVG circle animations, and `merge` to handle state changes.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be drawn and styled using SVG elements and CSS. It shows shapes with default black fills, explicit color fills, grouped shapes with shared stroke and fill attributes, and a separate class for lines and paths that applies stroke styling via CSS rules. The code uses plain SVG markup within an HTML page, with a linked stylesheet for class-based styling, and includes an ES6 module exporting a message.

Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate color and size legends for ordinal and quantitative scales. The color legend maps categorical fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` with `ticks` to display five circle radii. Both legends are built with reusable functions that append SVG `<g>` groups, circles, and text elements. The code uses D3 v5 APIs including `selection.call`, `selection.merge`, and `selection.exit` to update legend components dynamically.

Loading thumbnail…

Prototype-scatterplot

This scatterplot visualizes the relationship between total graduate students and the number employed, using data from a CSV file. It reveals little correlation between the two variables, as points are widely dispersed. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and SVG circles for data points. Axes labels and a title are added via SVG text elements, with tick formatting applied through `format('.2s')`. The data comes from the VizHub-hosted graduate students dataset.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with d3.axisLeft and d3.axisBottom to render the axes. Data is loaded from a CSV file via d3.csv and rendered as SVG rectangles, with each bar’s width proportional to its country’s population. The chart highlights the vast population disparity between China and India and the remaining nations.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using D3's `geoNaturalEarth1` projection and `geoPath`, with an ordinal color scale from `schemeSpectral`. Clicking a legend item filters the map by highlighting matching countries and dimming others, while the sphere fades to emphasize the selection. The visualization loads country boundaries from TopoJSON world-atlas data and supports pan and zoom via `d3.zoom`, with tooltips showing country names and values.

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates a click-to-select interaction with animated transitions. Apples and lemons render as colored circles using D3 v5's `scaleOrdinal` for color and radius, with smooth 1-second transitions on enter, update, and exit. Users click a fruit to highlight its selection with a black stroke. The code uses `selection.data`, `merge`, and `transition` to animate changes, while a script removes, replaces, and reorders fruits over time to show dynamic updates.

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic classification using an ordinal color scale derived from world-atlas data. The visualization renders geographic boundaries with `d3.geoPath` and a natural Earth projection, while a custom color legend explains the categorical mapping. Pan and zoom interactions are enabled via `d3.zoom`, and hover effects highlight individual countries. The map uses TopoJSON for country outlines and TSV metadata for economy labels.

Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth from 1950 to 2015, using a filled path to represent the trend over time. Built with D3 v5, it employs `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` for the smoothed area, and `axisLeft`/`axisBottom` for gridlines and labels. Data is loaded from a CSV file using `csv`, with population values formatted in billions.

Loading thumbnail…

Scatter Plot

A scatter plot displays the populations of the top 10 most populous countries, using a linear x-axis for population values and a categorical y-axis for country names. Circles sized at a fixed radius of 18 represent each country, with the data sourced from the 2018 United Nations World Population Prospects. The visualization is built with d3.v5, using d3.scaleLinear, d3.scalePoint, d3.axisBottom, and d3.axisLeft to create the axes and gridlines, rendered as an SVG. Population numbers are formatted with d3.format and displayed as millions, while the chart includes a title and axis label.

Loading thumbnail…

Grad_Students Data Table Summary

This example presents a terminal-style summary of graduate student earnings and labor force data from FiveThirtyEight’s “Economic Guide to Picking a College Major.” The visualization displays the dataset’s row and column counts, its size in kilobytes, and the first ten rows as formatted JSON. Using d3.csv to load the data and d3.csvFormat to calculate size, it renders the output as ASCII text in a black page with green monospace styling. The code relies on D3 v5’s selection, CSV parsing, and formatting utilities.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a zoomable world map rendered with D3 v5 and TopoJSON, where hovering over any country highlights it in red. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw country boundaries from the world-atlas 50m dataset, with country names added as tooltips using `<title>` elements. Interaction combines `d3.zoom` on the SVG for pan and zoom transformations, plus CSS `:hover` styling for the highlight effect. The base map and sphere are drawn as SVG paths, with data joined from TSV metadata and JSON topology.

Loading thumbnail…

Let's make a map wit D3.js

This example presents a world map using the Natural Earth projection. It renders continents as light green shapes with subtle black borders against a blue spherical backdrop, showing the capabilities of D3.js for geospatial visualization. The code loads GeoJSON data from the `world-atlas` package and processes it with `topojson`'s `feature` function before projecting it using `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization is drawn as SVG paths, with the sphere and country elements styled via CSS classes.

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles representing fruit transition into and out of a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit highlights it with a black stroke, while the `fruitBowl` function uses D3 v5's data join and `transition().duration(1000)` to animate shape changes. The example demonstrates ordinal scales for mapping fruit type to color and radius.

Loading thumbnail…

Bowl of Fruit - Gerenal Update Pattern (with text and the bowl)

This example demonstrates the general update pattern in D3 v5, showing how to manage enter, update, and exit selections for a bowl of fruit. Apples and lemons are rendered as colored circles with labels, positioned above a rounded rectangle bowl. The data array changes over time as fruits are removed or replaced, and D3’s selection methods (`enter`, `merge`, `exit`) handle the updates smoothly. Color and radius mapping is done via `scaleOrdinal`, while SVG circles and text are bound to the fruit data.

Loading thumbnail…

USD-RMB Exchange Rate 2017

This line chart shows the USD-RMB exchange rate over the course of 2017, using data from Dollar Yuan Exchange Rate at macrotrends.net. The visualization renders as an SVG and uses d3.v5’s `scaleTime`, `scaleLinear`, and `line` with `curveBasis` to draw a smooth path. Axes are generated with `axisBottom` and `axisLeft`, and the y-axis tick labels are formatted using `format('.3s')`. The chart includes labeled axes for time and exchange rate, plus a title.

Loading thumbnail…

Temperature in SF Line Chart

This example visualizes a week of temperature data in San Francisco using a smooth line chart. The SVG chart maps time on the x-axis and temperature on the y-axis, with clear axis labels and a title. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, d3.line with curveBasis for the smoothed line, and d3.axisBottom and d3.axisLeft to render the axes with gridlines.

Loading thumbnail…

Temperature in SF Scatter Plot

This scatter plot visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The code uses d3.scaleTime and d3.scaleLinear to map data, d3.axisBottom and d3.axisLeft for axes, and renders circles via SVG. Data is loaded as CSV and parsed into Date and numeric values before rendering. Grid lines and styled labels provide context for the temporal and thermal trends.

Loading thumbnail…

Traffic_Deaths Data Table Summary

This visualization summarizes a WHO dataset on road traffic deaths by country and road-user type. It displays the dataset’s total row count, column count, and size in kilobytes, followed by the first 10 rows formatted as JSON. The code uses `d3.csv` to load the external CSV, `csvFormat` to compute its size, and D3 selections to append the summary text to a black-styled body. The terminal-like green-on-black presentation emphasizes the data’s structure over graphical mapping.

Loading thumbnail…

Drinks Data Table Summary

This example displays a textual summary of a dataset on alcohol consumption by country, sourced from FiveThirtyEight. It shows the total number of rows and columns, the data size in kilobytes, and the first ten rows as formatted JSON. The visualization uses `d3.csv` to load the data and `csvFormat` to calculate its byte size, then appends the results to the page as `<pre>` elements with D3's `select` and `append` methods.

Loading thumbnail…

Hello VizHub!

Hello VizHub! greets viewers with a large, bold "Hello VizHub!" message rendered in white Ubuntu font against a dark gray background. The example demonstrates basic D3.js DOM manipulation using the `select` function to target a `div` element and set its text content. The message itself is imported from a separate ES6 module, showcasing modular JavaScript structure. Styling comes entirely from CSS, with D3 handling only the text assignment. The visualization serves as a minimal introduction to D3's selection API and modern JavaScript module imports.