Nasu the Dog's Muscle Gains

100%

Nasu the Dog's Muscle Gains

✓ Published0🌍 Public

Last edited May 29, 2021

Created on May 29, 2021

This visualization shows the weight gain of a dog named Nasu over time, with a single line tracking weight across age. The chart uses a minimalist dark-themed style with a tooltip that reveals the date of each data point. Built with vega-lite-api, the line mark encodes age on the x-axis and weight on the y-axis, with data loaded from a CSV via d3.csv. The visualization is rendered as an SVG using Vega and Vega-Lite, with custom axis and label styling from a config object.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API: NACRO Survey Data

This visualization displays the distribution of survey responses by age, with bars colored by gender, using a bar chart. It is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render the chart as SVG. The data is loaded asynchronously from a CSV file of NACRO member survey responses using d3.csv, and the chart dimensions adapt to the window size. A custom config object styles the axes and text with darker colors for readability.

CCurran Kelleher

59% match

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

59% match

Loading thumbnail…

Vega-Lite API Template

This example renders a scatter plot of daily weight measurements using the Vega-Lite API, with points sized uniformly and the y-axis scaled from zero for clearer trends. The visualization pulls data from a CSV file hosted as a Gist, originally sourced from the UCI Auto MPG dataset. Built with the vega-lite-api template, it uses d3.csv for data loading, Vega-Lite’s markCircle encoding for points, and Vega-Tooltip for interactive hover details. The display is configured via a custom config object that adjusts font sizes and axis styles, while the chart auto-fits to the window dimensions.

MMamveguh

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

59% match

Loading thumbnail…

area chart

This area chart visualizes the relationship between age and weight, with age on the x-axis and weight on the y-axis, using a steelblue filled path. The D3.js v7 code loads a CSV dataset from a remote GitHub gist, parses it with `d3.csvParse`, and sorts the data by age. It then applies `d3.scaleLinear` for both axes and an `d3.area` generator to create the smooth region, rendering the chart as an SVG with labeled axes and a title.

RRakesh Kumar Chekuri

59% match

Loading thumbnail…

Vega-Lite API: NACRO Survey Data

This chart visualizes NACRO membership distribution by age, with results from the NACRO Member Survey rendered as a bar chart of participant counts per age category. Built with the Vega-Lite API, it uses `markBar`, `x().fieldN('Age')`, and `y().count()` to encode the data, while D3’s `csv` function loads the remote survey dataset. The visualization is generated as SVG, with the display size fitted to the viewport and a custom configuration adjusting font sizes and axis styling for improved readability.

JJCarpenter-WPI

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

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

58% match