Skip to main content
SimilarExport ZIP
100%

jasplund3

✓ Published1🌍 Public
JJohn Asplund
Last edited Jan 18, 2020
Created on Jan 17, 2020

This example visualizes a running total over time as a bar chart, displaying a cumulative count that grows from 5 in 1949 to nearly 15,000 by 2019. The chart uses SVG rendering and the D3 v5 library, with `d3.scaleBand` for the categorical year axis and `d3.scaleLinear` for the numeric total axis. The code constructs the visualization by appending rect elements to an SVG group, and it customizes the x-axis ticks to show only every third year using `d3.timeYear.every(3)` and a filter that removes non-matching tick labels. The data is loaded from a CSV file containing year and running_total columns.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

jasplund3

This visualization displays a running total of an unspecified metric from 1949 to 2019, using a time-series bar chart. The chart shows a steady, accelerating upward trend, with each bar representing the cumulative count for a given year. Built with D3 v5, it uses `d3.scaleTime` for the x-axis, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG rectangles to render the bars. Data is loaded from a local CSV file via `d3.csv`, and the y-axis domain is derived from the maximum running total.

JJohn Asplund
92% match
Loading thumbnail…

jasplund3

This bar chart displays the cumulative running total of a dataset from 1949 to 2019, showing steady growth over time. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleBand` for the x-axis to position bars by year and `d3.scaleLinear` for the y-axis. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the x-axis tick labels are filtered to show every third year. Data is loaded from a CSV file using `d3.csv`.

Ggotyou007
92% match
Loading thumbnail…

Untitled

This example shows the cumulative growth of a running total from 1884 to 2010, displayed as a bar chart where each bar represents the running total for a given year. The data is loaded from a CSV file using `d3.dsv`, and the chart is rendered as an SVG element. The code defines scales for the x and y axes, appends bars to the SVG, and adds axis labels, using the D3.js library for data binding and DOM manipulation.

Ssittunswayam
82% match
Loading thumbnail…

Untitled

This example shows the cumulative running total of a dataset from 1884 to 2010, with values increasing from 1 to over 160,000. The visualization renders as a solid red rectangular SVG area, though the code does not yet plot the data points. It uses D3 v6.5.0 to select the SVG element and apply a background color via inline styling. The data is loaded from a CSV file containing two columns: year and running_total. The page includes a tutorial video and basic setup for a homework assignment.

Jjeffgallini
82% match
Loading thumbnail…

Let's make a bar chart!

This example shows the cumulative number of events by year from 1949 to 2019, using a bar chart that grows in height as the running total increases. The visualization loads CSV data and renders it as SVG rectangles, using D3 v5 scales (`d3.scaleLinear`, `d3.scaleBand`) and axes (`d3.axisBottom`, `d3.axisLeft`). The bars are colored steelblue and positioned via the scale’s range band, with the chart drawn inside an `<svg>` element using a margin convention.

Sswathijay
80% match
Loading thumbnail…

Untitled

A bar chart displays the cumulative running total of values from 1884 to 2010, sourced from a CSV file. The visualization uses D3.js v5, with `d3.dsv` to load and parse the data, and SVG elements to render the bars and axes.

Jjkwycz
80% match
Loading thumbnail…

My work

This visualization displays the running total of something measured annually from 1949 to 2019, with data loaded from a CSV file. The chart appears to be a bar chart, with each year mapped to a bar whose height reflects the cumulative total. The code uses D3 v5 methods including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the SVG chart. Although axis labels and a title are defined, the rendering logic is incomplete, as the data is only logged to the console.

Aayushcha
80% match
Loading thumbnail…

Making a Bar Chart

This example visualizes the cumulative total of events from 1949 to 2019, with each year’s running total mapped to a bar in a simple bar chart. The visualization uses D3 v5’s `select` and `csv` functions to load data from a local CSV file, parse the numeric `running_total` column, and then append a fixed-width, fixed-height `rect` for each data point. The code does not scale the bars based on value, so all rectangles appear identical in size.

Aadamriley29
78% match