Skip to main content
SimilarExport ZIP
100%

graphs

✓ Published0🌍 Public
BBharath kumar
Last edited Apr 23, 2024
Created on Apr 23, 2024
Forked from HTML Starter

This visualization displays country-level economic and health indicators, including a line chart of GDP values, a histogram of GDP distribution, and a scatter plot comparing GDP with life expectancy. The code loads CSV data, cleans GDP strings, and initializes three chart instances using the Chart.js library alongside D3.js for data fetching. The charts render on separate HTML canvas elements, with the line chart displaying raw GDP values and the scatter plot revealing correlations between economic output and longevity.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Visualisation GDP

This example presents a multi-chart dashboard visualizing global GDP, population, CO2 emissions, and agricultural data. It loads CSV data from a GitHub repository and renders separate bar, line, histogram, and scatter charts using the Chart.js library. The code also includes custom D3.v5 functions for violin, density, histogram, and boxplot plots, which are defined but not directly invoked in the main HTML, where charts are drawn on canvas elements.

BBharath kumar
83% match
Loading thumbnail…

Bar Chart

A scatter plot displays the relationship between GDP and life expectancy across approximately 110 countries, with points colored by world region. The D3.js v7 code loads data from a CSV file using `d3.csv`, applies linear scales for both axes via `scaleLinear`, and maps each data point to a circle using `d3.selectAll` and `.join`. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while a categorical color scale using `d3.scaleOrdinal` and `schemeTableau10` distinguishes geographic regions. The visualization is drawn as SVG elements within a container.

LLikhitaMudagereShivaraj@my.unt.edu
82% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between GDP and life expectancy for a synthetic dataset of countries, with points colored by region using a Tableau10 ordinal scale. It loads CSV data with d3.csv and d3.autoType, then renders circles in an SVG container using d3.scaleLinear for both axes and d3.axisBottom/d3.axisLeft for tick marks. The chart includes labeled x and y axes, semi-transparent points, and is built entirely with D3 v7.

LLikhitaMudagereShivaraj@my.unt.edu
81% match
Loading thumbnail…

Activity6_q3

This scatterplot shows the relationship between GDP per capita and life expectancy for seven countries, with each circle colored by country. The visualization uses D3.js v7 to load a local CSV file, scale the data linearly on both axes, and render circles as SVG elements. Axes are drawn using d3.axisBottom and d3.axisLeft, with labels for both variables. The d3.scaleOrdinal with schemeCategory10 assigns distinct colors to each nation, making it easy to compare economic output against health outcomes across the sample.

Vvidyagangasani@my.unt.edu
80% match
Loading thumbnail…

Multi Line Plot of Life Expectancy with respect to GDP

This multi-line plot visualizes life expectancy against GDP per capita over 15 years, with each line representing a year and color-coded via `d3.schemeCategory10`. It shows that higher GDP generally correlates with higher life expectancy following a logarithmic trend. The visualization is built using D3 v4 and the Metrics Graphics library, which renders the chart after parsing and nesting the data with `d3.csv` and `d3.nest`. Hovering over a line displays the corresponding year, GDP, and life expectancy. The dataset originates from WHO life expectancy data hosted on GitHub.

Aaishwarya8615
80% match
Loading thumbnail…

Line Plot of Life Expectancy Data_GDPVsLifeExpectancy

This line plot shows life expectancy versus GDP per capita across multiple years, with each line representing a year colored by a category scale and line thickness reflecting average BMI. The visualization reveals a logarithmic relationship where higher GDP correlates with increased life expectancy, though gains diminish at higher income levels. Built with D3 v4 and Metrics-Graphics, it loads CSV data from a GitHub gist and nests rows by year to generate separate series. Hovering over a line displays the exact year, GDP, and life expectancy values through the chart’s interactive tooltip.

Aaishwarya8615
80% match
Loading thumbnail…

GDP

This visualization displays GDP values by country as horizontal bars. Built with D3 v7, it loads CSV data from a GitHub repository using `d3.csv`, then maps country names to the x-axis and GDP values to the y-axis with linear and band scales. Bars change color on hover, and a tooltip shows the country name and GDP value. The SVG chart is rendered with rotated x-axis labels for readability, with axes styled via CSS classes.

Aadithiarikatla@gmail.com
79% match
Loading thumbnail…

Fork of Bubble chart

This bubble chart visualizes the relationship between GDP, population, and life expectancy for 16 countries using a Cartesian coordinate system. Each circle's x-position corresponds to GDP, y-position to population, and radius to life expectancy, with color distinguishing countries. Built with D3 v7, the visualization uses `d3.scaleLinear()` for axes, `d3.scaleSqrt()` for bubble sizing, and `d3.scaleOrdinal()` for categorical coloring. Interactive hover effects enlarge bubbles and display country labels via `.on('mouseover')` handlers. Data loads from a local CSV file, rendered as SVG with animated transitions on user interaction.

Ssathvik0311@gmail.com
79% match