Apollox01

@Apollox01·5 public vizzes

Worldwide Suicide Map Multi-views

A multi-view visualization combines a world bubble map and a horizontal bar chart to explore WHO suicide data from 1979–2016. Dropdowns filter by year and highlight a selected country on the map, while the bar chart ranks the top 15 countries by suicide count for the chosen year. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for the landmasses, with `d3.scaleSqrt` sizing circles by suicide count; the bar chart uses `d3.scaleBand` and `d3.scaleLinear`. Tooltips display exact values, and both views update dynamically via React state.

Mar 20, 2020

Loading thumbnail…

Gun Deaths in Florida

This visualization tracks the number of firearm-related murders in Florida from 1971 to 2018, highlighting the rise in gun deaths following the enactment of the state’s "Stand Your Ground" law in 2005. A line chart with circular markers plots annual totals, using D3.js (v5) to render SVG elements and scales via `d3.scaleLinear`. The code includes a CSV data parser for loading the dataset, filtered to years between 1989 and 2017 in the template, and draws axes with `d3.axisBottom` and `d3.axisLeft`. The data originates from the Florida Department of Law Enforcement.

Feb 24, 2020

Loading thumbnail…

Multi-line chart

A multi-line chart displays weekly temperature trends for multiple cities, with each city rendered as a distinct colored line sorted by its final temperature value. The visualization uses React for component structure and D3 v5 for data binding, scales, and axes, with SVG paths generated by the `line` generator using `curveBasis`. A legend is added via a custom `colourLegend` component, and city colors come from `schemeCategory10`. Data is loaded from a CSV file, with axes featuring gridlines and a title indicating the time period.

Feb 18, 2020

Loading thumbnail…

Line Chart

This example visualizes air traffic passenger statistics for San Francisco Airport from 2005 to 2019, showing trends for multiple airlines such as Alaska and American. Multi-line charts display passenger counts over time for each carrier, with lines distinguished by color. The visualization is rendered as SVG with animation using D3.js v4, leveraging D3 scales and axes to map dates and passenger numbers. The data is embedded directly in the page's JavaScript, and the interface is styled with the Bulma CSS framework.

Feb 14, 2020

Loading thumbnail…

Line Chart

This line chart visualizes air traffic passenger statistics for San Francisco Airport from 2005 to 2019, comparing annual passenger numbers for multiple airlines. The chart displays each airline as a separate colored line, with year on the x-axis and passenger counts on the y-axis. It uses React and D3 v4 to render an SVG-based chart with animated transitions between states. The data is embedded directly in the page, and the visualization uses D3’s scale functions and axis components to map the temporal and numerical dimensions.

Feb 14, 2020