myLbs

100%

✓ Published0🌍 Public

Last edited Jun 20, 2017

Created on Jun 20, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

myLbs

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.

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

78% 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

76% 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

76% 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

73% 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

73% match

Loading thumbnail…

Line Plot Sample

This line plot visualizes the quadratic relationship between item weight and item rate using 15 data points from a CSV file. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes with grid lines, while a `line` generator draws the maroon curve and circles mark each data point. The SVG rendering includes styled labels and a title, with margins and tick formatting applied via `format`. Data is loaded asynchronously with `csv` and parsed to numbers before rendering.

BBaraneedharan N M

71% 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

71% match