Alex Ley

@Alex-ley·4 public vizzes

coronavirus countries Map

A world map visualization shows the geographic distribution of COVID-19 cases, allowing users to toggle between confirmed cases, deaths, and recoveries via a dropdown menu. Country boundaries are rendered with d3.geoPath, while proportional circles sized with d3.scaleSqrt mark outbreak severity at each nation’s centroid. Data from a CSV file is joined to TopoJSON country geometries using a country code key. The map supports zooming and panning via d3.zoom, and includes custom color and size legend components built with D3’s selection and scale APIs.

May 27, 2020

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This stacked bar chart visualizes general project funding items across academic departments, categorized by institution type (schools, research institutes, and others). The visualization uses D3.js with a nested data structure and the `d3.layout.stack` API to create layered bars, showing funding distribution by department and category. Hovering over the color legend highlights specific institution categories, while a tooltip using `d3-tip` displays detailed values. The chart includes animated transitions and a custom legend via `d3-legend`, with the underlying data sourced from CSV files.

May 5, 2020

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This stacked bar chart visualizes the sales distribution of office supply subcategories across three market segments (Consumer, Corporate, Home Office). The D3.js visualization uses `d3.layout.stack()` to layer bars by subcategory within each segment, with hover interactions powered by `d3-tip` for tooltips. A color legend highlights individual subcategories on hover, while the axis formatting uses custom SI tick labels. The animated rendering and data aggregation from the CSV files demonstrate hierarchical grouping and stacked layout techniques in D3.

May 5, 2020

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This visualization shows 2018 general project funding items across scientific departments, broken down by institution type (schools, research institutes, and others). A stacked bar chart presents the data, with hover interactions on the legend highlighting specific categories and tooltips revealing exact item counts per department. The code uses D3.js v3, including `d3.layout.stack()` for stacking, `d3.svg.axis()` for scales, and `d3.legend.color()` for the interactive legend. Transitions and a semi-transparent overlay fade non-hovered bars. SVG renders all elements, with animation triggered by legend hover states.

Apr 29, 2020