Skip to main content
Log in
M

mnalk

@mnalk·28 public vizzes

Loading thumbnail…

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

This interactive dashboard combines a world bubble map with a time-series histogram to explore suicide rates. The map uses `d3.geoNaturalEarth1` and `geoPath` to render landmasses, with circle sizes scaled via `d3.scaleSqrt` to suicide counts, and Tippy tooltips to reveal country, GDP, and population details. A linked `d3.brushX` histogram filters the map’s data by year, while separate small multiples and a sex-based histogram supplement the view. Data is loaded from CSV files via `d3.csv` and world topology from TopoJSON.

Dec 7, 2021
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.

Dec 7, 2021
Loading thumbnail…

A world map showing cities with a population greater than 50,000

This interactive dashboard visualizes suicide rates across countries with a world map and linked charts. The map displays circles sized by suicide count, colored by categorical data, and positioned using `d3.geoNaturalEarth1` projection and `geoPath`. Tooltips provide detailed country statistics via Tippy.js. A brushable time-series histogram filters data by year, dynamically updating the map and a scatter plot, which allows users to explore relationships between attributes like GDP and suicide numbers using `d3.scaleLinear` and dropdown menus. The visualization uses SVG and React with D3 v4, sourced from a merged dataset of world cities and suicide rates.

Dec 7, 2021
Loading thumbnail…

Untitled

This chart displays two series of suicide counts by country as concentric circular bar charts, with the outer green bars using a radial scale from the inner radius to the plot edge and an inner red series scaled from the inner radius down to 5. The SVD is rendered as SVG in D3 v6, using `d3.scaleBand` for angular positions, `d3.scaleRadial` for radial values, and `d3.arc` to generate the bar paths with adjustable padding. Country labels rotate around the chart, flipped for readability. Data comes from a CSV file loaded via `d3.csv`.

Dec 7, 2021
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.

Nov 29, 2021
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.

Nov 29, 2021
Loading thumbnail…

Fork of Suicide Rates 11/17/2021

This bubble map and time-series visualization depicts global suicide rates using data from a curated CSV of suicide statistics and a world cities dataset that provides geographic coordinates. The map, rendered with `d3.geoPath` and a `geoNaturalEarth1` projection, shows each data point as a circle with an area scaled to suicide count via a square-root scale. The interactive histogram below, built with `d3.scaleTime`, `d3.scaleLinear`, and a brush filter, lets users select a date range, dynamically filtering which bubble markers appear on the map. Tooltips, styled with Tippy.js, display additional details like country, GDP, and population for each location.

Nov 29, 2021
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a small multiples chart using D3.js merge() to create a grid of line-area charts. Each panel displays time-series data for a character (star, boo, toad) with a colored line and semi-transparent area. The code uses d3.create, d3.scaleBand, d3.scaleLinear, d3.line, d3.area, and d3.set. Data groups are entered, merged, and positioned with panels per row, while images and titles label each chart.

Nov 28, 2021
Loading thumbnail…

Fork of Fork of Customizing Axes

This bar chart displays suicide counts by country, sourced from a United Nations dataset covering multiple years and demographics. The visualization highlights the top 10 most populous countries, with horizontal bars representing suicides_no values. Built with D3 v5, the code uses `scaleLinear` and `scaleBand` for positioning, `axisBottom` and `axisLeft` for customized axes, and `format('.2s')` for tick labels. SVG rendering applies custom styling to ticks, grid lines, and labels, with axis customization removing default domain lines.

Nov 25, 2021
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.

Nov 25, 2021
Loading thumbnail…

Iterate my work : suicide prevention visualization (tooltip with foreignobject)

This visualization displays total suicide numbers by country using an interactive horizontal bar chart built with D3 v5 in SVG. Users click bars to select them, turning them green, and see a tooltip showing the exact suicide count for that country; clicking a second country turns the first bar dark red and reveals a sum counter box. The tooltip uses a `foreignObject` with an embedded HTML div, and mouseover/mouseout behaviors follow a tutorial pattern. Data comes from a cleaned Kaggle dataset of WHO suicide rates from 1985 to 2016, with GDP and population values.

Nov 24, 2021
Loading thumbnail…

Fork of Fork of NASCAR Statistics Dashboard

This dashboard presents a global suicide statistics visualization, combining a world bubble map, a date histogram, a stacked bar chart, a scatter plot, and a color legend. The map plots suicide counts per country using `d3.geoNaturalEarth1` and `d3.geoPath`, with bubble sizes scaled by `d3.scaleSqrt`. The date histogram uses `d3.bin` and `d3.brushX` to aggregate and filter data over time. Tooltips via `Tippy.js` reveal country-specific metrics. The visualization is built with React, D3 v6, and SVG rendering.

Nov 24, 2021
Loading thumbnail…

Fork of Suicide Rates 11/17/2021

This dashboard visualizes global suicide rates with a natural Earth projection map where circles represent suicide counts per country, colored by a categorical scale. A linked time-series histogram below the map allows brushing to filter the map by year range. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the map, d3.scaleSqrt for circle sizing, and d3.brushX for interactive filtering. Tooltips via Tippy.js display country, GDP, suicide count, and population. Data comes from a CSV of suicide rates merged with world city coordinates.

Nov 23, 2021
Loading thumbnail…

Suicide Rates 11/17/2021

This interactive visualization maps global suicide rates using a bubble map, where circle size encodes the number of suicides per country and color distinguishes categories. A linked time-series histogram below allows brushing to filter the map by year. The project uses React, D3 v5 (including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, and `brushX`), and Tippy.js tooltips. Data comes from a CSV of suicide rates merged with city coordinates, rendered as SVG over a world atlas TopoJSON.

Nov 17, 2021
Loading thumbnail…

tooltips

This heatmap visualizes male and female suicide rates across eight countries using a subset of the Suicide Rates Overview 1985 to 2016 dataset. Each cell is colored with a sequential d3.interpolateInferno scale, and hovering triggers three distinct functions—mouseover, mousemove, and mouseleave—that reveal the exact suicide count in a styled tooltip. The visualization is built with D3 v4, rendering SVG rectangles with axis scales created by d3.scaleBand.

Nov 7, 2021
Loading thumbnail…

Untitled

A radial stacked bar chart displays the population distribution of U.S. states across seven age groups, using a circular layout with state labels around the perimeter and a legend on the left. The visualization is rendered as SVG with D3 v4, employing `d3.scaleBand` for angular positioning, a custom `d3-scale-radial.js` for radial distances, `d3.stack` for segmenting data, and `d3.arc` to draw the bars. Data comes from a CSV file with state-level age bracketed counts.

Nov 6, 2021
Loading thumbnail…

Chiasm Crossfilter Integration

This interactive visualization links a bubble map of migrant deaths and disappearances with a time-series bar chart of monthly totals. Brush selection on the bar chart filters events on the map using crossfilter, while map panning updates the chart’s filtered range. Built with Chiasm components, D3 v3, Leaflet, and crossfilter, it renders SVG bars, canvas tiles, and circle markers over map data loaded from CSV/JSON files. Movement is throttled and animated with transitions.

Oct 13, 2021
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.

Oct 7, 2021
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`.

Oct 7, 2021
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.

Sep 29, 2021
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.

Sep 27, 2021
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.

Sep 27, 2021
Loading thumbnail…

Prevalence of depression by age in D3 Scatter Plot

This scatter plot visualizes the prevalence of depression among people aged 20–24 for a subset of countries, with each year on the x-axis and the percentage of affected individuals on the y-axis. Ten countries are distinguished by unique colors, such as Afghanistan in red and Albania in black. The visualization uses D3 v6 with SVG rendering, employing scales like `scaleLinear` for axes and circle marks to represent data points. Data is loaded from a CSV file on GitHub Gist using `d3.csv`, with axis labels and a title added programmatically.

Sep 27, 2021
Loading thumbnail…

Suicide rates vs prevalence of depressive disorder rates

This example displays a text-based summary of a dataset comparing suicide rates and depressive disorder prevalence across countries. The visualization loads a CSV file from a GitHub repository and outputs the file size in kilobytes, the total number of data rows, and the number of columns using D3 v5’s `d3.csv` and `d3.csvFormat` methods. The rendered result is a simple preformatted text block, highlighting the dataset’s structure rather than a graphical chart. The original data originates from Our World in Data.

Sep 10, 2021
Loading thumbnail…

Prevalence of depression by age

This example displays a short text summary of the prevalence of depression by age dataset. It reports the approximate file size in kilobytes, the total row count, and the number of columns after loading the remote CSV. The visualization loads the data from a gist using D3’s `d3.csv` method and formats the output with `d3.csvFormat`. The result is presented as plain text in a large `<pre>` element, demonstrating a minimal data-loading and validation workflow rather than a graphical chart.

Sep 10, 2021
Loading thumbnail…

Number with depression by country

This example displays a data summary of the number of people with depression by country. It shows the file size in kilobytes, the total number of rows, and the number of columns in the dataset. The visualization is implemented using D3 version 5 and relies on the `d3.csv` function to fetch and parse the data from a CSV file hosted on GitHub. The code then calculates the metrics and displays them as plain text within an HTML `<pre>` element.

Sep 10, 2021
Loading thumbnail…

Mallak Alkhathlan assignment 1

This chart displays student emotional data using two sets of horizontal bar charts. The first set uses CSS-styled rectangles with emoji labels, while the second set applies SVG `<linearGradient>` definitions and `stop` elements to color the bars. The visualization uses inline SVG, CSS transitions and hover states, and includes stroked paths for additional data representation.

Aug 29, 2021
Loading thumbnail…

Mallak Alkhathlan assignment 1

The graphic displays a survey of student emotional responses as a horizontal bar chart, with two distinct visual encodings. The first set of bars uses plain orange rectangles with emoji labels (e.g., 😤, 😂) to show counts, while the second set employs SVG linear gradients, transitioning through colors like Tomato, SlateBlue, and Orange, with rounded corners. The SVG uses CSS classes for hover interactions, changing bar fills to SlateBlue and text to Tomato. The chart, defined in an inline SVG within `index.html` and styled by `styles.css`, relies on native SVG elements (`rect`, `linearGradient`, `text`) and CSS transitions—no external JavaScript libraries.

Aug 29, 2021