Skip to main content
SimilarExport ZIP
100%

Practice - d3-array statistics

✓ Published0🌍 Public
CCJKraenzle
Last edited Nov 18, 2017
Created on Nov 18, 2017

This example demonstrates D3 v4 array statistics methods applied to 2016 U.S. state GDP data (in millions of dollars). The visualization renders a simple SVG text report, displaying the results of `d3.min`, `d3.max`, `d3.extent`, `d3.sum`, `d3.mean`, and `d3.median` for the `gdp` array. Each statistic is shown as a separate line of monospaced text, providing a clear, minimal comparison of the dataset's distribution and central tendencies. The data is loaded from an external data.js file and displayed without any interactive elements, focusing purely on the statistical summaries.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Practice d3-array search

This example demonstrates how to search and sort an array of U.S. state GDP data using D3 v4 array methods. It uses d3.scan to find the index of the state with the smallest GDP, displaying the state name and its index. The visualization then shows two text-based lists of the first ten states sorted alphabetically in ascending and descending order using d3.ascending and d3.descending. The SVG output provides a straightforward comparison of sorted results, highlighting the utility of D3's array utilities for data ordering and search operations.

CCJKraenzle
81% match
Loading thumbnail…

Interactive bar chart based on categorical data

This interactive bar chart displays GDP growth rates for ten U.S. states, ordered from highest to lowest. The chart uses D3.js v5 within a React framework to render SVG bars, axes, and labels. The value on the y-axis represents GDP growth percentage, while the x-axis lists state names. The visualization includes a hover interaction: mousing over a bar highlights it and draws a horizontal dashed line at that bar's value, while showing divergence percentages between the hovered state and all others. A CSS grid and source line complete the presentation.

AAAL FORHAD
70% match
Loading thumbnail…

D3.js Bar Chart with FCC Data

This example visualizes United States GDP data from FreeCodeCamp, rendering a bar chart in SVG where each bar represents quarterly GDP values. The chart uses D3.js v4 with a linear y-scale and an x-axis showing years, fetched from a remote JSON source. The code employs `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to map data to bar heights and positions, with bars styled via CSS classes.

SSubliminal_[var]
70% match
Loading thumbnail…

United State GDP

This D3.js v4 visualization displays the quarterly gross domestic product of the United States from 1947 to 2015 as a series of vertical bars. An interactive tooltip reveals the exact date and GDP value in billions of dollars for each quarter. The chart uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to render the axes. Data is sourced from the FreeCodeCamp GDP-data JSON file hosted on GitHub. Animated transitions enhance the tooltip and overlay effects.

Vvaynexie
70% match
Loading thumbnail…

Activity-6-Scatterplot

This scatterplot visualizes the relationship between population and GDP per capita for U.S. cities using D3.js v6. The SVG-based chart plots each city as a steel-blue circle with a black stroke, positioned along linear scales for both axes. The code loads data from a GitHub-hosted CSV file, converts the population and GDP values to numbers, and renders axes with formatted tick labels. Interactive tooltips appear on mouseover, displaying each city's name, population, and GDP per capita. The visualization employs d3.csv for data loading, d3.scaleLinear for mapping, and d3.axisBottom and d3.axisLeft for coordinate axes.

GGorantla Vishnusai
70% match
Loading thumbnail…

Fork of Pie Chart (with labels) with d3

This example displays a pie chart of the top five US states by GDP using D3 v4 within a React application. The chart visualizes state rankings, with each slice labeled by state name, alongside a legend that pairs colors with state names and GDP values. The code builds the visualization by computing arc paths with `d3.arc`, generating slice data via `d3.pie`, and applying color scales with `d3.scaleOrdinal`. Data is loaded from a remote CSV file using D3's `csv` function. The SVG rendering is handled directly through D3's append and attribute methods, with a React component managing the data-fetching lifecycle.

HHaili0109
70% match
Loading thumbnail…

activity6 task 2

This visualization shows the distribution of GDP growth rates across six countries, with each country’s values broken into five rate categories using a stacked horizontal bar chart. The chart uses a linear x-axis for percentages and a banded y-axis for countries, with colored segments representing each growth-rate range. Built with D3 v7, it loads CSV data via `d3.csv`, applies `d3.stack` for stacking, and uses `d3.scaleOrdinal` for color mapping. Interactive tooltips display exact percentages on mouseover using D3 event handlers.

Ssiri2001j@gmail.com
69% match
Loading thumbnail…

Pie Chart (with labels) with d3

This interactive pie chart visualizes the top 10 US states by GDP, with labeled slices displayed within an SVG. The chart uses d3.pie, d3.arc, and d3.scaleOrdinal to generate and color the wedges, while mouseover events trigger tooltips that display each state’s name and value. The d3.v4 library powers the hover interactions, which adjust slice opacity and show a text-based tooltip with a background rectangle. Data is loaded from an external CSV file, and the visualization is rendered within a React component.

AAAL FORHAD
69% match