M

meihaoming

@ming197·22 public vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores relationships between numeric attributes of cars from the UCI Auto MPG dataset. Two dropdown menus let viewers select which columns to plot on the x and y axes, with options like horsepower, weight, and acceleration. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, and `transition().duration(2000)` to animate circles from the center to their positions. The `dropdownMenu` custom module handles the menu interactions, while the scatter plot is built as a reusable SVG component.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores relationships between attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Users select any two columns to map to the X and Y axes via dropdown menus, with the selected options driving d3.csv-loaded data through d3.scaleLinear, d3.axisBottom, and d3.axisLeft. The visualization renders as SVG circles that animate from the plot’s center to their positions using d3.transition with staggered delays. The reusable custom functions dropdownMenu and scatterPlot encapsulate the menu and chart logic, updating axes and labels dynamically.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set, loading the data via `d3.csv`. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the values, with red, semi-transparent circles rendered as SVG elements. Axis labels and a title are added via appended SVG text, while gridlines and tick styling come from the axis functions. All rendering is done through the SVG API within an HTML page, using margins to position the chart.

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes global population trends from 1950 to 2100, showing how different regions change over time as multiple lines. The chart uses `d3.line` with `curveBasis` to draw smooth paths, with color encoding via `d3.scaleOrdinal` and a custom `colorLegend`. Data is melted from wide to long format using a custom `melt` function that processes UN population estimates from two CSV files, concatenating historical estimates with medium-variant projections. The visualization includes axis labels, gridlines, and a legend, with regions sorted by their final population value.

Loading thumbnail…

Bowl of Fruit-Hover to Select

Five fruit shapes sit in a bowl, with text labels beneath each. Hovering over a fruit outlines it in black and logs the selection to the console. The fruit bowl is built with D3 version 5's selection API, using `scaleOrdinal` for color and radius, and transitions animate the circles' radius over one second. Animated by timed data mutations, the example removes and replaces apples with lemons.

Loading thumbnail…

Let's make a face with D3.js!

This visualization displays the hierarchical structure of world regions and countries as a horizontal tree layout, using the country names themselves as the visual elements. The D3.js v5 code loads country data from a JSON file, applies the `tree` layout, and renders the hierarchy via SVG paths for links and text nodes whose font size scales with depth. The visualization supports pan and zoom interactions through the `zoom` function, making it easy to explore the nested geographic groupings.

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a simple animated smiley face. The face is built from SVG shapes, including circles for the eyes and a path for the mouth, all grouped and positioned within an SVG canvas. The animation shows the eyebrows moving up and down over time. The code uses D3's `select`, `append`, `attr`, and `transition` APIs to create and animate the elements.

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a simple animated smiley face. The face is built from SVG shapes, including circles for the eyes and a path for the mouth, all grouped and positioned within an SVG canvas. The animation shows the eyebrows moving up and down over time. The code uses D3's `select`, `append`, `attr`, and `transition` APIs to create and animate the elements.

Loading thumbnail…

Cheap Tricks for interaction!

This example shows an interactive world map where hovering over a country turns it red and zooming with the mouse repositions the map. It uses D3.js v5 with `d3.geoNaturalEarth1` for the projection, `d3.geoPath` for rendering, and `d3.zoom` to handle pan and zoom transforms on the SVG group. Country boundaries come from the `world-atlas` TopoJSON file, with names joined from a TSV file. The visualization demonstrates fundamental DOM selection and data binding, alongside simple CSS hover styling.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered on an SVG canvas, with countries filled in light green and outlined in black, and a blue sphere representing the global boundary. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON using the `feature` method from topojson. The map uses `d3.geoPath` with a `d3.geoNaturalEarth1` projection to generate the country outlines, while D3’s selection and data-join methods append the corresponding SVG path elements.

Loading thumbnail…

Bowl of Fruit-Click to Select

This example demonstrates a dynamic fruit bowl visualization where users can click on apples or lemons to select them, highlighting the chosen fruit with a black outline. The bowl renders as a rounded rectangle with fruit circles labeled by type, using D3.js scaleOrdinal for consistent color and radius mapping. The scene animates over time as fruits are removed, replaced, or modified through setTimeout calls. Built with d3.v5, it employs SVG rendering and transition animations, with DOM manipulation handled through d3.select and d3.range methods.

Loading thumbnail…

Bowl of General Update Pattern

The bowl of General Update Pattern animates a fruit bowl of apples and lemons, demonstrating how D3’s `selection.enter`, `merge`, and `exit` methods handle data changes. Fruits are added, removed, or mutated via `setTimeout` calls, triggering smooth radius and color transitions using `scaleOrdinal` and a 1000-millisecond `.transition()`. The SVG rendering uses a background rectangle and text labels for each fruit, with positions computed by index. The example relies on D3 v5 and the `select`, `range`, and `scaleOrdinal` utilities.

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population over time using data from the United Nations’ 2017 World Population Prospects (VizHub dataset), with a maroon filled path under a curve. The SVG render uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to build axes with grid lines and custom tick formatting (e.g., abbreviating billions). It also demonstrates axis-label placement, margin-based layout, and title styling via CSS classes.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualization displays temperature data for San Francisco over time. It presents the data as a smooth area chart with a maroon fill, overlaid on a grid with labeled axes for time and temperature. The visualization uses D3 v5 functions such as `csv` to load the dataset, `scaleTime` and `scaleLinear` for coordinate systems, and `area` with `curveBasis` to generate the filled shape. Axes are customized using `axisBottom` and `axisLeft`, while the rendered output is SVG.

Loading thumbnail…

Customizing Axes

This visualization displays a horizontal bar chart ranking the ten most populous countries, with population values converted from thousands to absolute numbers. The bars are rendered in steel blue using D3.js v5, with a linear x-scale and banded y-scale. Custom axes are implemented via `d3.axisBottom` and `d3.axisLeft`, including tick formatting that abbreviates large numbers (e.g., converting G to B) and gridlines created through tick sizing. Grid lines, axis domains, and labels are styled through CSS classes.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The data originates from Data Canvas - Sense Your City. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart. Circular SVG marks represent individual data points, rendered on a canvas of 960 by 500 pixels.

Loading thumbnail…

Cars Scatter Plot

This visualization displays the contents of the Auto MPG data set from the UCI Machine Learning Repository, summarizing the data by showing the total number of rows, the number of columns, and the data size in kilobytes. It then prints the first ten rows of the dataset as a JSON object. The code uses d3's `select`, `csv`, and `csvFormat` functions to fetch the data from a remote URL, append `pre` elements to the `body`, and display the textual summary in a terminal-like style with a black background and green monospace text.

Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing the 2018 populations of the ten most populous countries. It first outputs the row count, column count, and file size in kilobytes, then prints the first ten rows as formatted JSON. The visualization uses D3's `csv`, `csvFormat`, and `select` APIs to load and process the data, appending the results to the page as preformatted text blocks. The data originates from the United Nations World Population Prospects 2017.

Loading thumbnail…

Bar Chart!

This example shows a horizontal bar chart comparing the populations of ten countries, drawn as SVG rectangles scaled by a linear population axis. The code imports specific D3 v5 modules—`select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`—to load data from `data.csv`, transform population values by multiplying by 1000, and render axes and bars. Margins define an inner plotting area, and the bar heights come from the band scale’s bandwidth.

Loading thumbnail…

Cars Report

This example demonstrates a JavaScript workflow for fetching car data and generating a text-based report filtered by price. The page initially displays “Loading...” and then uses a Promise from `getCars()` to simulate a delayed data source, parsing a hardcoded JSON array. The `generateReport` function filters cars under a maximum price and formats each entry using `formatCar`, which outputs strings like “2000 Honda Accord: $2800”. The final report is rendered into an HTML `<pre>` element with large font size, showcasing modular ES6 imports and a Promise-based data flow without any visualization libraries.

Loading thumbnail…

Customizing Axes

This visualization displays the population of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It demonstrates how to customize D3 axes: the x-axis uses tick formatting to abbreviate large numbers (converting G to B for billions), while the y-axis removes its domain line and tick marks. The bar chart is rendered as SVG, with the d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft APIs handling scales and axes. Grid lines extend across the chart from the x-axis ticks, and custom labels are added for the title and population axis.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS. It demonstrates how scale and translate transforms reposition elements, while classes like `.lines` apply stroke properties. The rendering relies directly on SVG markup in `index.html` with CSS rules from `styles.css`, using no JavaScript libraries. A yellow background and grouped elements with shared fills and strokes highlight how SVG and CSS combine to control color, geometry, and coordinate systems.