luavabo

@luavabo·4 public vizzes

Multiple Line plot with Dropdown

This interactive visualization displays monthly air quality levels for PM2.5 and PM10 particulates in London from 2010 to 2018, with each year represented by a colored line. A dropdown menu allows users to switch between different pollutant measurements, updating the y-axis and line chart accordingly. Built with D3 v5, the SVG rendering uses `scaleTime` and `scaleLinear` for axes, `nest` to group data by year, and `line` with `curveBasis` for smooth paths. Data comes from the Kings College London Air Quality Dataset via the London Datastore.

May 9, 2020

Loading thumbnail…

Demo

Two line charts display daily price data for assets A and B across separate tabbed panels. Each chart uses D3's time scale for dates, linear scale for values, and an SVG path generated with `d3.svg.line`. The data loads from tab-separated files, parsed with `d3.time.format` and accessed via `d3.tsv`. Bootstrap tabs toggle between charts, with each panel's script re-rendering its respective visualization.

May 9, 2020

Loading thumbnail…

Zoomable Volcano Plot with Tooltips in D3 v4

This zoomable volcano plot visualizes differential gene expression from a tab-separated data file, plotting log2 fold-change on the x-axis against -log10 q-values on the y-axis. Gene names appear in tooltips on hover, and points are colored by significance and fold-change thresholds. Built with D3 v4, it uses d3.scaleLinear and d3.scaleLog for axes, d3.zoom() for panning and zooming via brush, and a clip path to constrain rendering. A reset button restores the original view. Data comes from a .diff file parsed with d3.tsv.

May 9, 2020

Loading thumbnail…

Zoomable Volcano Plot with Tooltips in D3 v4

This D3 v4 zoomable volcano plot visualizes gene expression data from a TSV file, plotting log2 fold-change against -log10 false discovery rate. Users can pan and zoom by dragging within the SVG chart, with a reset button to restore the original view. The chart encodes significance with colored dots: red for significant fold changes, blue for down-regulated genes, and gray for others. Hovering over a dot reveals a tooltip displaying gene-specific information. The implementation uses `d3.scaleLinear` for the x-axis, `d3.scaleLog` for the y-axis, and a custom `d3.zoom` function to handle interactive navigation.

May 9, 2020