Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published1🌍 Public
LLouisa Penrice
Last edited Apr 30, 2024
Created on Apr 30, 2024
Forked from Hello VizHub

This example visualizes the relationship between life expectancy and the number of physicians per thousand people across countries, with point size reflecting CO2 emissions. It loads CSV data from a GitHub repository and renders an SVG scatterplot using D3 v6’s `d3.csv`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` APIs. Circles are appended via `selectAll` and `join`, with mouse events logging data to the console. The chart demonstrates importing D3 via UNPKG and local module usage in VizHub.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates an area chart visualizing population data across multiple countries over time, with a legend identifying each series. It loads CSV data from a GitHub gist and processes it with a local ES6 module. The chart uses D3 v6 APIs including `d3.csv`, `d3.scaleOrdinal`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft`, while rendering via SVG. The reusable `areaChart` module exports a configurable function, and the visualization applies `schemeCategory10` for colors and `curveMonotoneX` for smoothing.

Aamulyabhagwat1999@gmail.com
79% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This visualization shows COVID-19 confirmed cases over time as a line chart, with dates on the x-axis and case counts on the y-axis. It loads data from a CSV file hosted on GitHub and renders an SVG path using `d3.line` and `d3.csv`. The code uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to construct the axes, with styling applied via the `stroke` attribute. The example demonstrates D3 v6 loading via UNPKG.

Vvjc5505@gmail.com
78% match
Loading thumbnail…

Fork of Hello VizHub

This example shows an area chart of time-series data from a diabetes CSV file, with a steelblue fill and labeled axes for date and value. It loads D3 via UNPKG and uses the `d3.csv` method to fetch the data, `d3.scaleTime` and `d3.scaleLinear` for scaling, `d3.area` for the area shape, and `d3.axisBottom` and `d3.axisLeft` for axes. The visualization also demonstrates ES6 module imports, including a local `message` module that sets text in the page, while the chart is rendered as SVG inside a dedicated `#chart` div.

LLakshmiPrasannaValdas@my.unt.edu
78% match
Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays an area chart of world population estimates from 1750 to 2150, with multiple series distinguished by color. It loads data from a remote CSV file and renders the visualization as SVG, using D3’s `d3.area`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.curveMonotoneX` to build the chart. The example also demonstrates ES6 module imports from D3 and local files, along with a custom chart factory function.

Aamulyabhagwat1999@gmail.com
78% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This area chart displays population trends for the world and major regions from 1750 to 2150, using an SVG rendered with D3.js. The code imports D3 via ES6 modules, loads CSV data from a GitHub gist, and parses years with `d3.timeParse`. It applies `d3.area` with a monotone curve, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.scaleOrdinal` for categorical coloring. Legends and a title are appended as SVG elements, demonstrating modular chart configuration with D3 methods.

Aamulyabhagwat1999@gmail.com
78% match
Loading thumbnail…

Fork of Hello VizHub

This example presents an age distribution pie chart built with D3 v7. It fetches CSV data from an online source, counts entries into four age brackets, and visualizes the proportions as pie slices with labels. The chart uses `d3.csvParse`, `d3.pie`, `d3.arc`, and a `d3.schemeCategory10` color scale, rendering arcs and a legend inside an SVG.

Aanusha.chilkamarri26@gmail.com
77% match
Loading thumbnail…

Fork of Hello VizHub

This example loads a CSV dataset of national populations and renders a horizontal bar chart for ten countries in the year 2000. The visualization uses D3 v7's `scaleLinear` and `scaleBand` to map population values and country names to SVG rectangles, with axes generated by `d3.axisBottom` and `d3.axisLeft`. It also demonstrates importing from the `d3` module and a local ES6 module, along with parsing comma-separated numbers via `d3.csv`.

Rrahul.bonu524@gmail.com
77% match
Loading thumbnail…

Fork of Hello VizHub

This stacked bar chart displays population trends for multiple countries from 1950 to 2020, using a CSV dataset loaded via d3.csv. The visualization uses D3 v7’s d3.stack, d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal to render stacked segments per country, with an SVG output and an auto-generated legend for each year column. Axes are added via d3.axisBottom and d3.axisLeft.

Rrakshithareddy217@gmail.com
77% match