Amanda Kiannejad

@alkiannejad·2 public vizzes

Detector

This interactive chart, titled “Detector,” visualizes readings from two detectors over time using a dynamic bar chart. Users can switch between the two datasets by clicking buttons, which triggers a smooth animated transition of the bars. Built with React and D3 v4, the visualization employs `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, updating `line` elements via `transition()`. Data is loaded asynchronously from a CSV file using `d3.csv`, and the display shows the dataset’s row count, column count, and size in kilobytes. The visualization is rendered as an SVG with animated axis and bar updates.

Mar 22, 2021

Loading thumbnail…

SignalFox Detector Data

This interactive bar chart displays signal detector readings across multiple categories, with buttons allowing users to toggle between two data variables. The visualization updates smoothly using D3 v4 transitions, animating both the vertical lines and circular markers as the y-axis rescales to accommodate new values. The code loads data from an external CSV file and dynamically binds it to SVG elements, demonstrating a reactive update pattern where existing elements transition to new positions rather than being redrawn. The chart is embedded within an HTML page that uses React-compatible JavaScript styling, though the core rendering relies on D3's scale functions and SVG primitives.

Mar 9, 2021