Skip to main content
Log in
S

sndcaldgafz

@sndcaldgafz·6 public vizzes

Loading thumbnail…

Visualization 1 (Stacked Bars)

This interactive stacked bar chart compares sales across market segments and product sub-categories, with each bar segmented by sub-category and colored by segment. The visualization uses D3.js version 3.5.5 with the SVG rendering and animation APIs, featuring hover tooltips via d3-tip and a color legend that filters foreground bars when hovered. Data is loaded from CSV files showing sales figures for Consumer, Corporate, and Home Office segments across seventeen sub-categories, displayed with formatted axis labels and a custom SI tick formatter using the `d3.format` API.

May 25, 2020
Loading thumbnail…

Total Disbursements Per Year by School

This interactive line chart visualizes total monthly food pantry disbursements per Columbia University school from May 2016 through April 2020, with each school selectable from a dropdown menu. Five colored lines represent yearly trends, animated with d3 transitions. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, a d3.nest for grouping by year, and custom modules for the dropdown menu and color legend.

May 25, 2020
Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical structure of world countries organized by continent and subregion using a tree layout. It displays all countries as text labels connected by curved links, with font size decreasing at deeper levels to indicate hierarchy. The implementation uses D3 v5 with `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to compute and draw the layout in SVG. Pan and zoom are enabled via `d3.zoom`, and the data comes from a local `data.json` file containing nested geographic groupings.

May 25, 2020
Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical structure of world countries organized by continent and subregion using a tree layout. It displays all countries as text labels connected by curved links, with font size decreasing at deeper levels to indicate hierarchy. The implementation uses D3 v5 with `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to compute and draw the layout in SVG. Pan and zoom are enabled via `d3.zoom`, and the data comes from a local `data.json` file containing nested geographic groupings.

May 25, 2020
Loading thumbnail…

Total Disbursements Per Year by School

This interactive line chart visualizes total monthly food pantry disbursements per Columbia University school from May 2016 through April 2020, with each school selectable from a dropdown menu. Five colored lines represent yearly trends, animated with d3 transitions. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, a d3.nest for grouping by year, and custom modules for the dropdown menu and color legend.

May 25, 2020
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the popularity of programming languages from a 2019 Stack Overflow survey, showing each language's percentage value above its corresponding bar. Built with D3.js v5, the SVG chart uses `d3.scaleLinear` for the y-axis, `d3.scaleBand` for categorical x-axis placement, and `d3.axisLeft`/`d3.axisBottom` to render axes with gridlines. Interactive mouseenter and mouseleave events trigger `transition` animations that highlight a bar and display divergence percentages for all other languages relative to the selected one.

May 25, 2020