myLbs

100%

✓ Published0🌍 Public

Last edited Jun 20, 2017

Created on Jun 20, 2017

myLbs is a time-series line chart that tracks a person's weight in pounds across several years, with a single early outlier in 2012 and denser, more frequent measurements from 2015 onward. The visualization uses D3 v4 with SVG rendering and animation, pairing a smooth curved line with individual red data points that reveal exact dates and weights via an interactive tooltip on hover. The chart also incorporates a zoom behavior enabled through `d3.zoom`, which rescales the x-axis, and uses gridlines with dashed strokes for readability. Data comes from an external TSV file, and the visualization includes an area fill beneath the line.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

myLbs

A line chart tracks body weight in pounds over time, with each point representing a single measurement and a smooth curve connecting the sequence. The visualization uses a time-scaled x-axis and a linear y-axis, with the y-domain fixed to start at 200 pounds to emphasize fluctuations. Built with D3 v4, the example loads tab-separated data from `myLbs.tsv`, parses dates, and renders the path using `d3.line` with a basis curve. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, while SVG elements handle all drawing.

335degrees

94% match

Loading thumbnail…

aborted lbs (tried to zoom)

This visualization tracks body weight over time with a line chart, showing a clear downward trend from 2012 to 2017. The chart uses a time-scaled x-axis and a linear y-axis for pounds, with dashed gridlines and a blue line connecting data points. The code relies on d3.v4, specifically using `d3.line` with `d3.curveMonotoneX` for the path, plus `d3.axisBottom` and `d3.axisLeft` for axes. Although a zoom handler is defined with `d3.zoom`, it is not properly wired to update the line, so the zoom feature remains inactive in the final rendering. Data is loaded from a TSV file with date and weight columns.

335degrees

77% match

Loading thumbnail…

Line Chart with Multiples Lines - By Year

The visualization displays personal body weight measurements over time, segmented into individual annual series that are overlaid on a single chart. Each year's data forms a separate multi-hued line, allowing year-over-year comparison of weight fluctuations. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, `nest()` to group entries by person and year, and `line()` with `curveBasis` to generate smooth paths. The data is parsed from a CSV and rendered as SVG, with a categorical color legend for each year.

RRubens

72% match

Loading thumbnail…

Line Chart with Multiples Lines

This line chart tracks personal body weight over time, plotting individual weight measurements taken from June 2008 onward. The chart uses multiple lines to represent different people, though only one person ("Rub") appears in the dataset. It uses D3.js with a time-scaled x-axis and linear y-axis, rendering smooth curves via `d3.curveBasis`. A color-coded legend, generated by a custom `colorLegend` function, identifies each person's line.

RRubens

71% match

Loading thumbnail…

Path Animation

This visualization charts personal body weight measurements over time, showing a single person’s weight fluctuations from 2008 to 2011 in kilograms. A slider input animates two small circles along the rendered weight paths, with each circle tracing a separate line. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smoothing, and d3.nest to group data by person. The slider controls circle positions via the SVG path’s `getPointAtLength` method, while a color legend and gridlines are added using d3.scaleOrdinal and axis components.

RRubens

69% match

Loading thumbnail…

Fork of Path Animation

This visualization displays personal body weight data over time for a single individual, with the y-axis representing weight in kilograms and the x-axis representing dates. Two smoothed line paths are rendered from the dataset, each colored differently to distinguish between weight series. A slider control animates two circles moving along these paths, using `path.getPointAtLength` to track progress from the beginning to the end of each line. The chart is built with D3 v5, using `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `curveBasis` to generate the SVG paths and axes.

Llhbhb21c

68% match

Loading thumbnail…

Untitled

This example shows a scatter plot of the relationship between weight and height for a small dataset of twelve individuals, with each point rendered as a steelblue circle. A linear regression line is not drawn, but axes are customized with tick formats that append units. The visualization uses D3 v6 to create an SVG, with linear scales mapping data to pixel coordinates, and d3.axisBottom and d3.axisLeft for the axes. Data is hardcoded in the script, and gridlines are styled via tick line selection.

LLa Máquina Oráculo

66% match

Loading thumbnail…

my p1

This visualization presents a dual-panel bar chart comparing BMI, height, and weight for individuals from a BMI dataset. The left panel displays BMI values as rounded teal bars, while the right panel shows paired orange and blue bars for height and weight, respectively, using a grouped layout. The chart uses React state to load and parse CSV data with D3’s `csv` function, converting string fields to numbers. Axes are rendered via `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`, with rotated labels and descriptive titles, all drawn as SVG elements within a React component.

Ssaideep1612@gmail.com

66% match