Skip to main content
SimilarExport ZIP
100%

Count + Percent

✓ Published0🌍 Public
AAsmabee Khan
Last edited Jan 12, 2022
Created on Mar 22, 2021
Forked from XmR

This example demonstrates a dual-axis chart combining bar and line representations. Gray bars show raw counts by year on a steelblue left axis, while a steelblue line with points displays percentage data on a crimson right axis. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for both y-axes, and `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` to generate the axes. Data is loaded from a local CSV file.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Percentage bar chart

This percentage bar chart uses a horizontal bar layout to show a direct linear relationship between amount and percentage values. The bars extend proportionally from left to right, with the x-axis representing percentage and the y-axis categorizing amounts. The visualization loads CSV data using D3’s `csv` method, then renders with `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for the axes. SVG rectangles display the bars, colored with a deep maroon fill and styled via external CSS.

TTusar
78% 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
76% match
Loading thumbnail…

"Percent complete" bar

This example visualizes progress as two rounded horizontal bars: the first shows the total value in white, and the second overlays the current value in blue, with numeric labels on each bar. It uses D3.js v2 with a linear scale to map the data values [900, 350] to pixel widths within a fixed 200-pixel SVG. The code selects SVG rect elements via `chart.selectAll("rect")` and appends text labels using `chart.selectAll("text")`, with styling defined in an external CSS file.

KKacieW
76% match
Loading thumbnail…

vs1

This example shows a simple vertical bar chart of three labeled values using D3 v4. The code creates an SVG with scales for the x and y axes, then draws steelblue rectangles for each data point. It uses `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the numeric axis, with `d3.axisBottom` and `d3.axisLeft` to render the tick marks. The chart is embedded in a React project but works as a standalone HTML page with static data.

Yyesyesnono01@yahoo.com
75% 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
75% match
Loading thumbnail…

Dual axes in v5

A dual-axis line chart plots two time series from a CSV file, with one line in steel blue and another in red, each paired to its own y-axis. The example uses D3 v4 with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` to render an SVG. The steel-blue axis appears on the left, the red axis on the right, and both lines share a common time-based x-axis. The styling is driven by CSS classes for axis text colors, as shown in the index.html file.

Dd3noob
75% match
Loading thumbnail…

Bar Chart Example

This example demonstrates a basic bar chart built with D3 version 6. It visualizes a small dataset of four categorical values using an SVG container. The code creates an SVG, applies d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, then renders steelblue rectangles for each data point. It also appends axes with d3.axisBottom and d3.axisLeft.

VVamshi Amudala
75% match
Loading thumbnail…

Making a Bar Chart

This example displays a bar chart of the number of files per year, with years on the y-axis and file counts on the x-axis. The visualization uses D3 v5 to load data from a CSV file, scale the values with `d3.scaleLinear` and `scaleBand`, and render SVG rectangles. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`. The chart highlights the fluctuating file counts across years, peaking in 2014 and declining afterward.

TTopoVague
75% match