Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ssitaramchallapalli
Last edited Jul 2, 2022
Created on Jul 2, 2022
Forked from HTML Starter

This example visualizes state population trends from 1910 to 2010 using colored lines for California, Michigan, and Texas. Hovering over the chart reveals a tooltip and a vertical line showing the exact population values for each state at that decade. The visualization is built with d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft, and uses d3.json to load data from a JSON file. It renders as SVG, with a custom tooltip div positioned via d3.event coordinates.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example visualizes state population growth over time for California, Michigan, and Texas using three colored line charts plotted from 1910 to 2010. Each line is labeled with the state’s name and current population. Built with D3 v4 and React, it uses `d3.scaleLinear` for axes, `d3.line` for path generation, and `d3.json` to load data from a static JSON file. A tooltip, triggered by mouse movement over a transparent overlay rectangle, displays the population ranking for the nearest decade and draws a vertical reference line.

Ssitaramchallapalli
96% match
Loading thumbnail…

Untitled

This visualization displays the population growth of California, Michigan, and Texas from 1910 to 2010 using multi-line charts. Each state is represented by a colored line with a corresponding label at the right edge. Using d3.line, d3.scaleLinear, and d3.axisBottom/axisLeft, the SVG renders population trends. A mouseover tooltip reveals yearly totals and ranks states by population, with a vertical guide line using d3.mouse and d3.event. Data comes from the state-populations.json file.

Ssitaramchallapalli
94% match
Loading thumbnail…

Untitled

This visualization displays the population of various states over time using an interactive line chart. The chart, rendered as an SVG with D3 v4, plots year on the x-axis and population on the y-axis. Hovering over the chart triggers a tooltip that ranks states by their population for that specific decade, with a vertical line marking the selected year. The code uses `d3.line`, `d3.axisBottom`, and `d3.axisLeft` to generate the chart, and it loads data from a CSV file hosted on GitHub Gist.

Ssitaramchallapalli
89% match
Loading thumbnail…

Multiple Line Chart with ToolTipV2

This example shows how state populations in California, Michigan, and Texas changed from 1910 to 2010 using a multiple line chart with color-coded lines and a legend. The visualization also provides an interactive tooltip that appears on mouse movement, displaying the exact year and population value for each state. It uses D3 v4 with SVG rendering in a React framework, leveraging `d3.line`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to construct the chart. An invisible overlay rect captures mouse events, while a separate tooltip div and vertical guide line highlight data points.

Wwusushi
87% match
Loading thumbnail…

Untitled

This interactive visualization displays regional population data over time, where each region appears as a color-coded circle whose radius corresponds to a selected year’s population value. A slider controls the year from 1946 onward, triggering a smooth transition that resizes the circles to reflect changing data. The SVG renderer uses D3.js v3 scales and axes, with circle positions fixed by an ordinal x-axis and a linear y-scale for sizing. Hovering reveals tooltips with region and population details, while the data is loaded from an external CSV file.

Ssgalhamdani
81% match
Loading thumbnail…

Untitled

This chart displays the population distribution across six U.S. states, broken down by seven age brackets. Each state’s data is shown as a group of colored bars, with a legend that allows users to click on age categories to filter which bars remain visible. The visualization uses D3 v5 with a band scale for grouping, a linear scale for the y-axis, and an ordinal scale for colors. It is rendered as an SVG, and clicking a legend item triggers a transition that updates the visible bars and rescales the axes.

RRamon96
81% match
Loading thumbnail…

Untitled

This stacked bar chart displays the total population for each state across selected years, with bars segmented by three categories. A dropdown menu lets viewers switch between years, triggering a smooth transition that updates bar heights and the y-axis scale. The visualization is built with D3.js v5, using d3.stack for data aggregation, d3.scaleBand and d3.scaleLinear for positioning, and SVG transitions to animate changes. Data comes from a local CSV file, with each bar labeled with its total value.

Pp189
81% match
Loading thumbnail…

Untitled

This stacked bar chart displays the total population for each state across selected years, with bars segmented by three categories. A dropdown menu lets viewers switch between years, triggering a smooth transition that updates bar heights and the y-axis scale. The visualization is built with D3.js v5, using d3.stack for data aggregation, d3.scaleBand and d3.scaleLinear for positioning, and SVG transitions to animate changes. Data comes from a local CSV file, with each bar labeled with its total value.

Pp189
81% match