Skip to main content
Log in
V

veagy

@veagy·175 public vizzes

Loading thumbnail…

Assignment 1 Tweak a Face!

A face built from basic SVG shapes—a yellow circle, rectangular eyes, and a mouth drawn with an arc path—undergoes a sequence of animated tweaks. The eyes and eyebrows slide vertically via chained `transition` calls on their containing groups, shifting the expression over six seconds. The code uses D3 v5 selections and the `arc` generator to construct the mouth. Animations rely on D3's `transition.attr` to adjust `transform` attributes, demonstrating simple, timed state changes without user interaction.

Jan 27, 2019
Loading thumbnail…

Imports from 2000 to 2016

This interactive scatterplot visualizes global export flows to seven major economies (China, the United States, Brazil, India, Japan, Mexico, and Russia) from 2000 to 2016, with each point representing a reporting region. Users can select which two trading partners to compare via dropdown menus, and clicking a legend entry filters the data by geographic region. Circle size encodes the year, while color distinguishes reporting areas. Built with D3.js v5, the visualization uses `scaleLinear` for axes, `transition().duration()` for animated point placement, and `scaleOrdinal` with `schemeCategory10` for colors. Data comes from the World Trade Organization's merchandise trade statistics.

Nov 1, 2018
Loading thumbnail…

Imports from 2000 to 2016

An interactive scatterplot explores worldwide export flows to seven major economies from 2000 to 2016, with each point colored by reporting region. Two dropdown menus allow selection of x- and y-axis variables, while clicking a legend entry highlights that region while dimming others. Built with d3.v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, and `transition().delay()` to animate points into place on load. Data on reporter and partner trade comes from the World Trade Organization.

Nov 1, 2018
Loading thumbnail…

Exports to Seven Countries with Menus

This interactive scatterplot compares exports to seven countries between 2000 and 2016, with dropdown menus allowing viewers to select which two countries to plot against each other. The code imports data from the World Trade Organization’s network of world merchandise trade statistics via `d3.csv`. Using D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom`, it renders SVG circles with animated transitions via `transition().duration(2000)`. The custom `dropDownMenu` module handles menu updates, while the `scatterPlot` module manages axes and data binding.

Nov 1, 2018
Loading thumbnail…

World Trades vs Taxes in 2015

A scatter plot displays the relationship between high-technology exports and taxes on international trade for 69 countries in 2015, with points colored by income group. The visualization uses d3.csv to load data from World Bank indicators and d3.scaleLinear, d3.axisLeft, and d3.axisBottom to construct the axes. Interactive legend items allow filtering points by income group, adjusting opacity for selected or unselected categories. The chart is rendered as SVG using d3.select and d3.scaleOrdinal with schemeSpectral for color encoding.

Nov 1, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map where hovering over a country highlights it and clicking selects it, turning it red. The visualization uses the D3.js library, specifically `d3.geoNaturalEarth1` for the map projection and `d3.geoPath` for rendering country boundaries. It loads geographic data from the `world-atlas` package via `d3.json` and `d3.tsv`, using `topojson` to convert the TopoJSON features. The map supports zooming through the `d3.zoom` API, which dynamically transforms the SVG group containing the paths.

Nov 1, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for dynamic data visualizations, tracking five fruits in a bowl as they change over time through scripted modifications. It shows how items are added, removed, and have their attributes updated, with a visual distinction between apples and lemons using different colors and radii. The code uses D3 v5's selection merging and transitions to animate position, size, and text placement, while clicking a fruit highlights it with a black stroke. The data is a simple array of fruit objects, with each state change triggered by a timeout and rendered via the `fruitBowl` function.

Nov 1, 2018
Loading thumbnail…

Daily Stock Price for RIG

This area chart visualizes the daily highest and lowest stock prices for RIG, sourced from Yahoo Finance, with time on the x-axis and price on the y-axis. Using D3 v5, the code loads CSV data and employs `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.area` with a basis curve to render the filled region between the price extremes as an SVG path. Gridlines and axis labels complement the chart, which is styled via external CSS.

Nov 1, 2018
Loading thumbnail…

Re-create Marks and Channels Graphic

This visualization recreates a 2D marks and size channels graphic, demonstrating the encoding of quantitative values through the area of basic shapes. The SVG canvas displays two horizontal sequences of geometric marks: squares and circles, each arranged in four steps of increasing size. The example uses raw SVG elements—specifically `rect` and `circle`—to show how area encodes data, with the entire group scaled by an SVG `transform` attribute. No JavaScript libraries are involved; the rendering relies entirely on static SVG markup and external CSS for styling.

Nov 1, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 countries by total merchandise exports in 2017, measured in millions of US dollars at current prices. The data originates from the World Trade Organization. Using D3 v5, the visualization employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to render the axes. Each country is represented by a green SVG rectangle, with the chart rendered in SVG within an HTML page.

Nov 1, 2018
Loading thumbnail…

Imports from 2000 to 2016

This interactive scatterplot visualizes worldwide export flows to seven major economies from 2000 to 2016, using data from the World Trade Organization. Users select which countries to compare via dropdown menus, while a color legend filters data by reporter region. The visualization uses d3.v5 with log scales for both axes, SVG circles scaled by year, and animated transitions. Hovering reveals country-specific details via a tooltip, with the color legend and scatter plot implemented through modular JavaScript functions.

Oct 31, 2018
Loading thumbnail…

Imports with Menus

This interactive scatter plot visualizes worldwide export data from 2000 to 2016, sourced from the World Trade Organization, comparing trade values between various countries. Two dropdown menus let users select which countries to plot on the x- and y-axes, while a color-coded legend filters the data by product indicator. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, with circles animated via `transition().duration()`. A `scaleOrdinal` with `schemeCategory10` maps indicators to colors, and click events on the legend toggle data highlighting.

Oct 31, 2018
Loading thumbnail…

Scatter Plot with Menu

A scatter plot displays global export values, with the United States on the x-axis and Japan on the y-axis, colored by indicator type. A dropdown menu offers options A, B, and C, though its selection does not alter the visualization. The D3 v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeCategory10` to render SVG circles from CSV data. The chart includes gridlines, a legend, and axis labels, with data parsed numerically for seven countries.

Oct 31, 2018
Loading thumbnail…

Exports to US and China ($)

This scatterplot shows the relationship between exports to the United States and exports to China for various countries from 2000 to 2016, based on World Trade Organization data. Each circle represents a country, colored by its indicator description, with axes labeled for the two destinations. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` with `schemeCategory10`, rendering as SVG. Data is loaded via `d3.csv` and formatted with `format(".2s")`, while a legend identifies the color-coded categories.

Oct 31, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map rendered with SVG, where hovering highlights countries in red and clicking logs the selected country's ID. The visualization uses D3 v5's `geoPath` and `geoNaturalEarth1` projections to draw geographic boundaries, and the `zoom` interaction module enables pan and zoom transformations. Country names come from a TSV file loaded from the world-atlas package, while geometric data is parsed from TopoJSON using the topojson library.

Oct 31, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

Five pieces of fruit in a bowl demonstrate special cases of D3's general update pattern. Apples and lemons enter, exit, and update as a lemon replaces an apple and fruits are removed at intervals. The visualization uses d3.scaleOrdinal for color and radius, and d3 data joins with `.enter()`, `.merge()`, and `.exit()` to handle circles. Animated transitions are commented out, so changes appear instantly as one fruit is eaten at a time.

Oct 31, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between high-technology exports and taxes on international trade for 69 countries in 2015, using data from the World Bank. Each circle represents a country, colored by its income group, with the x-axis showing the percentage of manufactured exports that are high-tech and the y-axis showing tax revenue from trade. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.scaleOrdinal` for categorical color encoding.

Oct 31, 2018
Loading thumbnail…

Let's make a face with D3.js!

An animated smiley face demonstrates fundamental DOM manipulation and transitions with D3.js v5. The face consists of SVG shapes, including a circle, eyes, rectangular eyebrows, and a path-based mouth. The eyebrows move up and down using chained `transition().duration()` calls. The code imports `select` and `arc` from D3, uses the `svg` selection to set up the coordinate system, and generates the mouth path with the `arc` API.

Oct 31, 2018
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a circle head, rectangular eyes, and an arc-based mouth. The face’s eyebrows animate vertically in a looping transition, moving up and then returning to their original position over four seconds. The code uses D3 v5 selections and the `arc` helper to generate the mouth path, while `transition().duration()` drives the eyebrow movement. The entire figure is centered within a 960×500 SVG canvas, with styling applied via an external stylesheet.

Oct 31, 2018
Loading thumbnail…

Imports from 2000 to 2016

This interactive scatterplot maps worldwide export values between 2000 and 2016, comparing pairs of importing countries selected from drop-down menus. Each dot represents a reporting region, colored by exporter group using `d3.scaleOrdinal` with `schemeCategory10`, and clicking the color legend highlights or filters points. The visualization uses d3.v5 with SVG rendering and animated transitions, scaling axes with `scaleLinear` and `scaleLog` while formatting ticks via `d3.format`. Data comes from the World Trade Organization’s network of world merchandise trade statistics.

Oct 23, 2018
Loading thumbnail…

Imports with Menus

This interactive scatterplot displays the value of exports from various countries to China and the United States between 2000 and 2016, sourced from the World Trade Organization. Users select which two countries to compare via the dropdown menus built with the `dropDownMenu` helper, while a color legend toggles data points by indicator. The visualization updates with animated transitions using `transition().duration()` and `delay()`, and implements axes with `d3.axisLeft` and `d3.axisBottom`, with color encoding via `d3.scaleOrdinal` and `schemeCategory10`.

Oct 16, 2018
Loading thumbnail…

Imports with Menus

This interactive scatter plot displays worldwide export values to major trading partners between 2000 and 2016, using data from the World Trade Organization. Two dropdown menus let viewers select which countries to compare on the x- and y-axes, while a color legend allows filtering by commodity category. Circles animate into position with a staggered transition delay. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for coloring, and custom d3 modules for the dropdown menu, color legend, and scatter plot rendering in SVG.

Oct 16, 2018
Loading thumbnail…

Imports with Menus

Two dropdown menus let the viewer select which countries to compare on the x- and y-axes of a scatter plot, while a color legend filters the points by export category. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for coloring, and d3.select to update the menus and plot dynamically. Data covers exports to China and the United States from 2000 to 2016, sourced from the World Trade Organization. Circles animate into position with transitions, and filtering fades non-selected points.

Oct 16, 2018
Loading thumbnail…

Imports with Menus

This interactive scatterplot visualizes worldwide export data from 2000 to 2016, comparing trade values between China, the United States, and other nations. Users select which two variables to plot on the x- and y-axes via dropdown menus, with each point colored by commodity type. The visualization uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal, with animated transitions for the circles. Data originates from the World Trade Organization’s network of merchandise trade statistics. SVG rendering and dropDownMenu and colorLegend custom modules handle the interface.

Oct 16, 2018
Loading thumbnail…

World Trades vs Taxes in 2015

This scatter plot visualizes the relationship between high-technology exports and taxes on international trade for 69 countries in 2015, with data from the World Bank. Each circle represents a country, colored by income group via `scaleOrdinal` with `schemeSpectral`, and hovering is not implemented. Instead, clicking a legend item filters the points by opacity, highlighting only the selected income group. The chart uses `d3.scaleLinear`, `axisLeft`, and `axisBottom` for axes, with circle positions mapped via the `scatterplot` function.

Oct 16, 2018
Loading thumbnail…

World Trades vs Taxes in 2015

This scatterplot displays the relationship between high-technology exports and taxes on international trade for 69 countries in 2015, with each point colored by income group. The visualization uses D3 v5 with SVG rendering, employing d3.scaleLinear for axes, d3.scaleOrdinal with a spectral scheme for color encoding, and a custom scatterplot module. An interactive legend allows users to filter countries by income group, with clicking a legend item highlighting those points. Data comes from World Bank indicators on high-technology exports and international trade taxes.

Oct 16, 2018
Loading thumbnail…

World Trades vs Taxes in 2015

This scatter plot compares high-technology exports as a percentage of manufactured exports against taxes on international trade as a percentage of revenue for 69 countries in 2015, segmented by income group. Using D3 v5, it renders an SVG with quantitative scales on both axes, a diverging color scheme for income categories, and interactive legend filtering. The dataset originates from World Bank indicators, with points styled by `scaleOrdinal` and `schemeSpectral`, while axes employ `axisBottom` and `axisLeft`. Clicking a legend entry dims non-matching circles to opacity 0.05.

Oct 16, 2018
Loading thumbnail…

Imports with Menus

This interactive scatterplot visualizes worldwide export data between 2000 and 2016, sourced from the World Trade Organization. Users select different countries from dropdown menus to compare their export values against one another, with each dot representing a country and colored by its economic indicator. Built with D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and animated `transition()` calls to move circles smoothly when the selected dimensions change. A color legend with clickable entries filters the displayed points.

Oct 15, 2018
Loading thumbnail…

World Trades vs Taxes in 2015

This scatter plot displays the relationship between high-technology exports as a percentage of manufactured exports and taxes on international trade as a percentage of revenue for 69 countries in 2015, with each point colored by the country’s income group. Using D3 v5 with SVG rendering, the visualization employs `scaleLinear` for axes, `scaleOrdinal` with `schemeSpectral` for color encoding, and `axisBottom`/`axisLeft` for gridlines. The legend is interactive, allowing users to click income-group labels to filter and highlight matching data points by adjusting opacity. Data originates from World Bank indicators.

Oct 15, 2018
Loading thumbnail…

Imports with Menus

This interactive scatter plot explores worldwide export data from 2000 to 2016, sourced from the World Trade Organization. Two dropdown menus allow users to select which export destination country (e.g., China, United States, Brazil) to plot on the x- and y-axes. The visualization is built with D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for color encoding by country, and `transition().duration(2000).delay()` to animate the circles to their new positions when menu selections change. An SVG rendering includes axis labels and a color legend.

Oct 15, 2018
Loading thumbnail…

Imports with Menus

This interactive scatterplot visualizes worldwide export data from 2000 to 2016, sourced from the World Trade Organization. Users can select which country’s export values appear on the x- and y-axes via two drop-down menus, and clicking a country in the color legend highlights only those points. The plot uses d3.scaleLinear for axes and d3.scaleOrdinal for coloring, with transitions animating circle positions over two seconds. SVG rendering and the dropDownMenu and colorLegend modules drive the interactivity.

Oct 11, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a dataset covering worldwide exports to China, the United States, Japan, Brazil, Russia, India, and Mexico from 2000 to 2016, sourced from the World Trade Organization. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows formatted as JSON. The code uses `d3.csv` to load the data and `d3.csvFormat` to calculate the dataset’s size, then appends the results to the page with standard DOM append operations.

Oct 11, 2018
Loading thumbnail…

Economic factors over time plot with Menus-Final-test

This scatter plot displays economic factors for the United States from 1800 to 2011, with users selecting which variables to compare via dropdown menus. The visualization uses D3 v5 to render SVG elements, including scales, axes, and animated circles that transition between positions. Data comes from the IMF website and is loaded from a CSV file. The code employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart, while the dropdown menus are built with D3 selections and event handlers.

Oct 10, 2018
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot visualizes worldwide export data from 2000 to 2016, plotting countries against each other as selectable axes. A dropdown menu, built with a custom `dropDownMenu` module, lets users choose which country appears on the x-axis. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles, with axis labels and tick formatting via `format(".2s")`. Data loads from a CSV, with numeric coercion applied to country columns before rendering.

Oct 9, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes worldwide export data from 2000 to 2016, comparing values between countries such as China, Japan, and the United States. A drop-down menu allows the user to select which country appears on the x-axis, while the y-axis remains fixed on Japan. The visualization uses D3 v5 APIs including `scaleLinear`, `axisBottom`, and `axisLeft`, rendering circles in SVG. Data is loaded from a CSV file and parsed into numeric values for each country column.

Oct 9, 2018
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot visualizes worldwide export data across multiple countries from 2000 to 2016. A dropdown menu lets viewers select which country’s export values appear on the x-axis, while Japan’s exports remain fixed on the y-axis. The visualization uses D3 v5 with an SVG rendering approach, employing methods like `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to construct axes and scales. Data is loaded via CSV from a VizHub-hosted dataset, and the scatter plot dynamically re-renders when the dropdown selection changes.

Oct 9, 2018
Loading thumbnail…

Try Menu

The visualization plots yearly export values between China and Japan as a red scatterplot on axes with gridlines. A dropdown menu, built with a reusable `dropDownMenu` module using D3’s data joins, offers country options but currently controls only the x-axis selection. Data loads from a CSV of worldwide exports (2000–2016) via `d3.csv`, with scales and axes created by `scaleLinear`, `axisLeft`, and `axisBottom`. The SVG renders circles with `d3.select` and appends labels for title and axis names.

Oct 8, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between exports from the United States and Japan from 2000 to 2016, with a dropdown menu allowing the user to change the x-axis variable to any of the available countries. Each circle represents a year, with its position determined by the selected country’s export value on the x-axis and Japan’s on the y-axis. The visualization is built using D3 v5, employing `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the axes, with data loaded from a CSV file hosted on VizHub.

Oct 8, 2018
Loading thumbnail…

Cars Scatter Plot

A scatter plot visualizes the relationship between export values from two countries, with the United States on the x-axis and Japan on the y-axis. A dropdown menu lets users change the x-axis variable among the dataset's columns. The visualization uses d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to generate scales and axes, rendering circles as SVG elements. Data comes from a CSV file of worldwide exports spanning 2000-2016, parsed with d3.csv.

Oct 8, 2018
Loading thumbnail…

Cars Scatter Plot

An interactive scatter plot displays trade export values for selected countries, with the x-axis selectable via a dropdown menu. The visualization compares U.S. exports to Japan, plotting each data point as a semi-transparent red circle. Built with D3 v5, the code uses `d3.csv` to load data from a remote source, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` for scaling and axes. The dropdown menu is implemented as a reusable `dropdownMenu` component, while the scatter plot is rendered as SVG via the `scatterPlot` module.

Oct 8, 2018
Loading thumbnail…

Scatter Plot with Menu

A scatter plot displays global export values, with the United States on the x-axis and Japan on the y-axis, colored by indicator type. A dropdown menu offers options A, B, and C, though its selection does not alter the visualization. The D3 v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeCategory10` to render SVG circles from CSV data. The chart includes gridlines, a legend, and axis labels, with data parsed numerically for seven countries.

Oct 8, 2018
Loading thumbnail…

Scatter Plot with Menu

This example displays a scatter plot of worldwide export values, comparing exports from the United States and Mexico, with each circle colored according to its indicator category and a legend identifying those categories. A dropdown menu, built with a custom `dropDownMenu` function, presents options A, B, and C, though no interaction logic is bound to it in the shown code. The visualization uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeCategory10` for coloring, rendering SVG circles with semi-transparent red fills as defined in the stylesheet. Data is loaded as CSV from a VizHub-hosted dataset.

Oct 8, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, sourced from the auto-mpg.csv file. The visualization uses D3 v5’s `scaleLinear` to map data values to pixel coordinates, with axes generated via `axisBottom` and `axisLeft` and rendered as SVG elements. A dropdown menu allows selection among options A, B, and C, though its interaction is not shown. Red, semi-transparent circles encode individual car data points.

Oct 8, 2018
Loading thumbnail…

Try Menu

A dropdown menu lets users select among three options, while a scatterplot displays the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses D3 v5’s `scaleLinear` and `extent` for axes, `axisBottom` and `axisLeft` for ticks, and SVG circles with opacity for data points. Data is loaded via `csv`, and the menu is generated with a reusable `dropDownMenu` function.

Oct 8, 2018
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. Using D3 v5 with SVG rendering, it maps each car to a red, semi-transparent circle whose position is determined by linear scales for both axes. The chart includes labeled axes with grid lines, a title, and formatted tick marks generated via `d3.axisBottom` and `d3.axisLeft`, with data loaded asynchronously via `d3.csv`.

Oct 8, 2018
Loading thumbnail…

Scatter Plot with Menu

This scatter plot visualizes worldwide export data from 2000 to 2016, with each circle representing a country-year observation. Users select the x and y axes from dropdown menus to compare different economic indicators across countries, while a color legend toggles which country category is highlighted in the plot, dimming non-selected points. Built with D3 v5, the visualization uses an animated transition to grow circles over 2 seconds, scales axes with `d3-scaleLinear`, and renders SVG elements. A hover tooltip displays the reporter description for each point, while the legend and dropdowns filter and control the displayed data.

Oct 8, 2018
Loading thumbnail…

Scatter Plot with Menu

This scatter plot visualizes worldwide export values to the United States and China from 2000–2016, with each circle’s color encoding the export indicator category. A legend identifies the categories, and axis labels clarify the compared countries. Built with d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal, the SVG renders points with a categorical color scheme. Data is loaded from a hosted CSV file, and circles use fixed opacity for overlapping points.

Oct 7, 2018
Loading thumbnail…

Scatter Plot with Menu

This scatter plot visualizes worldwide export values to the United States and China, with each circle colored by its indicator category. A legend identifies the categories. The visualization uses d3.csv to load the dataset and d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal with schemeCategory10 for encoding. The SVG rendering includes axis labels, a title, and grid lines via tickSize, with legends positioned using SVG groups and rectangles.

Oct 7, 2018
Loading thumbnail…

Final Project

This visualization presents worldwide export data from 2000–2016 as an animated scatterplot, with each circle representing a country and colored by indicator category. Users can dynamically switch the x- and y-axis metrics via dropdown menus, and clicking the color legend highlights or dims categories. The plot uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for colors, and transitions each circle’s radius from 0 to 10 over two seconds with staggered delays. A hover tooltip displays the reporter country name, while SVG rendering updates axes and legend selections.

Oct 7, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes calories versus protein for McDonald’s menu items, with each circle colored by food category. The visualization uses d3 scales and axes to position points, and includes interactive tooltips that display item details on hover. A categorical color legend filters the display, dimming circles that don’t match the selected category. The data comes from the UCI Auto MPG dataset, though the code actually loads McDonald’s nutritional information via d3.csv.

Oct 7, 2018
Loading thumbnail…

Project

This scatter plot visualizes annual export values from 2000 to 2016, comparing shipments to the United States against those to China, with each point representing a country-year observation. The chart uses D3 v5's `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes with abbreviated number formatting, while circles are rendered via SVG. Data comes from a CSV file loaded with `d3.csv`, and the code explicitly converts six country columns to numeric values before plotting. Red, semi-transparent circles reveal overlapping data density, with labeled axes and a title indicating the export comparison.

Oct 7, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes worldwide export values to the United States versus China from 2000–2016, with each circle representing a yearly observation. The animation transitions circles from radius zero to their final size using chained `transition().duration()` and `delay()` calls. Built with D3 v5, the example uses `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes, alongside `csv()` to load the dataset from VizHub. SVG rendering displays the data, with tick marks and gridlines styled via CSS classes.

Oct 7, 2018
Loading thumbnail…

Try one

A scatterplot compares export values to the United States versus China using a CSV dataset of worldwide exports from 2000–2016. Each circle’s color encodes an indicator description via d3.scaleOrdinal with schemeCategory10, with a legend and linear axes formatted using d3.format. The visualization is rendered as an SVG using d3.select, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, with a title and labeled axes.

Oct 7, 2018
Loading thumbnail…

Try one

This scatterplot visualizes worldwide export values to the United States and China, with each circle colored by indicator type. The chart uses D3 v5 scales and axes, including `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, to position points and format tick labels with `format(".2s")`. Data is loaded from a CSV file via the `csv` function, and circles are rendered as SVG elements with a legend built using `color.domain()`. The y-axis and x-axis labels identify the two destination countries, while a title summarizes the comparison.

Oct 7, 2018
Loading thumbnail…

Project

This scatter plot visualizes worldwide export values to the United States and China from 2000 to 2016, with each circle representing a country’s annual exports. The data comes from a CSV file loaded via `d3.csv`, and the chart uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to render axes with abbreviated tick labels. Circles are drawn as SVG elements with a fixed radius, while axis labels and the title are added as SVG text. The visualization shows the relationship between exports to the two major economies, with overlapping red circles indicating similar values.

Oct 7, 2018
Loading thumbnail…

Final Project

This interactive scatterplot visualizes worldwide export indicator values across countries, with each circle representing a nation. Users select which indicators to compare on the x and y axes via dropdown menus. The d3.v5 visualization uses d3.scaleOrdinal for color encoding by indicator category, and a legend allows filtering by clicking categories. A tooltip displays country names on mouseover, while the scatterplot module animates circle transitions over 2 seconds as data updates, loading from the 2000-2016 Worldwide Exports CSV dataset.

Oct 7, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, using a dataset of automobile specifications loaded from a CSV file. Each car is represented as a semi-transparent red circle, with the x-axis mapping horsepower and the y-axis mapping weight. The visualization is built with D3 v5, employing `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the axes and scales. The SVG rendering includes labeled axes, a title, and grid lines styled via CSS, with the data parsed from the remote `auto-mpg.csv` source.

Oct 7, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the Auto MPG Data Set, sourced from the UCI Machine Learning Repository. Each red circle represents a car, positioned by its horsepower and weight values. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render tick marks and labels. The SVG rendering includes axis labels and a title, with circles styled via CSS for opacity.

Oct 7, 2018
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot compares the value of car exports to the United States and China, with each point representing a country. The visualization uses circles sized by export value and colored by a categorical indicator, with a legend that filters points by clicking. Animated transitions and tooltips reveal detailed information on hover. Built with D3 v5, it imports the data from a CSV file and utilizes `scaleOrdinal`, `schemeCategory10`, `extent`, `axisBottom`, and `scaleLinear` APIs, rendering the SVG with interactive opacity changes and a custom color legend component.

Oct 4, 2018
Loading thumbnail…

Data Table Summary

This visualization displays a text summary of a dataset on exports to China and the United States from 2000 to 2016, sourced from the World Trade Organization. It shows the total row count, column count, and data size in kilobytes, followed by the first ten rows formatted as JSON. The code uses D3 v5’s `select`, `csv`, and `csvFormat` APIs to load the data and append `<pre>` elements to the body, while the styling uses a black background and green monospace text.

Oct 4, 2018
Loading thumbnail…

Expert: North American vs Asia

This scatter plot visualizes 2016 export data from the World Trade Organization, comparing values for exports to the United States versus China across trading partners in North America and Asia. Each circle represents a partner country, colored by its indicator description, with linear scales mapping the two export destinations. The chart uses d3.csv for data loading, d3.scaleLinear and d3.scaleOrdinal for scales, and d3.axisBottom/axisLeft with tick formatting for axes, rendered as SVG with a legend and axis labels.

Oct 4, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Using d3.scaleLinear for both axes and d3.axisBottom/axisLeft for tick marks, it renders red, semi-transparent circles with a fixed radius in an SVG. The code loads data asynchronously via d3.csv, coerces numeric fields, and includes custom axis labels and a title styled with CSS.

Oct 4, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV dataset listing the most populous countries in 2018, showing the row count, column count, file size in kilobytes, and the first ten rows as JSON. It loads the data with `csv` from D3 v5, formats the data back to CSV using `csvFormat` to calculate its size, and appends the results as `<pre>` elements. The data originates from the United Nations’ World Population Prospects 2017 estimates.

Oct 4, 2018
Loading thumbnail…

Data Table Summary

This example summarizes a CSV of 2018 population estimates from the United Nations World Population Prospects. It displays the number of rows, columns, and file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses `d3.csv` to load the data, `d3.csvFormat` to calculate its byte size, and D3 selections to append `<pre>` elements to the page body. The data is shown in a monospaced, green-on-black terminal style.

Oct 4, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a dataset containing World Bank GDP figures for all countries from 1970 to 2017. It reports the row count, column count, file size in kilobytes, and prints the first ten rows as formatted JSON. Using D3 v5’s `csv` and `csvFormat` methods, it loads the remote CSV file and calculates the data size, then appends the results to the page with `select` and `append`. The dark terminal-style styling comes from the accompanying CSS.

Oct 4, 2018
Loading thumbnail…

Data Table Summary

A terminal-style black-and-green interface displays a text summary of stock price data. The page prints the total row and column counts, the data size in kilobytes, and the first ten rows as formatted JSON. The example loads a CSV file from a VizHub-hosted dataset using D3 v5's `csv` method, then uses `csvFormat` and `select` to append `pre` elements with the computed statistics.

Oct 4, 2018
Loading thumbnail…

Scatter plot with Interactive Filtering

This scatter plot visualizes London’s monthly roadside air quality data from the Kings College London dataset, plotting PM2.5 against PM10 particulate concentrations. A color legend allows interactive filtering by year, dimming non-selected data points and highlighting the chosen year. The visualization is built with D3 v5, using `scaleLinear`, `axisBottom`, and `axisLeft` for the axes, while the custom `colorLegend` module handles the filtering interaction. Data is loaded from a CSV file and rendered as SVG circles.

Oct 2, 2018
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 dataset, with each circle’s color encoding the car’s origin. The visualization uses d3.csv to load the data, d3.scaleLinear for the axes, d3.scaleOrdinal with d3.schemeCategory10 for color mapping, and d3.axisLeft and d3.axisBottom to render gridlines and tick labels. Rendering is done as SVG elements, and the code explicitly converts parsed string values to numbers before drawing.

Sep 30, 2018
Loading thumbnail…

TRy 1

This example displays a world map using a spherical projection, with countries rendered as green polygons against a blue ocean background. It shows geographic boundaries and allows user interaction by clicking on a country, which logs the country ID to the console. The visualization is built with the D3 library, using `d3.geoPath` and `d3.geoNaturalEarth1` for projection, and TopoJSON's `feature` function to process country data from the world-atlas 110m GeoJSON source.

Sep 29, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map rendered in SVG, with country boundaries displayed in light green and a blue sphere backdrop. Users can zoom and pan the map using their mouse or touch gestures, while hovering over a country highlights it in red and reveals its name as a tooltip. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` behavior, with TopoJSON data from the world-atlas package. Country names are joined from a TSV file using ISO numeric codes, and the map is drawn from TopoJSON features converted with `feature`.

Sep 29, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example presents an interactive world map using D3.js and TopoJSON. It displays country boundaries from the world-atlas 50m dataset, rendered as SVG paths using the `geoNaturalEarth1` projection and `geoPath`. The map supports zooming via the `zoom` function, which applies a transform to the grouped elements. Hovering over a country highlights it in red through CSS, and clicking the sphere logs an event to the console, while country names appear as tooltips from a TSV lookup file.

Sep 26, 2018
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in San Francisco, measured in degrees Celsius, with the title “A Week in San Francisco.” The data is sourced from Data Canvas - Sense Your City. The chart uses d3.scaleTime and d3.scaleLinear for the axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line with curveBasis to render the smooth temperature path. It is drawn as an SVG with a maroon stroke, and the code imports d3.v5 modules via ES6 syntax.

Sep 26, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map that uses zoom and pan gestures to explore countries, with hover highlighting and country names in tooltips. Clicking a country logs its ID to the console, while a viewport sphere frames the geographic projection. The visualization relies on `d3.zoom` for user-driven transformations, `d3.geoNaturalEarth1` and `d3.geoPath` for rendering TopoJSON features from world-atlas data, and SVG elements styled via CSS. Country names are joined from TSV data using a lookup table.

Sep 26, 2018
Loading thumbnail…

Version 1

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths. The map is built with D3 v5 and TopoJSON, loading geographic data from the world-atlas package (50m resolution) and matching country IDs to names from a TSV file. Hovering is disabled, but clicking a country sets a selected state and triggers a re-render. A zoom behavior enables panning and scaling, while a blue sphere path provides the ocean backdrop.

Sep 26, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates interactive zooming and panning on a natural Earth projection map, with country boundaries colored green and highlighting red on hover. It uses a world-atlas TopoJSON dataset merged with a TSV file to map country IDs to names, which appear as tooltips via SVG `<title>` elements. The implementation relies on d3.geoNaturalEarth1, d3.geoPath, d3.zoom, and topojson.feature to render and manipulate the geographic shapes within an SVG canvas.

Sep 26, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map rendered with SVG paths using D3 v5 and TopoJSON world-atlas data. Clicking a country triggers a simple interaction, though the current handler only logs to the console; countries highlight red on hover. The map uses a natural Earth projection (`geoNaturalEarth1`) with zoom support via `d3.zoom`, and country names come from a TSV file joined by ISO numeric ID.

Sep 26, 2018
Loading thumbnail…

Cheap Tricks for Interaction

This example displays a world map using geographic data from the world-atlas package, rendered as SVG paths. It shows countries with a blue sphere background and black country outlines. The visualization uses d3.geoPath and d3.geoNaturalEarth1 to project and draw the map, while topojson.feature extracts country boundaries. Clicking a country triggers an interaction that updates a selected country state, though no visual feedback is applied; instead, the click logs a message to the console. Hovering reveals country names via SVG title elements.

Sep 25, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

Five apples appear in a bowl, one disappears, an apple changes into a lemon, and another apple vanishes. The D3 v5 code demonstrates special cases of the general update pattern, using `selection.enter`, `selection.merge`, and `selection.exit` with `transition` to animate the fruit changes. The example uses ordinal scales for color and radius, SVG circles and rectangles, and JavaScript's `Math.random` for fruit IDs.

Sep 18, 2018
Loading thumbnail…

Bowl of Fruit - Animated Transitions

Five circles representing apples render in an SVG bowl. Through timed interactions, one apple disappears, a second apple changes into a lemon, and a third apple is removed, with all changes animated. The code uses D3 v5’s `select`, `selectAll`, `transition` and ordinal `scaleOrdinal` for color and radius. Explicit `attr` tweens over 1000 milliseconds animate the circle positions, radii, and exits, while `remove()` deletes exiting circles.

Sep 18, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3.js, showing how to handle data joins with special cases like exiting elements and in-place modifications. The code visualizes a bowl of fruit where apples and lemons are added, removed, and transformed over time. Using D3 v5, it employs ordinal scales for color and radius, and animates exiting circles shrinking to zero radius via transitions. The visualization uses SVG rendering, with groups containing circles and text labels, and is updated through timed JavaScript events that modify the fruits array.

Sep 18, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates the general update pattern in D3, showing how data joins handle enter, update, and exit selections as apples are eaten and replaced with lemons. Ordinal scales map fruit types to circle radii and fill colors, with SVG groups and circles rendered via `d3-selection`. The code uses `selection.merge()` for updates, `selection.exit().remove()` for removals, and `d3.range()` to initialize five apples, then sequentially modifies the array with `pop()`, property reassignment, and `filter()` at timed intervals.

Sep 18, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates special cases of D3's general update pattern, where a static bowl rect and dynamic fruit groups coexist. Apples and lemons are drawn as circles with ordinal color and radius scales, while text labels appear beside each fruit. The code uses `selection.enter` and `selection.exit` to handle fruit additions and removals, with circles and text merged separately per fruit group. The SVG output updates over time as the dataset changes through three timed events: removing an apple, replacing one with a lemon, and filtering out another.

Sep 18, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit animates through D3’s general update pattern, showing how to add, remove, and modify SVG circles and text via enter, update, and exit selections. The example demonstrates special cases like exiting elements shrinking via a `transition().duration(1000).attr('r', 0)` before removal, and updating an existing fruit’s type in place. It uses `d3.scaleOrdinal` for color and radius mapping, with data generated via `Math.random` for IDs. Rendered as SVG and animated with D3 transitions.

Sep 18, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3, visualizing a bowl of fruit that changes over time as apples are eaten and replaced with lemons. Using D3's `scaleOrdinal` for color and radius mapping, the SVG animation shows how elements enter, update, and exit with a smooth transition. The code executes timed updates via `setTimeout`, modifying the fruit array and re-rendering, while D3's selection merging (`merge`) and `.transition().duration(1000)` handle the visual transitions.

Sep 18, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates special cases of the general update pattern in D3.js (v5). It shows a bowl of fruit where apples are initially added, then one is removed, another apple changes into a lemon, and finally a different apple is removed. The visualization uses SVG rendering with D3's selection, merging, and exit/remove methods to handle transitions between data states. The code uses `scaleOrdinal` for color and radius mapping based on fruit type, while data updates occur through setTimeout calls.

Sep 18, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl-of-fruit visualization demonstrates the general update pattern with special cases: apples appear, disappear, and one changes into a lemon. The example shows how to handle data joins where elements are removed by filtering an array, existing elements mutate, and new elements enter. Using d3 v5 with SVG and animated transitions, the code leverages scaleOrdinal for fruit color and radius, selection.merge for updating, and transition.attr to animate exit. The data is a simple array of fruit objects, rendered as circles with text labels in a static bowl shape.

Sep 18, 2018
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates special cases in the General Update Pattern with d3.v5, showing how SVG elements animate as apples are added, eaten, and replaced by lemons. Circles and text labels transition in and out over one second, with radius and color scales mapping fruit types. The example uses explicit `selection.selectAll`, `.enter()`, `.merge()`, and `.exit().transition()` calls to handle data-driven updates.

Sep 18, 2018
Loading thumbnail…

Bowl of Fruit - Animated Transitions

Five apples sit in a silver bowl. Over four seconds, the apples disappear one at a time, and one turns into a lemon, with each change animated by shrinking or recoloring the fruit circles. The example uses d3’s `selectAll`, `transition`, and `scaleOrdinal` APIs to map fruit type to color and radius. Fruit data is generated in JavaScript with `range` and `Math.random()`, and the SVG rendering updates through the custom `fruitBowl` export.

Sep 18, 2018
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in degrees Celsius for San Francisco, using data from Data Canvas - Sense Your City. It shows temperature fluctuations over time with a smoothed curve and gridlines. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `d3.line` with `curveBasis`, and `axisBottom`/`axisLeft` for axes. The code loads CSV data asynchronously, converts temperature to numbers and timestamps to Date objects, then renders a titled chart with labeled axes and formatted tick text.

Sep 16, 2018
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how different SVG shapes—circles, rectangles, lines, and paths—can be styled and combined using D3’s square-root scale and CSS. It shows the same shapes in three group configurations: default styling, explicit fill and stroke attributes, and a group with shared fill/stroke properties. The `d3.scale.sqrt` function is defined but not applied. The SVG uses a `transform` scale, while CSS classes control stroke width, color, and line join/cap styles for the line and path elements.

Sep 11, 2018
Loading thumbnail…

Shapes with SVG and CSS

A set of SVG shapes demonstrates styling with both inline attributes and CSS rules. Circles, rectangles, a line, and a polyline-like path are arranged within a transformed group. Inline fill and stroke properties define basic colors, while a CSS class applies stroke width and line join styles to the path elements. The example uses only standard SVG elements and external CSS, with no JavaScript libraries involved.

Sep 11, 2018
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars in the Auto MPG Data Set. D3 v5 loads the CSV data and renders SVG circles with red fill, using `scaleLinear` for both axes. The chart includes labeled axes with `axisLeft` and `axisBottom`, plus a title, with tick formatting and styling applied via CSS.

Sep 11, 2018
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. Using D3 v5 with SVG rendering, it maps each car to a red, semi-transparent circle whose position is determined by linear scales for both axes. The chart includes labeled axes with grid lines, a title, and formatted tick marks generated via `d3.axisBottom` and `d3.axisLeft`, with data loaded asynchronously via `d3.csv`.

Sep 10, 2018
Loading thumbnail…

Data Table Summary

This example summarizes a stock price dataset by displaying the total row count, column count, and file size in kilobytes using D3’s `csv` and `csvFormat`. It then shows the first ten rows of the data as formatted JSON. The data comes from Yahoo Finance’s Basic Materials sector, covering daily high and low prices for five companies over five years, and the output is styled with black background and green monospace text.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a CSV dataset containing United Nations 2018 population estimates for the ten most populous countries. It shows the row count, column count, and file size in kilobytes, followed by the first ten data rows formatted as JSON. The visualization uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, then appends `<pre>` elements to the DOM to render the summary and raw data output.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example summarizes a CSV data table of daily stock prices for five commodities companies in 2018, sourced from the United Nations World Population Prospects. It displays the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The code uses d3.csv to load the data and d3.csvFormat to calculate its size, then appends the summary and raw data as text within pre elements.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example summarizes a CSV data table of daily stock prices for five commodities companies in 2018, sourced from the United Nations World Population Prospects. It displays the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The code uses d3.csv to load the data and d3.csvFormat to calculate its size, then appends the summary and raw data as text within pre elements.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV data table, showing the row count, column count, and file size in kilobytes, followed by the first 10 rows formatted as JSON. It uses D3 v5’s `csv` loader to fetch `data.csv`, which contains 2018 population estimates from the United Nations World Population Prospects. The code relies on `select` to append `<pre>` elements and `csvFormat` to compute the data’s size, presenting the results with a terminal-style green-on-black styling.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a loaded CSV file, showing the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. It imports `select`, `csv`, and `csvFormat` from D3 v5 to fetch `data.csv` and compute the byte length. The output renders in a monospace `<pre>` element styled with green-on-black terminal colors. The dataset describes daily high and low stock prices for several tickers, sourced from a 2018 United Nations population report.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example summarizes a CSV data table of daily stock prices for five commodities companies in 2018, sourced from the United Nations World Population Prospects. It displays the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The code uses d3.csv to load the data and d3.csvFormat to calculate its size, then appends the summary and raw data as text within pre elements.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example shows a plain-text summary of a tabular dataset. It prints the number of rows, columns, and file size in kilobytes, followed by the first ten rows displayed as formatted JSON. The code uses `d3.csv` to load the data, `csvFormat` to compute its size, and `JSON.stringify` to display the preview. Styled with black background and green monospace text, it renders the output into `pre` elements appended to the page body, drawing from the 2013 stock price dataset.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a CSV dataset containing United Nations 2018 population estimates for the ten most populous countries. It shows the row count, column count, and file size in kilobytes, followed by the first ten data rows formatted as JSON. The visualization uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, then appends `<pre>` elements to the DOM to render the summary and raw data output.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a CSV dataset containing United Nations 2018 population estimates for the ten most populous countries. It shows the row count, column count, and file size in kilobytes, followed by the first ten data rows formatted as JSON. The visualization uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, then appends `<pre>` elements to the DOM to render the summary and raw data output.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a CSV dataset containing United Nations 2018 population estimates for the ten most populous countries. It shows the row count, column count, and file size in kilobytes, followed by the first ten data rows formatted as JSON. The visualization uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, then appends `<pre>` elements to the DOM to render the summary and raw data output.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV data table, showing the row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data, d3.csvFormat to compute the size, and d3.select to append the summaries to the page. The data comes from Yahoo Finance stock prices for five companies.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV data table, showing the row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data, d3.csvFormat to compute the size, and d3.select to append the summaries to the page. The data comes from Yahoo Finance stock prices for five companies.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV dataset about the network of world merchandise trade in 2016. It shows the number of rows, columns, and file size in kilobytes, followed by the first 10 rows formatted as JSON. The code uses `d3.csv` to load the data and `d3.csvFormat` to calculate its size, then appends the results to the page with `select` and `append`. The data originates from the World Trade Organization’s 2018 estimates.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV dataset about the network of world merchandise trade in 2016. It shows the number of rows, columns, and file size in kilobytes, followed by the first 10 rows formatted as JSON. The code uses `d3.csv` to load the data and `d3.csvFormat` to calculate its size, then appends the results to the page with `select` and `append`. The data originates from the World Trade Organization’s 2018 estimates.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing daily high and low stock prices for five companies (RIG, FCX, VALE, SWN, HAL) from 2013. It shows the total row count, column count, and approximate file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the file size, and d3.select to append the text to the DOM.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a tabular dataset, showing the total row count, column count, and file size in kilobytes. It then prints the first ten rows as formatted JSON. The visualization uses D3 v5 APIs such as `d3.csv` to load the data, `d3.csvFormat` to measure its size, and `d3.select` to append `<pre>` elements to the page. The data consists of daily high and low stock prices for five companies sourced from Yahoo Finance.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example prints a plain-text summary of a CSV data table. It displays the total row count, column count, and file size in kilobytes, followed by the first ten rows as formatted JSON. The data covers daily high and low stock prices for five companies from Yahoo Finance. The code uses `d3.csv` to load the data, and `d3.csvFormat` and `JSON.stringify` to compute and present the summary.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV data table, showing the row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data, d3.csvFormat to compute the size, and d3.select to append the summaries to the page. The data comes from Yahoo Finance stock prices for five companies.

Sep 6, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV file containing World Bank GDP data for 264 countries from 1970 to 2017. It shows the dataset’s row count, column count, and file size in kilobytes, followed by a JSON-formatted preview of the first 10 rows. Using the D3 `csv` and `csvFormat` methods to load and measure the data, it appends the results as text elements to the body via D3 selections.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes a CSV dataset of World Bank GDP figures for 264 countries from 1970 to 2017. It displays the row count, column count, and file size in kilobytes, followed by a JSON-formatted preview of the first 10 rows. The visualization uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, and appends the summary to the page as `pre` elements with a monospace terminal aesthetic.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV dataset, reporting the row count, column count, and file size in kilobytes, followed by a JSON-formatted preview of the first ten rows. It loads the data using `d3.csv` and formats the output with `csvFormat` from D3 v5. The data originates from the United Nations World Population Prospects 2017, containing population estimates for countries from 1970 to 2017. The visualization presents this information in a monospaced, terminal-like style on a black background.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes a CSV dataset of population estimates for the most populous countries from 1970 to 2017, sourced from the United Nations World Population Prospects 2017. It uses D3 v5’s `csv` loader to parse the data, then displays the total row count, column count, and file size in kilobytes. The page also prints the first ten rows as formatted JSON, with the results styled in a terminal-like green-on-black theme via CSS.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV dataset about population estimates from the United Nations’ World Population Prospects 2017. It uses d3.csv to load the data, then d3.csvFormat and the data’s length to calculate and print the total row count, column count, and file size in kilobytes, followed by a JSON representation of the first ten rows. The output is rendered in a green monospace font on a black background, mimicking a terminal interface.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes the structure of a CSV dataset containing 2018 population estimates for the most populous countries, sourced from the United Nations World Population Prospects 2017. It displays the total number of rows, columns, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data, d3.csvFormat to calculate file size, and appends the summary and preview as text elements to the page body with d3.select.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes the structure of a CSV dataset containing 2018 population estimates for the most populous countries, sourced from the United Nations World Population Prospects 2017. It displays the total number of rows, columns, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data, d3.csvFormat to calculate file size, and appends the summary and preview as text elements to the page body with d3.select.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes the structure of a CSV dataset containing 2018 population estimates for the most populous countries, sourced from the United Nations World Population Prospects 2017. It displays the total number of rows, columns, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data, d3.csvFormat to calculate file size, and appends the summary and preview as text elements to the page body with d3.select.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes the structure of a CSV dataset containing 2018 population estimates for the most populous countries, sourced from the United Nations World Population Prospects 2017. It displays the total number of rows, columns, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data, d3.csvFormat to calculate file size, and appends the summary and preview as text elements to the page body with d3.select.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes the structure of a CSV dataset containing 2018 population estimates for the most populous countries, sourced from the United Nations World Population Prospects 2017. It displays the total number of rows, columns, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data, d3.csvFormat to calculate file size, and appends the summary and preview as text elements to the page body with d3.select.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes the structure of a CSV dataset containing 2018 population estimates for the most populous countries, sourced from the United Nations World Population Prospects 2017. It displays the total number of rows, columns, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data, d3.csvFormat to calculate file size, and appends the summary and preview as text elements to the page body with d3.select.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes a dataset of the most populous countries in 2018, sourced from the United Nations World Population Prospects. It displays the total number of rows, columns, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses D3 v5’s `csv` and `csvFormat` methods to load and measure the data, then appends `<pre>` elements to the body, styling the output in a monospace green-on-black terminal aesthetic.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a CSV dataset containing United Nations 2018 population estimates for the ten most populous countries. It shows the row count, column count, and file size in kilobytes, followed by the first ten data rows formatted as JSON. The visualization uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, then appends `<pre>` elements to the DOM to render the summary and raw data output.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a small CSV dataset containing the 2018 populations of the ten most populous countries, sourced from the United Nations World Population Prospects 2017. It shows the row and column counts, file size in kilobytes, and the first ten rows formatted as JSON. The implementation uses d3.csv to load the data, d3.csvFormat to compute its byte length, and d3.select to append <pre> elements to the body, with the result styled in a terminal-like green-on-black theme.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes the structure of a CSV dataset containing 2018 population estimates for the most populous countries, sourced from the United Nations World Population Prospects 2017. It displays the total number of rows, columns, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data, d3.csvFormat to calculate file size, and appends the summary and preview as text elements to the page body with d3.select.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes a CSV of World Bank GDP data for all countries from 1960–2017. It displays the total row and column counts, the file size in kilobytes, and a JSON-formatted preview of the first 10 rows. The code uses `d3.csv` to load the data, `d3.csvFormat` to calculate the file size, and `d3.select` to append `<pre>` elements showing the summary. The output appears in monospace green text on a black background.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a World Bank dataset covering GDP for all countries from 1960 to 2017, showing the row and column counts, the dataset’s size in kilobytes, and the first ten rows as formatted JSON. The page uses black background with green monospace text. It loads the data with `d3.csv`, formats the size with `csvFormat`, and appends the summary and sample rows as `<pre>` elements using D3 selections.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes a CSV of World Bank GDP data for all countries from 1960–2017. It displays the total row and column counts, the file size in kilobytes, and a JSON-formatted preview of the first 10 rows. The code uses `d3.csv` to load the data, `d3.csvFormat` to calculate the file size, and `d3.select` to append `<pre>` elements showing the summary. The output appears in monospace green text on a black background.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a World Bank dataset covering GDP for all countries from 1960 to 2017, showing the row and column counts, the dataset’s size in kilobytes, and the first ten rows as formatted JSON. The page uses black background with green monospace text. It loads the data with `d3.csv`, formats the size with `csvFormat`, and appends the summary and sample rows as `<pre>` elements using D3 selections.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example summarizes the structure of a CSV dataset containing 2018 population estimates for the most populous countries, sourced from the United Nations World Population Prospects 2017. It displays the total number of rows, columns, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data, d3.csvFormat to calculate file size, and appends the summary and preview as text elements to the page body with d3.select.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example prints a text summary of a CSV data table about the most populous countries in 2018, sourced from the United Nations World Population Prospects 2017. It displays the total row count, column count, and file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses d3.csv to load the data, d3.csvFormat to compute the data size, and d3.select to append pre elements to the body. The terminal-style black background with green monospace text echoes a command-line interface.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV dataset about the network of world merchandise trade in 2016. It shows the number of rows, columns, and file size in kilobytes, followed by the first 10 rows formatted as JSON. The code uses `d3.csv` to load the data and `d3.csvFormat` to calculate its size, then appends the results to the page with `select` and `append`. The data originates from the World Trade Organization’s 2018 estimates.

Sep 5, 2018
Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV data table, showing row count, column count, file size, and the first 10 rows as formatted JSON. It uses d3.csv to load the data and d3.csvFormat to compute its byte size. The page renders the information in green monospace text on a black background, with the data sourced from the United Nations World Population Prospects 2017.

Sep 5, 2018
Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the top 10 countries by total merchandise exports in 2017, using data from the World Trade Organization. The chart sorts countries by export value, with China leading at over two million dollars. The visualization uses D3 v5 with `csv`, `scaleLinear`, and `scaleBand` to map data to SVG rectangles. Axes are rendered with `axisLeft` and `axisBottom`. The data is loaded from `data.csv` and parsed into numeric values before rendering.

Sep 5, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart displays the Top 10 countries by total merchandise export in US dollars (millions) for 2017, sourced from the World Trade Organization. It renders each country as a horizontal green rectangle, with the length proportional to its export value. The code uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position and label the bars within an SVG. Data is loaded from a CSV file and parsed into numeric values before rendering.

Sep 5, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 countries by total merchandise exports in 2017, based on World Trade Organization data. It uses D3 v5 with SVG rendering, employing `scaleLinear` for the value axis and `scaleBand` for categorical country labels. The code loads data via `csv`, appends axes with `axisLeft` and `axisBottom`, and draws green rectangles sized by export values. The chart highlights relative export magnitudes, with China leading, followed by the United States and Germany.

Sep 5, 2018
Loading thumbnail…

Making a Bar Chart

This example visualizes the top 10 countries by total merchandise exports for 2017, using a horizontal bar chart where bar length encodes export value in trillions. The chart is rendered with D3 v5, using `d3.scaleLinear` for the value axis, `d3.scaleBand` for country categories, and `d3.axisLeft`/`d3.axisBottom` for ticks. Data is loaded from a CSV file using `d3.csv` and multiplied by 1000 to convert from scientific notation. The SVG output styles bars green via CSS.

Sep 5, 2018
Loading thumbnail…

Making a Bar Chart

This example visualizes the top 10 countries by total merchandise exports for 2017, using a horizontal bar chart where bar length encodes export value in trillions. The chart is rendered with D3 v5, using `d3.scaleLinear` for the value axis, `d3.scaleBand` for country categories, and `d3.axisLeft`/`d3.axisBottom` for ticks. Data is loaded from a CSV file using `d3.csv` and multiplied by 1000 to convert from scientific notation. The SVG output styles bars green via CSS.

Sep 5, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 countries by total merchandise exports in 2017, based on World Trade Organization data. The visualization uses d3.csv to load the data, then applies d3.scaleLinear and d3.scaleBand to map export values and country names, respectively. Bars are rendered as SVG rectangles, with axes generated by d3.axisLeft and d3.axisBottom. The chart omits the x-axis domain starting point, truncating the scale to emphasize differences among leading exporters.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart ranking the top 10 countries by total merchandise exports in 2017, using data from the World Trade Organization. The bars are rendered in SVG, with a green fill, and the chart uses d3.csv to load the data, d3.scaleLinear for the value axis, and d3.scaleBand for country categories. Axes are generated with d3.axisLeft and d3.axisBottom. The numeric export values are multiplied by 1000 during preprocessing.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 countries by total merchandise exports in 2017, based on World Trade Organization data. The visualization uses d3.csv to load the dataset and d3.scaleLinear and d3.scaleBand to map export values and country names to SVG rectangles. Axes are generated with d3.axisLeft and d3.axisBottom. The chart highlights China and the United States as the leading exporters, with all values scaled in thousands of dollars.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This example visualizes the top 10 countries by total merchandise exports in 2017, using data from the World Trade Organization. It shows a horizontal bar chart ordered by export value, with green bars scaled linearly from 4e11 to 2.3e12. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for axes, and d3.axisLeft and d3.axisBottom to render the SVG axes and rectangles.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 countries by total merchandise exports in 2017, using data from the World Trade Organization. The visualization positions country names on the y-axis and export values on the x-axis, with a linear scale spanning from 400 billion to 2.3 trillion dollars. Built with D3 v5, the code uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.axisLeft` and `d3.axisBottom` for axes. The SVG rendering uses green rectangles to represent each country’s export value.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This example visualizes the top 10 countries by total merchandise exports in 2017, using a horizontal bar chart with steel-blue rectangles. It imports data from a local CSV file and renders it as SVG via D3 v5. The code uses `d3.scaleLinear` and `d3.scaleBand` for axes and positioning, along with `d3.axisLeft` and `d3.axisBottom` to label the chart. Data comes from the World Trade Organization’s 2017 statistics.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 total merchandise exports worldwide for 2017, with countries ranked along the vertical axis and export values in dollars along the horizontal axis. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file using `csv` and rendered as SVG rectangles. Values are converted from billions by multiplying by 1000 during preprocessing.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 countries by total merchandise exports in 2017, based on World Trade Organization data. It uses D3 v5’s `scaleLinear` and `scaleBand` to map export values and country names, with SVG rectangles representing each value. Axes are added via `axisLeft` and `axisBottom`, and the data is loaded from a CSV using `csv()`. The chart highlights China with the largest export total, exceeding two trillion dollars, while the United Kingdom ranks last among the listed countries.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the top 10 countries by total merchandise exports in 2017, sourced from the World Trade Organization. It shows a horizontal bar layout where longer bars represent higher export values, led by China. The visualization is rendered using D3 v5, with index.js leveraging D3 APIs such as `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the SVG chart. The data is loaded from a CSV file, with export values multiplied by 1000, and bars are styled with a steelblue fill.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 countries by total merchandise exports in 2017, using data from the World Trade Organization. The chart visualizes export values in billions of dollars, with countries ordered by their export magnitude. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for tick marks. The data is loaded from a CSV file via `csv()`, rendered as SVG rectangles, and styled with a steelblue fill.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 countries by total merchandise exports in 2017, using data from the World Trade Organization. The chart visualizes export values in billions of dollars, with countries ordered by their export magnitude. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for tick marks. The data is loaded from a CSV file via `csv()`, rendered as SVG rectangles, and styled with a steelblue fill.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 countries by total merchandise exports for 2017, using population data from the World Trade Organization. The visualization uses D3 v5 with an SVG rendering approach, mapping population values to a linear scale and country names to a band scale. Axes are rendered using `axisLeft` and `axisBottom`, while bar widths are set with `scaleLinear`. Data is loaded from a CSV file via the `csv` function.

Sep 4, 2018
Loading thumbnail…

Making a Bar Chart

This example visualizes the top 10 countries by total merchandise export in 2017, using population data from the World Trade Organization to demonstrate a basic bar chart. The chart maps each country’s population to bar widths via a linear scale, while a band scale positions the country labels on the y-axis. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG with axes and steel-blue rectangles. Data is loaded from a CSV file and transformed in JavaScript before rendering.

Sep 4, 2018
Loading thumbnail…

Hello VizHub!

A simple D3.js visualization displays the text “Hello VizHub!” in large Ubuntu font on a dark background. The page initializes by selecting the `<div id="message">` element and setting its text content from a local ES6 module. The example demonstrates importing D3 functions like `select` and using modular JavaScript organization. Styling comes from an external CSS file that imports the Ubuntu font from Google Fonts. The visualization serves as a minimal template showing how to combine D3 with modular code structure and external resources.

Sep 4, 2018
Loading thumbnail…

Assignment 1 Tweak a Face!

A cheerful yellow circle with a surprised expression animates its facial features. The face, centered in an SVG canvas, uses rectangles for eyes and eyebrows and an arc path for the mouth. D3 transitions sequentially move the entire eye group downward and the eyebrows upward, creating a playful, winking-like motion. The code builds the face with d3.select, d3.arc, and chained transition().duration() calls, all rendered as static SVG shapes that animate over time.

Aug 29, 2018
Loading thumbnail…

Assignment 1 Tweak a Face!

A yellow face drawn with SVG shapes animates on a dark background, blinking and wiggling its eyebrows. The piece uses D3.js v5's selection API and transition system to create timed, sequential movements of the eye and brow groups. A circular head with a stroked outline is composed of rectangles for features, and an arc path forms the mouth. The animation demonstrates declarative SVG manipulation through chained `transition().attr` calls, altering the group transforms over set durations.

Aug 29, 2018
Loading thumbnail…

Assignment 1 Tweak a Face!

A stylized face built from SVG shapes animates its eyes and eyebrows in a looping sequence. The yellow circular head stays static while the eye group shifts vertically, followed by a separate eyebrow group that moves after a delay. The mouth is drawn as an arc path using D3's `arc` generator. The code uses D3 v5 selections and chained `transition.attr` calls on the SVG rectangles and groups to create the coordinated motion.

Aug 29, 2018
Loading thumbnail…

Assignment 1 Tweak a Face!

A smiling face drawn with SVG shapes animates its eyebrows upward and back down. The visualization uses D3 v5 to construct and position a yellow circle for the head, rectangles for eyes and eyebrows, and an arc for the mouth. The code relies on D3's `select` and `arc` APIs, plus chained `.transition().attr()` calls to animate the eyebrow group's vertical translation over two seconds.

Aug 29, 2018
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to demonstrate fundamental DOM manipulation by building a stylized smiley face from SVG shapes. The face features animated eyebrows that move up and down via chained `transition().duration()` calls on a group element, creating a dynamic expression. The code explicitly constructs each facial component—circle for the face, two eye circles, rectangular eyebrows, and an arc-based mouth path—using D3’s `select`, `append`, and `attr` methods within an SVG canvas. The `arc()` generator calculates the mouth’s path with specified inner and outer radii.

Aug 29, 2018
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a smiley face from SVG shapes, then makes its eyebrows bounce repeatedly as a looped transition. The face is composed of a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth positioned with SVG transforms. The code imports `select` and `arc` from D3 v5 to generate the mouth path and manipulate elements. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down, demonstrating basic DOM selection and animation without data binding.

Aug 29, 2018
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face from basic SVG shapes using D3.js, with animated eyebrows that move up and down in a looping transition. The code selects an SVG element, centers a group, and appends a circle for the head, circles for eyes, rects for eyebrows, and a path for the mouth generated with the `d3.arc()` helper. Using `d3.transition()` and `.duration(2000)`, the eyebrows shift vertically twice, creating a repetitive motion. The demonstration focuses on fundamental DOM manipulation—such as `.append()`, `.attr()`, and chained transitions—while rendering entirely in SVG with no external data.

Aug 29, 2018
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can animate a smiley face by manipulating SVG shapes, specifically moving its eyebrows up and down over a four-second loop. The code builds the face using `d3.select` to append SVG elements like circles, rectangles, and a path for the mouth, with an arc generator defining the mouth’s curve. The eyebrows use chained `transition().duration(2000)` calls to shift their vertical position, creating the facial animation. The entire face is centered within an SVG canvas using a `<g>` element, with hardcoded layout constants for eye spacing and dimensions.

Aug 29, 2018
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a smiling face from SVG primitives, with animated eyebrows that move up and down over time. The face consists of a yellow circle, two eyes, eyebrows, and a mouth drawn using an arc path. The animation is handled through chained `transition().duration(2000)` calls that alternately shift the eyebrow group’s `transform` attribute, creating a simple looping motion. The code relies on methods like `select`, `append`, and `attr` for DOM manipulation, along with D3’s `arc` generator for the mouth shape.

Aug 29, 2018
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple animated smiley face using D3.js. A yellow circle with eyes and a mouth is constructed through fundamental DOM manipulation, using `svg.append` and `.attr` to create shapes. The face's eyebrows animate by chaining `.transition().duration()` calls to move them up and down repeatedly on the SVG canvas. The code explicitly uses D3's `select` and `arc` APIs to select the SVG element and draw the mouth path.

Aug 29, 2018