Basic Scatter Plot

100%

Basic Scatter Plot

✓ Published0🌍 Public

Last edited Sep 18, 2017

Created on Sep 14, 2017

A scatter plot displays suicide rates across multiple countries from 1985 to 2004, with each dot colored by country to compare temporal trends. The visualization uses D3 v4 (d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, d3.axisLeft) and the d3-legend library to render colored circles in SVG. Data comes from Our World in Data’s suicide rates by country dataset, loaded via d3.csv, with axes labeled for year and suicide rate.

AI-generated description

Built with blockbuilder.org

The following scatter plot presents suicide rates in different countries across the world over time.

Data source https://ourworldindata.org/grapher/suicide-rates-by-country

This bar chart was forked from <a href=' '>curran</a >'s block: <a href='https://bl.ocks.org/curran/ecb09f2605c7fbbadf0eeb75da5f0a6b'>Stylized Scatter Plot with Color Legend</a >.

Data from Suicide by Lindsay Lee, Max Roser and Esteban Ortiz-Ospina

mit Licensed

Similar vizzes

Loading thumbnail…

Suicide rates vs. prevalence of depressi in D3 Scatter Plot

This scatter plot displays suicide rates per 100,000 individuals on the y-axis against year on the x-axis, with data sourced from Our World in Data. Blue circles highlight all countries’ suicide rates for the year 2004, while red circles represent all other years, making it easy to compare a specific year against the broader temporal trend. The visualization uses D3 v6 with `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll` to render SVG circles. The y-axis is labeled “Suicide rate deaths,” and the x-axis is labeled “Year,” with a fill-opacity of 0.35 applied to the circles.

Mmnalk

86% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays suicide rates over time for Canada, France, and Germany, with each circle representing a yearly observation for a specific country and gender. The data originates from the UCI Machine Learning Repository. Using D3 v5, the visualization employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for gridlines, and SVG circles with red fill to depict the relationship between year and suicides per 1000 people, sourced from a CSV file.

Wwishcsdev

82% match

Loading thumbnail…

Line Chart with Multiple Lines

This example displays suicide numbers across countries over time, with each country’s yearly data shown as a separate colored line and a matching color legend on the right. Using d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear map years and suicide counts, while d3.nest groups records by country and sorts them by the last value. The SVG rendering includes axes, gridlines, and a title, though the line paths are commented out, so only colored circles appear at data points.

Wwishcsdev

82% match

Loading thumbnail…

Suicides rates in countries

The chart displays suicide rates over time for various countries, with a line chart connecting yearly data points. The visualization uses D3 v5 to load CSV data, parses year values, and scales the time and linear axes. It renders an SVG with a maroon line path, axis labels, and gridlines, with the data pulled from the source at vizhub.com/wishcsdev/datasets/suicides.csv.

Wwishcsdev

82% match

Loading thumbnail…

World Suicides Scatter Plot with Menus

This interactive scatter plot explores global suicide rates, allowing users to select which categorical or quantitative attributes to map to the x- and y-axes via dropdown menus. The visualization uses the D3.js v6 library, employing `selection.join` for smooth enter, update, and exit transitions when attributes change. Data is loaded as CSV from a GitHub gist and rendered into an SVG, with circles animated between positions over a one-second transition. The chart also dynamically switches between `scalePoint` for categorical data and `scaleLinear` for quantitative data, updating the corresponding axes.

AAndre J Denais

81% match

Loading thumbnail…

Suicide prevention bar chart

This bar chart displays the highest suicide counts per country from 1985 to 2016, using a horizontal bar layout where bar length encodes the number of suicides and country names label the y-axis. The visualization uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG graphic. Data comes from a CSV file containing country, year, sex, age, and suicide counts, aggregated to show total suicides per country. The chart includes axis titles and a title text, with bars rendered in slateblue.

Mmnalk

81% match

Loading thumbnail…

Cars Scatter Plot

A scatter plot maps car data from the UCI Auto MPG dataset, plotting year against suicide counts per country. The visualization renders red, semi-transparent circles within an SVG, using scales and axes from D3 v5. It employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks and grid lines, and formats data with `format`. The code reads from a CSV containing suicide and population statistics for Canada, France, and Germany, though the title and labels focus on the suicide trend.

Wwishcsdev

80% match

Loading thumbnail…

D3 Time Series Axes

This example shows suicide rates over time as multiple colored lines, one per country, plotted against a linear time axis and a value axis. The visualization uses D3 v4 to load CSV data via `d3.csv`, processes it with `d3.nest()` to group records by country, and draws the lines with `d3.line()`. Axes are generated through `d3.axisBottom` and `d3.axisLeft`, while a color scale (`d3.scaleOrdinal`) assigns each country a distinct stroke color. The rendered output is an SVG graphic within a fixed-width chart area.

Mmnalk

80% match