Fork of Customizing Axes

100%

Fork of Customizing Axes

✓ Published0🌍 Public

Last edited Jul 13, 2022

Created on Jul 12, 2022

This visualization displays a stacked bar chart of career-level data, showing the distribution of Standard, Double, and No awards across two career levels. The chart uses a custom color palette with red, blue, and green bars, and demonstrates custom axis configuration with tick labels removed from the bottom axis. The code is built on D3 v4, loading data from a CSV file and using the `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `stack` APIs to process and render the SVG output.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Customizing Axes

A bar chart displays student scores from a CSV file, ranking each student on a vertical band scale against a linear grade axis. The visualization customizes axes by removing default domain lines, adding grid lines, and applying a formatting function that converts large numbers to abbreviated labels using D3's `format`. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars with styled ticks and titles.

TtreasurehunterAP

84% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of Alpha Team ratings by soldier role, with scores normalized from a CSV dataset. The visualization demonstrates customizing D3 axes by removing default domain lines and tick lines, adding an axis label, and applying custom styling via CSS. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, d3.axisBottom, and d3.axisLeft, with data loaded via d3.csv.

JJimmyDiGioia

79% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays Olympic medal counts for the top 10 countries, with orange bars labeled by country and an x-axis showing medal totals in abbreviated format. The data comes from a CSV file loaded via `d3.csv`. The visualization demonstrates axis customization using `d3.axisLeft` and `d3.axisBottom` with `d3.scaleLinear` and `d3.scaleBand`, including custom tick formatting, tick lines in green, and rotated labels. The chart renders in SVG with a red title and axis labels styled through CSS.

Nnagamaheswar

78% match

Loading thumbnail…

Customizing Axes

This example shows how to customize the axes of a bar chart built with D3.js, displaying the names of people alongside counts of work items in progress and planned. The chart uses `d3.select` and `d3.csv` to load data from `data.csv`, rendering bars in SVG with a stylesheet that adjusts tick text, line colors, and axis labels. The code defines axis label and title font sizes, demonstrating manual styling of the scales and axes.

Nnkrpyate

78% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the average SPIN score for four playstyles, colored by category. The data is loaded from a CSV file and rendered as horizontal bars using D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The chart uses `axisBottom` and `axisLeft` for tick marks, with custom tick formatting via `d3.format`. Grid lines, axis labels, and a title are added with SVG styling.

GGeorgeVard

78% match

Loading thumbnail…

Fork of Customizing Axes

This example displays a horizontal bar chart of the populations of the ten most populous countries, using data from a CSV file. The chart ranks countries from largest to smallest, with bars colored steelblue and clear axis labels. It uses D3 v6 APIs such as `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. The code customizes axes by removing domain lines, adding grid lines, and formatting tick labels to show values in billions.

MMajaha21

78% match

Loading thumbnail…

Fork of Customizing Axes

This visualization displays two horizontal bar charts comparing population values for named countries, with the charts placed side by side for comparison. The bars are rendered as SVG rectangles using D3 v5, with scales from `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. The code customizes axes by removing domain lines, adding grid lines via `tickSize`, and formatting tick labels with `d3.format`. Population data is loaded from CSV files using `d3.csv` and multiplied by 1000.

Sskb461

78% match

Loading thumbnail…

Fork of Fork of Customizing Axes

This example shows a bar chart of the top ten scores by Indian batsmen, with each bar’s length proportional to the runs scored and the player names on the vertical axis. The chart applies custom axis styling, including labeled tick lines, a rotated axis title, and a formatted tick scale. The visualization uses d3.csv to load data, and d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render the SVG. The axis labels and title are added as SVG text elements, with margins controlling layout.

DDeekshithVemula

78% match