Skip to main content
100%

Gist f2149f70c2636785a1e28490aa303617

✓ Published0🌍 Public
Aakeshavan
Last edited Apr 24, 2017
Created on Apr 24, 2017

This example visualizes step counts for two subjects across seven hourly time points on a single day, using a small multiples-style line chart. It renders the data from a CSV file with d3.line and d3.scaleTime, mapping hours on the x-axis and step counts on the y-axis, while grouping by subject via d3.group. The chart uses d3.axisBottom and d3.axisLeft for tick marks, with a distinct color for each subject’s line and a legend to identify them. The visualization relies on d3.csv to parse the fake_data.csv source.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist a47a4a5c5f7039022881d0b2dc84a1d6

The visualization tracks a month of daily running activity, plotting each day’s distance, time, and heart rate as a dual-axis scatterplot with a connected line. It shows how distance and time peak on high-mileage days while resting heart rate dips, with zero-distance rest days marked as gaps. Built using d3.scaleLinear for axes, d3.line for the path, and d3.axisBottom/axisLeft for gridlines, the chart reads from the CSV data via d3.csv. Points are rendered with d3.point circles, and the y-axis encodes time, while the x-axis uses a time scale for dates.

FFrank515
75% match
Loading thumbnail…

Gist 568d5eb25a35dbbb8d9e9e87521b4221

This example visualizes a two-week running schedule from a small CSV dataset, showing daily mileage with a pattern of rest days every fourth day. It uses a line chart rendered with D3.js, where the x-axis maps sequential day numbers and the y-axis encodes miles, with data points joined by a path generated through d3.line. The visualization highlights the alternating effort and recovery rhythm, with zero-mile rest days clearly visible as dips to the baseline. The code loads the data via d3.csv and applies a linear scale for both axes, while a smooth curve interpolation (d3.curveLinear) connects the points to emphasize the cyclical nature of the training plan.

FFrank515
74% match
Loading thumbnail…

Gist 23c3fa2ac8adc645fc6c6d7a2d761a88

The visualization tracks daily exercise duration across May 2017, showing a repeating pattern where every fourth day records zero minutes. It uses a line chart built with D3.js, plotting dates on the x-axis and minutes on the y-axis via `d3.scaleTime` and `d3.scaleLinear`. The code reads the CSV data from the gist and draws circles and connecting lines, with resting days highlighted by points at zero. The chart emphasizes the regularity of rest intervals amid fluctuating workout times, sourced directly from the uploaded CSV file.

FFrank515
73% match
Loading thumbnail…

Gist ab5ccee1fb22209a4bcd0bd65dd71ca1

The visualization tracks a 31-day running plan by comparing planned distances with actual run times. It shows how each day’s planned mileage relates to the time spent running, with zero-mile rest days clearly marked. The code uses `d3.scaleLinear` for axes, `d3.line` for the distance and time paths, and `d3.axisBottom` for the day labels. Data comes from two CSV-like sources embedded in the gist, and the chart renders as an SVG with a smooth line for distance and a separate line for time, making the daily variation and rest-day pattern immediately visible.

FFrank515
73% match
Loading thumbnail…

Gist 1f1da38f38f58e6eff32b167edbf487f

The visualization displays a 31-day running log as a line chart, with daily distances on the y-axis and days on the x-axis. It highlights a pattern of alternating active and rest days, with distances peaking at 8 miles on day 30. The chart is rendered using D3.js, likely with `d3.scaleLinear` for axes and `d3.line` for the path. Data is loaded from a CSV file via `d3.csv`, and the line’s smooth curve suggests a `d3.curve` interpolator. The visualization emphasizes the cyclic structure of the training schedule rather than individual data points.

FFrank515
73% match
Loading thumbnail…

Multi Line Plot

This multi-line chart visualizes daily fitness trends—steps, calories burned, and average heart rate—over a 150-day period. The data is loaded from a CSV via `d3.csv` and rendered as three overlaid lines, each scaled to a common y-axis using fixed multipliers. The visualization uses D3 v7's `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators, with an SVG grid and legend, to compare the metrics' daily evolution.

Ssivaniammisetti2002@gmail.com
72% match
Loading thumbnail…

Gist b26af969008f2443c96d3f0f8d66cb14

This example shows a simple line chart plotting the three values from `stuff.csv` (1, 2, 3) as a continuous series. The visualization uses D3.js to load the CSV and bind the data to SVG circles and a path, with scales mapping the x- and y-positions. A hover interaction highlights the nearest data point by enlarging the circle, while the line itself is drawn using `d3.line`. The chart includes axis ticks and labels generated with `d3.axisBottom` and `d3.axisLeft`, providing a minimal but clear view of the data’s upward trend.

MMbrownshoes
72% match
Loading thumbnail…

Gist 4cd8f6cf6b2c29372f82424c1363d08a

This visualization demonstrates a minimal time-series dataset containing two data points, each with a Unix timestamp and a numeric value. It uses D3.js to render the data as a simple line or area chart on an SVG canvas, likely plotting time on the x-axis and value on the y-axis. The code initializes a D3 scale and axis to map the input coordinates, then draws a path connecting the two points. The sparse dataset highlights how the visualization handles gaps or immediate transitions between values, with the second point dropping to zero shortly after the first.

VVioletVivirand
72% match