Skip to main content
Log in
F

fiona187412

@fiona187412·14 public vizzes

Loading thumbnail…

Cars Scatter Plot

This scatter plot from the D3.js gallery shows the relationship between horsepower and weight for various cars, using data from the UCI Machine Learning Repository’s Auto MPG dataset. Each circle represents a car, with its position determined by the `d3.scaleLinear` scales for the x and y axes. The visualization is rendered as an SVG, using `d3.axisBottom` and `d3.axisLeft` for the axes, and includes a title and axis labels. The code loads data from a CSV file via `d3.csv`.

Sep 9, 2019
Loading thumbnail…

Loading and Parsing Zoo CSV Data

This example uses d3.csv to load a zoo dataset from a CSV file hosted on VizHub, then d3.csvFormat to calculate and display basic metadata about the data. The page renders a large pre-formatted text message showing the dataset’s size in kilobytes (rounded from the raw CSV string length), its row count, and its column count. The underlying dataset comes from the UCI Machine Learning Repository’s Zoo collection, containing 17 Boolean attributes plus a class label for each animal. The visualization is minimal, focusing solely on parsing and summarizing the data structure.

Sep 9, 2019
Loading thumbnail…

Loading and Parsing Zoo CSV Data

This example displays basic dataset statistics for the Zoo CSV file, showing its size in kilobytes, row count, and number of columns in large text. It fetches the remote CSV using `d3.csv` and then reveals details about the parsed data. The visualization calculates file size with `d3.csvFormat`, counts rows via `data.length`, and accesses column names through `data.columns`. The data originates from the UCI Machine Learning Repository’s Zoo dataset, which contains 17 Boolean attributes describing animals.

Sep 9, 2019
Loading thumbnail…

Zoo Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with circles sized at a fixed radius and positioned along a scalePoint y-axis for country names and a linear x-axis for population values. Built with D3 v5, it uses `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG. The data originates from a CSV file, and the chart includes labeled axes and a title.

Sep 9, 2019
Loading thumbnail…

Zoo Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with circles sized at a fixed radius and positioned along a scalePoint y-axis for country names and a linear x-axis for population values. Built with D3 v5, it uses `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG. The data originates from a CSV file, and the chart includes labeled axes and a title.

Sep 9, 2019
Loading thumbnail…

Zoo Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with circles sized at a fixed radius and positioned along a scalePoint y-axis for country names and a linear x-axis for population values. Built with D3 v5, it uses `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG. The data originates from a CSV file, and the chart includes labeled axes and a title.

Sep 9, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 United Nations estimates from the World Population Prospects report. It highlights how d3.axisBottom and d3.axisLeft can be customized through tick formats, sizes, and colors, with pink gridlines and removed domains. The visualization uses d3.csv, d3.scaleLinear, and d3.scaleBand, rendering SVG rectangles filled with steelblue. Population values are formatted compactly using d3.format with the suffix 'G' replaced by 'B' for billions.

Sep 8, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using data from the United Nations World Population Prospects 2017 estimate. The chart demonstrates extensive customization of D3 axes, including formatted tick labels that convert large numbers to abbreviated form (e.g., G to B), removal of domain lines, and styled tick marks with pink grid lines. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` from D3 v5, rendering the visualization as SVG with custom margins, axis labels, and a title.

Sep 8, 2019
Loading thumbnail…

Making a Bar Chart!

This example demonstrates how to build a bar chart from CSV data using D3.js, displaying population figures for ten countries. Data is loaded via `d3.csv` from a local data file. The chart renders as SVG elements, with the `select` method targeting the existing `<svg>` element and utility functions like `scaleLinear` and `axisLeft` mapping the dataset to visual bars. The code emphasizes fundamental DOM manipulation for creating data-driven visualizations.

Sep 8, 2019
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that move up and down using D3.js transitions. The example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth to a group, with the eyebrow movement created through chained `transition().duration()` calls that alter the group’s transform.

Sep 8, 2019
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that move up and down using D3.js transitions. The example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth to a group, with the eyebrow movement created through chained `transition().duration()` calls that alter the group’s transform.

Sep 8, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes with CSS styling to create a static composition of circles, rectangles, lines, and paths. The visualization uses the SVG API directly, with elements like `<circle>`, `<rect>`, `<line>`, and `<path>` arranged via grouping and transforms. Shapes inherit fill and stroke properties from parent `<g>` elements or from a CSS class, with one path using a rounded line join. All shapes are rendered as static vector graphics in an SVG container, with explicit coordinate positioning and no interactive or data-driven behavior.

Sep 2, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes with CSS styling to create a static composition of circles, rectangles, lines, and paths. The visualization uses the SVG API directly, with elements like `<circle>`, `<rect>`, `<line>`, and `<path>` arranged via grouping and transforms. Shapes inherit fill and stroke properties from parent `<g>` elements or from a CSS class, with one path using a rounded line join. All shapes are rendered as static vector graphics in an SVG container, with explicit coordinate positioning and no interactive or data-driven behavior.

Sep 1, 2019
Loading thumbnail…

Cars Report

This example shows how to display a formatted car listing as text on a webpage. It presents a single car’s details—year, make, model, and price—in a large, styled message element. The code uses JavaScript modules, importing car data from `cars.js`, which parses a JSON string, and a formatting function from `formatCar.js`. The message is written to the DOM using `document.getElementById` and `textContent`. Styling relies on an external Google Fonts import via CSS.

Sep 1, 2019