Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Dec 5, 2021

Created on Dec 5, 2021

This visualization compares poverty rates in the US and Los Angeles County from 1996 to 2018 using a multi-line chart. The D3.js code (v5) loads CSV data from the Federal Reserve Economic Data, computes summary statistics, and renders the time series with SVG lines. The visualization uses `d3.scaletime` for the time axis and `d3.scaleLinear` for the poverty percentage values.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This visualization shows how a selected country’s happiness and its contributing factors (economy, family, health, freedom, trust, generosity) change from 2015 to 2023, either as raw scores or as differences from the global yearly average. The user can switch between these two modes via a flag. The chart renders multiple colored lines, one per feature, using d3.line and d3.scaleOrdinal with d3.schemeSet2, and includes axes from d3.axisBottom and d3.axisLeft. Data comes from the CSV file, which is loaded with d3.csv.

Yyihsuan

75% match

Loading thumbnail…

Fork of poverty in counties by React and d3

This choropleth map visualizes PM2.5 concentration across U.S. counties from 2000 to 2020, with an animated slider that plays through years. React manages the UI state while d3.geoPath renders county and state boundaries from the US Atlas TopoJSON. A sequential d3.scaleSequential with interpolateYlGnBu colors each county by its yearly value, with a linear gradient legend showing the 0–19 scale. Hovering reveals county names and concentration values via SVG title elements, and missing data appears grey.

SSurikanti Swathi

75% match

Loading thumbnail…

Fork of Fork of HTML Starter

A line chart visualizes cost data from 2000 to 2013, plotting expenses against time with a green line. The visualization uses D3 v5 to load CSV data, create time and linear scales, and render axes with custom tick styling. The chart highlights the upward trend in sales, with red axis labels and a bold title, set against a light blue background. The code employs d3.select, d3.csv, d3.scaleTime, d3.scaleLinear, and d3.line to construct the SVG-based chart.

NNandini Maddula

75% match

Loading thumbnail…

Fork of Data visualizations

This scatterplot visualizes the correlation between poverty and obesity rates across U.S. states. Each state is represented by a circle labeled with its abbreviation, plotted along axes for poverty and obesity percentages. The chart uses D3.js to load CSV data, create scales, and render the SVG elements. A tooltip, built with the d3-tip library, appears on click, showing the state name, poverty, and obesity values. The accompanying text highlights observed clusters and trends in the data.

JJoshua chirchir

74% match

Loading thumbnail…

Fork of HTML Starter

A bar chart displays national-level data from a CSV dataset, filtered to include all years for the "National" level. The visualization uses D3.js to create an SVG rendering, with a band scale for the x-axis and a linear scale for the y-axis. Bars are drawn as rectangles filled with steelblue, and axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data is loaded asynchronously via `d3.csv` from a GitHub gist URL.

Pprathyusha-reddy-arch

74% match

Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes birth rate trends for U.S. states, comparing 2017 values on the x-axis against 2018 values on the y-axis, with each state represented as a green dot. The visualization uses D3.js v6 to load CSV data from a GitHub gist, parse it, and render an SVG chart with labeled axes. The code implements linear scales with `d3.scaleLinear`, draws axes via `d3.axisBottom` and `d3.axisLeft`, and creates circles with `append('circle')`. Interactive mouseover events log state-specific data to the console.

NNandini Maddula

73% match

Loading thumbnail…

Fork of HTML Starter

This example displays a static bar chart of country populations, reading from a CSV file with `d3.csv` and rendering rectangles with `d3.selectAll` and `data.join`. It uses D3 v7 within a plain HTML page, with data loaded asynchronously and converted to numbers. The visualization demonstrates basic data binding and SVG shape creation, though the rendered bars are all fixed at 300 by 300 pixels, so the chart does not reflect population values visually.

Vvoid-LSTM

73% match

Loading thumbnail…

Fork of HTML Starter

This example displays a population dataset from the UN’s 2019 estimates, rendered as an interactive React application. The code imports D3’s `csv` loader to fetch data from a GitHub Gist, while `arc` and `pie` are used to generate a chart based on the loaded values. The visualization uses React hooks like `useState` and `useEffect` to manage asynchronous data loading and state. The UI presents a styled message, “Hello HTML!”, alongside the data-driven chart, combining static HTML/CSS with dynamic JavaScript and D3 functionality.

Aavgoust

73% match