Skip to main content
SimilarExport ZIP
100%

Fork of why duration not working faster

✓ Published0🌍 Public
PPatrick-Houlihan
Last edited Oct 7, 2021
Created on Oct 7, 2021

This interactive scatter plot visualizes global suicide rates from a CSV dataset, allowing users to explore relationships between quantitative variables like suicide counts, population, GDP, and year via dropdown menus. Built with D3 v6, the visualization uses SVG rendering and animated transitions to update circle positions when axes change. Each data point is a semi-transparent circle, with d3.axisLeft and d3.axisBottom rendering the axes. The code implements custom menu and scatterPlot modules, using d3.scaleLinear, d3.extent, and d3.transition to manage scales and smooth updates.

AI-generated description

Add Interaction

Shows the Suicide_Rates.csv.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of final

This interactive scatter plot explores global suicide rates using a dataset from a CSV file, allowing users to switch between quantitative variables for the x- and y-axes via dropdown menus. Built with D3 v6, the visualization renders as an SVG with animated transitions (`d3.transition`) that smoothly move circles and update axis scales when selections change. The code uses `d3.scaleLinear` for continuous data and `d3.scalePoint` for categorical support, with axes generated by `d3.axisLeft` and `d3.axisBottom`.

Mmnalk
91% match
Loading thumbnail…

why duration not working faster

This scatter plot visualizes global suicide rates from a CSV dataset, with interactive dropdown menus to switch the quantitative variables mapped to the x- and y-axes. The SVG circles animate their positions via `transition().duration(10)` with per-circle delays, while axis transitions update when the selection changes. Built with D3 v6, the chart uses `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the axes and `dispatch` for menu change events. The duration is intentionally short, making circle movements appear near-instant.

Mmnalk
88% 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
82% match
Loading thumbnail…

Fork of Final

This interactive visualization combines a world map of suicide counts with a linked time-series histogram. Circles on a natural Earth projection encode suicide numbers by area, colored by category, with tooltips revealing country-specific details. A brushable histogram below filters the map by year, updating the displayed bubbles. The visualization uses React, D3 v5 modules like `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, and `brushX`, rendering to SVG. Data comes from a CSV of suicide rates merged with city coordinates.

CConnor Rothschild
81% match
Loading thumbnail…

Fork of Fork of Making a Bar Chart

This bar chart displays suicide numbers across countries for specific years, with horizontal bars ordered by count magnitude. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for categorical country labels on the y-axis. Data is loaded from a CSV file using `d3.csv`, with the `suicides_no` field converted to numeric values. The chart includes axis labels and a title, while the dataset originates from the United Nations World Population Prospects 2017 estimates.

Jjerry691
80% match
Loading thumbnail…

Fork of Fork of Suicide Rates 11/17/2021

This visualization presents global suicide rates on a natural Earth projection map, with circles sized by the number of suicides and colored by a categorical scale. A linked time-series histogram below allows brushing to filter the map by year. The map uses d3.geoPath for geographic features, while d3.scaleSqrt and d3.scaleOrdinal control circle size and color. Interactive tooltips display country details via the Tippy React library. Data comes from a CSV of suicide rates merged with city coordinates.

Mmnalk
79% match
Loading thumbnail…

Fork of Fork of Fork of Suicide Rates 11/17/2021

This interactive visualization combines a natural Earth projection map with a time-series bar chart to explore global suicide rates. A bubble map overlays circles scaled by suicide count on geographic coordinates, with tooltips revealing country-specific metrics like GDP per capita and population. A linked DateHistogram with brushX filtering enables temporal exploration, updating the map’s displayed data. The visualization uses D3 v5 modules including geoNaturalEarth1, geoPath, scaleSqrt, and brushX, rendered as SVG within a React framework, sourcing world atlas TopoJSON and CSV data.

Mmnalk
79% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the Suicide Rates Dataset, sourced from a public GitHub gist, by selecting different numerical attributes for both the x- and y-axes using ReactDropdown menus. The visualization renders points as SVG circles with tooltips, and axes are built with custom React components using d3.scaleLinear and d3.extent for scaling. Users can compare relationships between variables such as suicide counts, GDP, year, and per-capita GDP.

Mmnalk
79% match