Skip to main content
SimilarExport ZIP
100%

Rate of Depression over Time per Country

✓ Published0🌍 Public
CCrossZeigler
Last edited May 19, 2023
Created on May 19, 2023

This visualization shows the global rate of depression over time for each country, with a logarithmic y-axis displaying cumulative deaths. It uses React and d3.v5 to render an SVG line chart, with a Voronoi overlay for hover interactions that highlight the active country’s line and display a tooltip with exact values. Data comes from a CSV dataset processed via d3.csv, with scales and line generators built using d3.scaleTime, d3.scaleLog, and d3.line.

AI-generated description

Line chart of Coronavirus cases to date, by country. Data from Johns Hopkins Coronavirus Dataset.

Hover to see details and illuminate lines.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked Bar Chart of Depression Rates by Country

This horizontal stacked bar chart displays depression rates across countries, broken down by year from 2015 to 2019. Each bar represents a country, with colored segments corresponding to annual prevalence percentages, and hovering reveals exact values via a custom tooltip. Built with D3 v4, the visualization renders as SVG and uses `d3.stack` for the segmented bars, `d3.scaleOrdinal` for the color palette, and a CSV dataset from GitHub as the data source.

CCrossZeigler
82% match
Loading thumbnail…

Number with depression by country in D3 Scatter Plot

A D3.js scatter plot visualizes the number of people with depression by country from 1990 to 2016. Each blue circle represents a single country-year observation, plotted with prevalence of depressive disorders on the x-axis and the year on the y-axis, showing the distribution of affected populations over time. The code uses D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` loader to parse data from a GitHub Gist and render SVG circles with fill opacity. The visualization aggregates all sexes and ages, sourced from Our World in Data.

Mmnalk
80% match
Loading thumbnail…

Depression vs Happiness

This visualization plots depression rates against happiness scores for different countries, with each circle representing a country and its position determined by those two metrics. A dropdown menu allows viewers to select a specific year, triggering a smooth transition of the data points. The chart uses D3 v6’s scales (`d3.scaleLinear`), axes (`d3.axisBottom`, `d3.axisLeft`), and SVG circles, with an animated `transition` to update positions when the year changes. Data is loaded from a CSV file via `d3.csv`.

NNikithakatta30
80% match
Loading thumbnail…

Untitled

This interactive bar chart visualizes the depression rate across the top 10 happiest countries for a selected year. A dropdown menu, populated from a CSV file, lets the user choose a year, triggering a new chart that shows the "Allages" depression rate for each country. Built with D3 v6, the visualization uses `d3.select`, `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear` to render the SVG, with bars colored green and rotated country labels for readability.

CCrossZeigler
78% match
Loading thumbnail…

Fork of Viz_3

This bar chart displays the top 10 countries with the highest depression rates (all ages) for the year 2019, using data from a CSV file filtered and sorted within the React app. It renders with SVG via D3 v5 and React, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Horizontal bars show the percentage values, with axes generated by custom `AxisBottom` and `AxisLeft` components. The chart is rendered using ReactDOM, and hover tooltips are provided via SVG `<title>` elements.

NNikithakatta30
78% match
Loading thumbnail…

DataViz Project - Suicides Visualization

An interactive line chart visualizes suicide death rates in American countries over time, alongside related mental health and unemployment metrics. A country selector filters the dataset, and a color legend distinguishes unemployment from mental illness data. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `curveNatural` for path rendering, with data from a CSV hosted on GitHub Gist. The SVG output includes custom axes and a dropdown menu for country selection.

FFelipe Mejías
78% match
Loading thumbnail…

People affected by mental diseases over the years in American Countries

This interactive visualization shows how the percentage of a population affected by various mental health disorders changes over time across American countries. Users can select a country and a mental disease from dropdown menus to filter the view. A single line chart displays the trend using SVG paths generated with d3.line and curveNatural. The React application uses D3 v5 scales (scaleTime, scaleLinear) for axes and data from a CSV file loaded via d3.csv.

FFelipe Mejías
77% match
Loading thumbnail…

Corona Virus Deaths Over Time By Country (React + D3 Axis)

This chart displays cumulative COVID-19 death counts over time for multiple countries, using a log-scaled y-axis to handle the wide range of values. Each country’s timeseries is rendered as an SVG path generated with d3.line, while d3.scaleTime and d3.scaleLog define the axes. React components wrap the D3 axis generators (axisBottom, axisLeft) to create the gridlines and labels. Data comes from the CSSEGISandData COVID-19 global time series CSV, loaded via d3.csv and transformed with d3.timeParse.

KKazushige Okuma
77% match