villagef

@villagef·4 public vizzes

Gantt-Chart in D3.js V3 advanced

This Gantt chart visualizes the timed journey of a token ("RC10") through a hospital process, showing categories like waiting, doctor visits, laboratory tests, and pharmacy pickups along a timeline. The chart uses D3.js v3 with an SVG rendering approach, employing `d3.time.scale()` for the time axis and `d3.svg.axis()` for the grid. Bars are color-coded using a linear scale with HCL interpolation. Interactive tooltips display task details when hovering over each bar.

Nov 23, 2020

Loading thumbnail…

Barchart

This interactive bar chart demonstrates the difference between grouped and stacked layouts. Users can toggle between the two views using custom radio buttons. The visualization uses randomly generated test data with smooth bumps, displayed as an SVG with animated transitions. Built with D3 v6, the code employs `d3.stack()` for data preparation, `d3.scaleBand()` and `d3.scaleLinear()` for scales, and CSS-styled tooltips for mouseover interactions.

Nov 15, 2020

Loading thumbnail…

D3

The visualization is a heat map showing monthly trip counts for Dubai Metro stations, displaying the top ten stations by total trips across the available months. Station names appear on the x-axis while month-year combinations form the y-axis, with color intensity representing trip volume. Built with D3 v5, the code aggregates trip data from a CSV file, then renders colored SVG rectangles that scale from white to green. Interactive tooltips appear on hover, showing the exact trip count for each station-month pair.

Nov 14, 2020

Loading thumbnail…

D3-timeline in D3.js V3 ref from (jiahuang)

This example visualizes a timeline with stacked horizontal bars representing different stages of a process, such as waiting, vital checks, and doctor visits, with each segment color-coded and labeled by duration. The D3.js V3 timeline plugin renders the data as SVG rectangles on a time axis with 15-minute tick intervals and supports interactive navigation through chevron controls. The visualization uses `d3.time.format` for tick labeling and accepts data in a structured format with starting and ending times, demonstrating how to build a customizable, event-based timeline with D3.

Nov 14, 2020