Ben Rambo-Martin

@nbx0·4 public vizzes

IRMA Spy

This visualization displays genomic coverage depth across chromosome positions, with each position plotted along the x-axis and corresponding coverage depth on the y-axis. The line chart shows sequencing coverage data from a CSV file hosted on GitHub, rendered as an SVG within a React application using D3 v5. The code utilizes D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to create the axes, grid lines, and the smoothed path. The visualization includes labeled axes, a title, and tick marks with custom styling.

Jul 15, 2020

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City. Each line represents a city, color-coded using `d3.scaleOrdinal` with `schemeCategory10`, and plotted over time with `d3.scaleTime` and `d3.scaleLinear`. The visualization uses `d3.line` with `curveBasis` for smooth curves, `d3.nest` to group data by city, and a custom `colorLegend` function rendered as SVG. Axes are created via `d3.axisBottom` and `d3.axisLeft`, with gridlines and a title, all styled through the SVG.

Jul 15, 2020

Loading thumbnail…

Stylized Line Chart

A stylized line chart displays temperature readings over time from the Data Canvas Sense Your City dataset. The visualization uses React components to render SVG elements, with D3 v5 handling data loading via `d3.csv`, scales via `scaleTime` and `scaleLinear`, and the curved path via `d3.line` with `curveNatural`. Axes are custom-built with ticks and labels, while the line stroke is styled teal with rounded joins and caps. The chart includes a loading state before the data appears.

Jul 9, 2020

Loading thumbnail…

Stylized Line Chart

A stylized line chart visualizes daily temperature fluctuations in San Francisco over one week, using a smooth curve to connect data points. The code builds the visualization with React and d3-scale functions for time and linear scales, while d3.line with a natural curve generates the path. Axes are custom-rendered as SVG groups with tick marks, and the chart loads its dataset from a CSV file via d3.csv. Styling uses the Poppins font and a teal color scheme for the line and marks.

Jul 9, 2020