ZhengYingqian

@ZhengYingqian·7 public vizzes

Timelines Chart

This example visualizes multiple time-series grouped into six distinct sections, where each line is broken into colored segments. The color scale works in either continuous heatmap mode or categorical mode, with randomly generated data populating up to fifteen lines per group. Users can zoom by dragging or use the bottom timeline brush. Built with the `timelines-chart` D3 component, the visualization loads random data from `random-data.js` and configures categorical coloring via the `zQualitative(true)` method.

Jun 24, 2018

Loading thumbnail…

Categorized Timeline Using Dates

This example uses the d3.layout.timeline plugin to render a categorized timeline of wars involving the United States during its first 100 years, based on data from Wikipedia. Each war is represented as a colored bar positioned along a date axis, with events grouped into five distinct swimlanes: Colonial, European, Internal, Latin America, and Native. The visualization encodes category membership through both lane placement and an ordinal color scale. War data is loaded from a CSV file, and the timeline layout automatically assigns each event to a lane, avoiding overlaps while respecting the fixed date extent from July 4, 1776, to December 31, 1876.

Jun 12, 2018

Loading thumbnail…

Timeline - Proof-of-concept

This proof-of-concept demonstrates a two-band interactive timeline built with D3 v3 and SVG. Events with start/end dates (intervals) or single dates (instants) are parsed from CSV data; the upper band displays items within a selected interval, while the lower navigation band shows their overall distribution. Users can brush on the lower band to select, drag, or resize a time range, click outside the brush to reset the view, and hover over items to see tooltips. The design, inspired by SIMILE Timeline and Bill Bunkat's swimlane chart, uses d3 scales and brushes to manage time intervals, with labels showing interval start, length, and end.

Jun 12, 2018

Loading thumbnail…

Past Presidents - ES5

This dashboard visualizes U.S. presidential history through a sortable data table and stacked single-line row charts. The main row chart displays party representation as proportionally sized segments, while a second timeline chart shows individual presidencies and includes a brush for selecting time ranges. Both charts update in response to filters: bars fade when outside the selected period or when their party is deselected via the checkbox list. Data is managed with crossfilter, rendered using D3.js and SVG, and includes a sortable table of presidents with details like party affiliation and years in office. Written in ES5 for broad browser compatibility.

Jun 12, 2018

Loading thumbnail…

Kankerscatter

Kankerscatter plots cancer prevalence (x-axis) against five-year survival rates (y-axis) for 18 cancer types, with each point representing a sex. Connecting lines link male and female rates for the same cancer type. Hovering reveals a tooltip with the exact prevalence and survival values. Two buttons toggle between a full view of all cancers and a zoomed view focusing on rare cancers (low prevalence), using animated transitions of the axes and points. The visualization uses an SVG scatterplot with axes, gridlines, and a clear legend, and is implemented with D3.js.

May 29, 2018

Loading thumbnail…

Zoom + Pan

This example demonstrates zooming and panning on a two-dimensional Cartesian plane using D3’s `d3.behavior.zoom` with linear `x` and `y` scales. Dragging the mouse pans the view, while the mouse wheel zooms, with the scale extent limited to 1–32×. The code renders an SVG with a light gray background, a bottom x-axis with full-height tick lines, and a left y-axis with five ticks; during zoom events, the `zoomed` handler updates the x-axis only. It builds on D3 v3 and uses SVG elements for all graphics. No data is loaded; the chart shows an empty coordinate system.

May 23, 2018

Loading thumbnail…

Zoom + Pan

This example demonstrates D3’s zoom and pan behavior applied to a simple coordinate system with axes. The visualization shows a blank gray plotting area where users can zoom up to 32× and pan freely by dragging, with the x-axis updating dynamically during the interaction. Built with D3 v3, it uses `d3.behavior.zoom` bound to linear `d3.scale` objects and renders axes via `d3.svg.axis` in SVG. The grid lines are drawn as axis ticks extending across the full chart height and width, with the y-axis intentionally omitted from updates during zooming.

May 23, 2018