Skip to main content
SimilarExport ZIP
100%

StepCounter Tracker

✓ Published0🌍 Public
OOckiya Beinmonyu Daniel
Last edited Dec 4, 2020
Created on Dec 3, 2020

This bar chart displays step counts recorded from an Apple device through the HealthKit API, spanning 2018 to 2020. The visualization maps daily step values along the x-axis and categorical year labels on the y-axis, with steel-blue bars sized proportionally to activity. The implementation uses d3.scaleLinear and d3.scaleBand for scaling, with d3.axisLeft and d3.axisBottom providing customized axes where domain lines and ticks are removed. Data is loaded via d3.csv and rendered as SVG rectangles within a pre-configured SVG canvas.

AI-generated description

This bar chart shows Steps taken by an individual over a period of time. The data comes from the year 2018, 2019 and 2020 estimate from an apple device excerpt AppleKits Iphone 8 using the HealthKit API. It also demonstrates customization of D3 axes & chart.

See also the bar chart visualization on: Sample Date Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Area chart_11703795

This area chart shows how daily step counts vary with age, using a semi-transparent blue filled region to emphasize the trend across the age range. The visualization loads data from a CSV file hosted on GitHub, converts the age and daily_steps fields to numbers, and sorts the records by age to ensure a continuous path. Built with d3.v7, it uses d3.area() to generate the SVG path, along with scaleLinear for the x and y axes, and d3.axisBottom and d3.axisLeft to render the labeled axes.

MMeghanaChowdaryVelaga@my.unt.edu
73% match
Loading thumbnail…

Bar Chart

This bar chart displays yearly counts from a CSV dataset, with steel-blue rectangles representing each year’s value. The visualization uses D3 v5 to load and parse the data, then applies `scaleLinear` for the horizontal axis and `scaleBand` for vertical positioning. SVG elements are appended directly to the chart, with axes omitted from the final rendering. The bars scale in width according to the year values while maintaining equal heights for each band.

EErik Rudhe
71% match
Loading thumbnail…

line chart_11703795

This line chart shows the relationship between age and daily steps, with age on the x-axis and daily step counts on the y-axis. The data is loaded from a GitHub gist via `d3.csv` and sorted by age to create a continuous steelblue line. The visualization uses `d3.scaleLinear` for both axes, a `d3.line` generator to produce the path, and `d3.axisBottom` and `d3.axisLeft` for the labeled axes, all rendered as SVG within a 600×400 pixel chart area.

MMeghanaChowdaryVelaga@my.unt.edu
70% match
Loading thumbnail…

Walking steps in October 2022

This area chart visualizes the daily step count from a Google Fit app for October 2022. The visualization highlights the variation in physical activity, with peaks above 14,000 steps and many low-activity days. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for the axes, and an `area` generator with `curveBasis` to create the smooth filled region. Data is loaded from a CSV file via `csv()`, and the SVG is rendered with axis ticks, labels, and a title.

KKinjal-Goyani
70% match
Loading thumbnail…

Apple Product Interactive

This interactive bar chart visualizes the growth of iPhone users from 2008 to 2020, with the y-axis showing millions of users and each bar labeled with its exact value. Hovering over a bar highlights it, displays a dashed reference line at that bar’s value, and shows the numeric difference between the hovered year and every other year as text above the bars. The visualization uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and d3 transitions for hover effects.

KKenny Wu
69% match
Loading thumbnail…

Activity6_Task2_Q2

This stacked bar chart visualizes fruit sales across multiple years, using horizontal segments to compare totals for Apple, Orange, Mango, and kiwi from 2018 to 2021. The chart displays the proportional contribution of each fruit per year, with tooltips showing exact sales values on hover. Built with D3 v7, the visualization uses `d3.stack()` and `d3.scaleOrdinal` for color encoding, along with `d3.axisLeft` and `d3.axisBottom` for axes. Data originates from an embedded CSV file, rendered as SVG elements.

PPothuguntla Pranitha
69% match
Loading thumbnail…

HTML Starter

This bar chart displays the monthly CKYC success count for 2020, with months on the y-axis and record counts on the x-axis. The visualization uses D3 v5, loading data from a CSV file and rendering as an SVG. It employs `scaleLinear` and `scaleBand` for axes, with bars styled via CSS. The chart includes axis labels and a title, generated through `axisLeft` and `axisBottom`.

Aakshaypoojary
69% match
Loading thumbnail…

Hw1 Q3 barplot

This barplot visualizes the running total of a data metric from 1884 to 2010, with the y-axis representing cumulative counts and the x-axis showing years. It uses D3.js v3 APIs such as `d3.scaleBand`, `d3.scaleLinear`, `d3.dsv`, and `d3.axisBottom`/`d3.axisLeft` to load and render data from a CSV file into SVG rectangles. The chart highlights growth trends over time, showing accelerating increases in later decades.

Sswang835
69% match