Q-Zhao

@Q-Zhao·14 public vizzes

Earth globe - v4

An interactive SVG globe renders world landmasses and oceans using an orthographic projection via `d3.geoPath`. Users can drag to rotate the sphere, and hovering over any country displays its name in a tooltip, with the hovered land turning green. A dropdown menu of countries triggers a smooth `d3.transition` animation that reorients the globe to center the selected nation, while `d3.geoCentroid` calculates the target coordinates. The visualization is built with D3 v4 and processes geographic data from TopoJSON and TSV files.

Nov 5, 2017

Loading thumbnail…

Internet user change by region

This visualization shows the number of internet users by world region from 1990 to 2015, plotted as a scatter plot with years on the x-axis and user counts in millions on the y-axis. Each circle represents a region’s annual count, colored by region, and hovering over a point enlarges it and displays a text label with the region, year, and user count. The code uses d3.v4, d3.legend for the color legend, and d3.csv to load the data from Our World in Data.

Nov 2, 2017

Loading thumbnail…

Internet user change by region

This scatter plot tracks the growth of Internet users by world region from 1990 to 2015, with each circle representing a yearly data point for a specific area. The x-axis encodes the year and the y-axis shows the number of users in millions. Built with D3 v4, the visualization uses `d3.axisBottom` and `d3.axisLeft` for axes, a `d3.scaleOrdinal` with `d3.schemeCategory10` for region colors, and a `d3.legendColor` from the d3-legend library to identify each region. Data comes from Our World in Data, rendered as an SVG.

Nov 2, 2017

Loading thumbnail…

Mobile Cellular Subscriptions in United States

This visualization displays the growth of mobile cellular subscriptions in the United States from 1980 to 2013, measured as subscriptions per 100 people. A single red line chart traces the rising trend over time, with axes labeled for year and subscription count. Built with D3 v4, the code uses `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.line` with `d3.curveBasis` for the line rendering. The SVG output is responsive to window resizing, and the data comes from Our World in Data, filtered to the United States.

Oct 16, 2017

Loading thumbnail…

MyBarChart

This interactive bar chart, built with D3 v4, displays the percentage of individuals using the internet alongside mobile cellular subscriptions per country across multiple years. The grouped bars, rendered as SVG rectangles, use an ordinal color scale to distinguish the two metrics. The code loads data from a CSV file and constructs the visualization using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` for the axes. A legend and percentage labels are included to clarify the two plotted series.

Oct 16, 2017

Loading thumbnail…

MyDragSlider

The graphic displays a draggable slider that controls the background color of the SVG canvas, with a shaded track, tick marks, and a circular handle. Dragging the handle changes its horizontal position along a linear scale from 1990 to 2014, and the background hue updates to a corresponding HSL color. This example uses d3.v4, SVG elements, and the `d3.drag()` API to handle pointer interactions, while the slider’s track and ticks are built with standard D3 selection and scale methods.

Oct 16, 2017

Loading thumbnail…

Mobile Cellular Subscriptions in United States

A line chart shows the number of mobile cellular subscriptions per 100 people in the United States from 1980 to 2013, based on data from Our World in Data. The visualization uses D3 v4 with SVG rendering, filtering the CSV dataset to only the United States and encoding the year and subscription count along the x- and y-axes. Axes are labeled, and the line is drawn using the `d3.line` API with a basis curve and styled with a red stroke.

Sep 23, 2017

Loading thumbnail…

Basic Scatter Plot

This scatter plot shows the relationship between GDP per capita and year for seven selected countries—China, the United States, India, Japan, Russia, Brazil, and France—between 1990 and 2014. Each circle represents a country-year observation, colored by country, with axis labels and a color legend. The visualization uses D3 v4’s scaleLinear, axisBottom, axisLeft, and legendColor APIs, rendering SVG circles. Data comes from Our World in Data, filtered from a CSV file containing internet usage, GDP, and population metrics.

Sep 23, 2017

Loading thumbnail…

Re-create curved lines

Three line charts demonstrate D3's curve interpolation methods. The first uses a straight line between two points, while the second and third apply `d3.curveCardinal` to smooth paths through four and five data points respectively. Each path is rendered as an SVG `path` element with black stroke and no fill, using `d3.line()` with custom x and y scales that multiply coordinates by five and invert y-values. The three panels are positioned side by side at increasing offsets on the x-axis.

Sep 23, 2017

Loading thumbnail…

Data Summary

This example displays a textual summary of a dataset detailing mobile cellular subscriptions by country from 1980 to 2013. It shows the total row count, column count, file size, and a statistical overview of each column, generated using the `dl.format.summary` method from the datalib library. Using D3 v4, it loads the CSV file via `d3.csv` and appends the summary as a `<pre>` element to the page, also logging it to the console. The data originates from Our World in Data.

Sep 17, 2017

Loading thumbnail…

Data Summary

This example displays a text-based data summary of internet users by world region, listing the number of rows, columns, and file size, followed by a per-column statistical breakdown. It loads a CSV file using `d3.csv` and pipes the data through the `dl.format.summary` API from the DataLib library. The resulting summary string is rendered into a `<pre>` element on the page and also logged to the console. The dataset originates from Our World in Data, covering regional internet user counts from 1990 to 2015.

Sep 17, 2017

Loading thumbnail…

Data Summary

This example summarizes a CSV dataset on internet usage, GDP per capita, and population across countries from 1981 to 2016. It displays a plain-text report showing the total row count, column count, file size, and per-column statistical summaries. The code loads the data with `d3.csv`, formats the raw text using `d3.csvFormat`, and generates column summaries via `datalib`’s `dl.format.summary`, then prints the result to the page and the console.

Sep 17, 2017

Loading thumbnail…

Top Internet Countries Visualization

This scatter plot displays the number of PhD recipients across six major fields of study, using data from the National Science Foundation. The chart shows distinct circles positioned by categorical major on the x-axis and numeric recipient counts on the y-axis. Built with D3 v4, it employs `d3.scalePoint` for the ordinal x-axis and `d3.scaleLinear` for the y-axis, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Circle sizes are fixed, while fill opacity creates a subtle visual effect.

Sep 17, 2017

Loading thumbnail…

fresh block

This example shows the number of doctorate recipients in the US for 2015, broken down by major field of study, using a horizontal bar chart. Each bar is labeled with the field’s name and displays its count plus the percentage of the total (55,006). The visualization is built with D3 v4, using `d3.scaleLinear` and `d3.scaleBand` to map values and categories to SVG rectangles and text elements. Data is manually embedded from the National Science Foundation.

Sep 11, 2017