C

Chen Ding

@chen-ding-71·23 public vizzes

Loading thumbnail…

Worldwide Suicide Map Multi-views

This interactive visualization combines a world bubble map and a horizontal bar chart to explore global suicide rates from 1979 to 2016. Users select a year and country via dropdown menus, which highlights the chosen country on the map while the bar chart updates to show the top 15 countries with the highest suicide numbers for that year. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for geographic projections, with circles sized via `d3.scaleSqrt`. The bar chart is rendered with React and `d3.scaleBand`, both featuring tooltips for detailed data. The visualization sources suicide data from a CSV and country boundaries from the World Atlas TopoJSON.

Loading thumbnail…

US Suicide from 1979 to 2015

This animated stacked bar chart visualizes US suicide rates from 1979 to 2015, broken down by gender. The visualization uses D3.js (version 3.5.5) to render the bars in SVG, with a legend that highlights each gender category when hovered, and tooltips provided by d3-tip. The data comes from the Suicide_in_USA_by_Sex.csv file. The chart encodes year on the y-axis and suicide count on the x-axis, with the two gender layers stacked to show the proportional contribution of each.

Loading thumbnail…

Worldwide Suicide Map with Two Menu and Tooltips

An interactive world map visualizes suicide counts by country, highlighting the selected nation in red while others appear orange. Two dropdown menus allow users to filter by year or highlight a specific country, with tooltips revealing exact values. Built with React and D3 v5, it uses d3.geoNaturalEarth1 and geoPath for map rendering, plus a sqrt scale for circle sizing. Data comes from WHO suicide statistics, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Multiple Views with Brushing

A world map displays cities with missing migrant fatalities, sized by death toll, alongside a brushing-enabled time histogram of monthly casualties. Dragging the histogram’s brush filters the map’s circles to the selected date range. The visualization uses React, D3 v5 (d3.geoNaturalEarth1, d3.geoPath, d3.brushX, d3.bin), and TopoJSON world-atlas data, with SVG rendering.

Loading thumbnail…

Worldwide Suicide Map with BarChart

This interactive visualization combines a world map with a bar chart to explore global suicide statistics from 1979 to 2016. A natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath displays circles sized by the square root scale of total deaths and missing persons per country. The map is paired with a histogram showing the top 15 countries by year, with user interaction filtering the map by selected date. The data is loaded via d3.csv from a GitHub Gist, while geographic boundaries come from the world-atlas TopoJSON dataset.

Loading thumbnail…

Worldwide Suicide Map with Two Menu and Tooltips

This interactive world map visualizes global suicide rates from 1979 to 2016 using data from the World Health Organization. Two dropdown menus allow users to select a specific year and highlight a particular country, with circles sized by suicide count via d3.scaleSqrt and colored distinctly for the highlighted nation. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the map projection and rendering, while React manages the interface state and d3-tip provides tooltips displaying country, year, and suicide number on hover.

Loading thumbnail…

Suicide Number By Country with Year Menu

This interactive bar chart displays the top 15 countries by suicide number for a selected year, with a dropdown menu offering choices from 1979 to 2015 or the most recent available data. The visualization uses React to manage the year selection state, D3 v5’s `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles with tooltips showing exact values. Data comes from a CSV file of suicide rates by country, loaded via `d3.csv` and sorted in descending order before display. Users can compare rankings across years to observe trends in national suicide statistics.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width with points colored by species. Hovering over the color legend highlights points of the selected species while fading the opacity of others, using React state to manage the hovered value. The visualization is built with React and d3.v5, employing `scaleLinear` for axes, `scaleOrdinal` for colors, and an SVG-based color legend with `onMouseEnter` and `onMouseOut` handlers.

Loading thumbnail…

Laugh Cry Emoji

A laughing-crying emoji face rendered as an SVG using React and D3 v5. The code builds the face from circles, lines, ellipses, and arcs, with the mouth and tongue created via D3’s `arc` generator. Tears are positioned using rotated ellipses, while eyebrow strokes and a white eye overlay add expression. The chart is hardcoded, not data-driven, and rendered through ReactDOM.

Loading thumbnail…

Worldwide Suicide Map with Menu

This interactive world map visualizes suicide rates by country using World Health Organization data from 1979 to 2016. A dropdown menu lets users select a specific year or view the most recent available numbers, with each country represented as an SVG circle sized by its suicide count. The visualization uses React for state management and UI controls, while d3.geoNaturalEarth1 and d3.geoPath render the geographic features from World Atlas TopoJSON data. Country positions are plotted using latitude and longitude coordinates, with d3.scaleSqrt scaling circle radii proportionally to the displayed values.

Loading thumbnail…

Worldwide Suicide Map

This interactive world map visualizes suicide rates from the World Health Organization, with translucent red circles scaled by the most recent suicide number per country using a square-root scale. Users can select a specific year from 1979 to 2015 or view the latest data via a dropdown menu. The visualization uses React for state management and D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the map. Country boundaries come from World Atlas TopoJSON, while suicide data and coordinates are loaded from CSV sources using `d3.csv`.

Loading thumbnail…

Stylized Bar Chart

This bar chart displays suicide statistics across demographic generations, with a horizontal bar for each generation (from Boomers to Generation Z) sized by suicide count. The visualization uses React with D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering bars as SVG `<rect>` elements with native tooltips. Data comes from a CSV file loaded via `d3.csv`, formatted with `d3.format` for tick labels. A Poppins font and orange styling give the chart a clean, modern look.

Loading thumbnail…

Ramen Ratings Across 11 Countries

This visualization displays average ramen ratings across 11 countries, categorized by style, with square size representing the review count. It uses vega-lite-api to encode star averages on the x-axis, style on the y-axis, and country as both color and size. The data comes from a CSV file processed with d3.csv. The chart uses a square mark with opacity, a custom color palette, and tooltips showing country names via the vega-tooltip handler.

Loading thumbnail…

Suicide Trend over Years and Gender in United States

This stacked bar chart visualizes suicide trends across years and gender in the United States, with each bar segmented by sex. Hovering over a bar reveals a tooltip with the exact value, while hovering over the legend highlights the corresponding gender’s segments. Built with D3.js, the visualization uses `d3.layout.stack` for stacking, `d3.scale.ordinal` for axes, and `d3-tip` for interactive tooltips. Data comes from the Suicide_in_USA_by_Sex.csv file, and the SVG rendering includes a semi-transparent overlay to dim non-highlighted bars.

Loading thumbnail…

Suicide vs Age Statistics in 30 years

This stacked bar chart visualizes global suicide rates over 30 years, grouped by age, using aggregated counts per year. The visualization encodes age categories as colors and uses the y-axis for time, with bar size reflecting the number of cases. It is built with the vega-lite-api, which wraps Vega-Lite and Vega, and loads CSV data via d3.csv. The chart features a custom color scale and tooltips to show aggregated counts for each age group.

Loading thumbnail…

Polished World Map

This example displays a world map with country boundaries, rendered as an SVG using a Natural Earth projection. It includes graticules, a sphere outline, and landmasses with interior borders, all styled with a teal color palette. The visualization loads geographic data from the World Atlas TopoJSON via d3.json and converts it using topojson.feature and topojson.mesh. The map is drawn with d3.geoPath, while the React component structure manages the data fetching and SVG elements.

Loading thumbnail…

Bar Charts for Suicide versus Generation

This visualization uses a horizontal bar chart to compare suicide counts across demographic generations, revealing that Generation X has the highest number. The React app loads CSV data and renders an SVG using D3 v5’s `scaleBand` for the y-axis generations and `scaleLinear` for the x-axis counts. Bars are filled gray with white strokes and a dark blue title. The x-axis includes tick marks and labels generated from the linear scale, while the data source is a GitHub-hosted Suicide_Generation.csv file.

Loading thumbnail…

Bar Charts for Suicide versus Generation

This visualization uses a horizontal bar chart to compare suicide counts across demographic generations, revealing that Generation X has the highest number. The React app loads CSV data and renders an SVG using D3 v5’s `scaleBand` for the y-axis generations and `scaleLinear` for the x-axis counts. Bars are filled gray with white strokes and a dark blue title. The x-axis includes tick marks and labels generated from the linear scale, while the data source is a GitHub-hosted Suicide_Generation.csv file.

Loading thumbnail…

Suicide Rates Data from Kaggle

This example demonstrates a minimal text-based summary of the Suicide Rates Overview dataset from Kaggle. It displays the file size in kilobytes, row count, and column count using a large HTML `<pre>` element. The code loads CSV data via `d3.csv` from a GitHub Gist URL and formats the metrics with `Math.round` and string concatenation. It uses D3 v5.11.0 and includes commented-out alternatives using `fetch`, `async/await`, and `d3.csvParse`.

Loading thumbnail…

Academic Publication Influence on University Ranking

This scatter plot shows the relationship between academic publication output and university world ranking, with bubble size representing alumni employment and color indicating country. The visualization uses vega-lite-api to encode publication count on the x-axis and world rank on the y-axis, applying a logarithmic-scale-like bubble range from 5 to 200. Data comes from a CSV of World University Rankings fetched via d3.csv. The chart is rendered with Vega-Lite, configured with custom axis styles, and includes tooltips showing institution names.

Loading thumbnail…

Ramen Raintgs version 0.0

This visualization plots average ramen ratings by noodle style, with each circle representing a country and its size scaled by the number of samples. The chart uses Vega-Lite through the vega-lite-api wrapper, fetching data from a CSV file with d3.csv. Circle opacity is fixed while the x-axis aggregates the `Stars` field, and tooltips display individual star ratings. The appearance is customized via a config object that adjusts axis labels and titles.

Loading thumbnail…

World University Ranking

This example loads and parses a CSV dataset of the 2015 CWUR World University Ranking, displaying basic file statistics such as size, row count, and column count in a large HTML `<pre>` element. It shows the dataset’s shape and attributes, including institution, country, and multiple quantitative ranking factors. The code uses D3 v5’s `d3.csv` and `d3.csvFormat` to fetch and measure the data from a GitHub gist. It also demonstrates an alternative async/await approach with the Fetch API and `d3.csvParse`.

Loading thumbnail…

Ramen Ratings Data from Kaggle

This visualization displays basic summary statistics for a Ramen Ratings dataset from Kaggle. It shows the file size in kilobytes, the total number of data rows, and the number of columns, rendered as large text on a blank page. The example loads the CSV from a GitHub gist using D3’s `d3.csv` function, which parses the remote data and then formats it with `d3.csvFormat` to compute the byte size. All three stats are concatenated into a single string and placed into an HTML `<pre>` element. The code also includes commented-out alternatives using `fetch` and `d3.csvParse`.