Skip to main content
SimilarExport ZIP
100%

Project: Bar Chart

✓ Published0🌍 Public
OOxfordComma
Last edited Oct 11, 2018
Created on Oct 7, 2018

This bar chart visualizes the number of music plays per day of the week, aggregated from Last.fm listening data. The chart displays seven bars, one for each weekday, with the y-axis representing play counts and the x-axis showing the days. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map the data, and `axisLeft` and `axisBottom` for the axes. The data is loaded via a CSV file, which is processed in `loadData.js` to group plays by weekday.

AI-generated description

This data is collected by a service called last.fm, which has been aggregating my music plays via iTunes and Spotify since 2008. The data shows the top 20 artists by play count, as tracked by the service. The data was accessed from my profile via a service called last.fm to csv, using my username (philosiphicus).

MIT Licensed

Similar vizzes

Loading thumbnail…

WeekDayChart

This example visualizes the frequency of events across the seven days of the week using a simple bar chart. The chart shows that Wednesday has the highest count at 131, while Friday has the lowest at 1. The visualization is built with D3 v4, using `d3.scaleBand` for the x-axis day categories and `d3.scaleLinear` for the y-axis frequency scale. Bars are rendered as SVG `rect` elements, and the chart includes hover effects that change bar color from steelblue to brown. The data is hardcoded in a `flatDays` array, and the y-axis is labeled "Frequency."

JJoelGallagher
79% match
Loading thumbnail…

Making a Bar Chart

This bar chart visualizes sound levels in decibels across six days, with purple bars showing daily measurements. Built with D3 v5, the visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with axes generated via `axisLeft` and `axisBottom`. The SVG renderer appends rect elements based on data loaded from a CSV file, while styling is handled through external CSS. The chart demonstrates core D3 data binding and margin-based layout techniques for a straightforward categorical comparison.

SsowmyaSG
78% match
Loading thumbnail…

Making a Bar Chart

This bar chart visualizes sound levels in decibels for a week, highlighting the highest readings with purple circles. It loads data from a CSV file and renders an SVG using D3 v5. The code employs `d3.csv`, `scaleLinear`, and `scalePoint` to map values, with `axisLeft` and `axisBottom` for labels. A custom `render` function handles the layout, margins, and circle positioning.

SsowmyaSG
77% match
Loading thumbnail…

Bar Chart in D3

This bar chart displays the maximum hours of music listened to per day across surveyed ages, omitting ages not present in the dataset. It uses D3 v7 to load a CSV file, aggregates the data with `d3.group`, and computes the maximum per age via `d3.max`. The SVG rendering uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axes labeled using `d3.axisBottom` and `d3.axisLeft`. Bars are purple rectangles with white value labels, and hovering over a bar changes its fill to mediumpurple.

AAndrew Blakeslee Moore
76% match
Loading thumbnail…

Making a Bar Chart

This example shows a purple bar chart of sound levels in decibels recorded across a seven-day period. The chart loads and maps data from a CSV file using d3.csv, then scales the values with d3.scaleLinear and d3.scaleBand. It renders axes through d3.axisLeft and d3.axisBottom, and appends rectangles to an SVG canvas to represent each day’s measurement. The bars are drawn dynamically based on the data, with a fixed chart margin and explicit width and height set in the SVG element.

SsowmyaSG
76% match
Loading thumbnail…

Fork of Refactored Bar Chart

This chart displays the aggregate number of move-ins per day of the week from a CSV dataset, with each day represented by a circle plotted on a linear scale. Built with React and D3 v6, the visualization uses `useState` and `useEffect` to load and refine the data, summing records by weekday. SVG elements render the axes and marks, with `scaleLinear` mapping values and the `Marks` component adding a native `<title>` tooltip. Axis components are generated manually from `yScale.ticks()` and `xScale.ticks()`, with labels formatted using `d3.format`.

Ddjfeld01
76% match
Loading thumbnail…

blue bar chart

This example shows a blue bar chart of weekly impression counts by day, with values ranging from 250,000 to 500,000. The chart displays seven bars labeled Mon through Sun, with a light gray background and a title. Built with d3.v4, the visualization loads data from a TSV file and renders SVG elements. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisLeft` to display tick marks. Bars are colored with hover states that change to gray.

JJoelBCarter
75% match
Loading thumbnail…

Bar chart

A horizontal bar chart displays population counts across weekly periods from 2019-W31 to 2019-W35. The bars are drawn as green SVG rectangles using D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with `axisLeft` and `axisBottom` providing tick labels. Data is loaded from a local CSV file via `d3.csv`, and numeric values are coerced with unary plus. The visualization uses an SVG container with fixed margins, rendering the chart in a clean, minimal style.

GGeolffrey S Mena
75% match