TJPepping

@TJPepping·4 public vizzes

d3.js learning

A stacked column chart displays four annual cost categories—Energy, Business Air Travel, Employee Commuting, and Other—from 2012 to 2016. The d3.v3 stack layout computes layer offsets, while ordinal and linear scales map years and cumulative values to SVG rects. Axes, a legend, and a hidden SVG tooltip group appear on mouseover, with tooltip text updated via d3.mouse coordinates.

Apr 3, 2018

Loading thumbnail…

Grouped Bar Chart with Crossfilter

This grouped bar chart displays population counts by age metric (Under 5 Years, 5 to 13 Years, 14 to 17 Years) across years 2011–2016, using a CSV dataset. The visualization is built with D3 version 3.5.5 and crossfilter 1.3.12. It uses d3.csv for parsing, d3.scale.ordinal for x-position and color encoding, d3.scale.linear for y-position, d3.svg.axis for axes, and d3.nest to group data for rendering as grouped SVG bars. A legend identifies each age metric by color.

Mar 12, 2018

Loading thumbnail…

D3JS Interactive Bar Chart Part 3 (Data Drill Down)

This interactive D3.js bar chart demonstrates data drill-down, allowing users to explore hierarchical data by clicking or hovering on bars to reveal more detailed subcategories. The visualization uses D3 v2’s `d3.scale.ordinal()` for x-axis positioning and `d3.svg.axis()` for rendered axes, with SVG rectangles representing aggregated totals. The code includes jQuery for DOM manipulation and supports both level-0 (top-level) and level-1 (drilled-down) views, mapping caption labels to tick marks. The chart updates dynamically with mouseenter/leave events that alter bar dimensions and styling. Rendering relies on SVG elements, with margins and computed width/height determining the plot area.

Aug 16, 2017

Loading thumbnail…

Multi-line graph 4: Toggle

This multi-line graph displays monthly stock price data for Microsoft, Amazon, and IBM from January 2000 to March 2010. It demonstrates an interactive toggle feature where clicking a company name in the legend fades its corresponding line in or out using a 100-millisecond opacity transition. The visualization is built with D3 version 3, using `d3.svg.line` for path generation, `d3.svg.axis` for axes, and `d3.nest` to group data by symbol from the provided stocks.csv file.

Jul 8, 2014