Fork of Customizing Axes

100%

Fork of Customizing Axes

✓ Published1🌍 Public

Last edited Jan 14, 2022

Created on Jan 12, 2022

This visualization displays the win counts for NCAA college basketball teams using a horizontal bar chart, with team names on the y-axis and game wins on the x-axis. Built with D3 v5, it uses `d3.scaleLinear` for the numeric x-axis and `d3.scaleBand` for categorical team labels. Customized axes include removed domain lines, modified tick styles via CSS, and added axis titles and chart heading. Data is loaded from a CSV file containing team statistics from the 2018 season.

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 Fork of Customizing Axes

This bar chart displays the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects, with team win counts from a college basketball dataset as the quantitative axis. The visualization showcases custom D3 axis styling, including rotated tick labels and styled grid lines. Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, and applies custom fonts and colors via CSS. The SVG rendering includes a title and axis label, with bars filled in steelblue.

JJadenzzz

84% match

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

82% match

Loading thumbnail…

Fork of Customizing Axes

This visualization presents a comparative analysis of player performance in a gaming context, featuring both a bar chart and an interactive scatter plot. The bar chart displays aggregated performance metrics per agent, while the scatter plot allows users to explore correlations between different statistics like kills, deaths, and assists. Users can dynamically switch which metric is displayed on the bar chart and both axes of the scatter plot via dropdown menus. The visualization is built using D3 version 7, leveraging APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG elements and manage the interactive updates. The data is loaded from CSV files containing player match statistics.

Ddaniel

78% match

Loading thumbnail…

Colleage Basketball game win

This visualization presents a bar chart of college basketball teams, showing each team's number of game wins on the x-axis and team names on the y-axis. Built with D3 v5 within a React framework, it renders the chart as an SVG. The code imports specific D3 functions like `scaleLinear`, `scaleBand`, and `axisBottom` to construct the scales and axes. Data is loaded from a CSV file using the `csv` function, with bars displayed as `rect` elements, using the `data.csv` source to map the `W` (wins) column for each team.

JJadenzzz

78% match

Loading thumbnail…

Customizing Axes

This visualization displays the most-watched Super Bowls, ranking teams by viewer counts from the provided CSV data. It uses D3 v5’s `scaleLinear` for the horizontal axis and `scaleBand` for vertical categories, with custom formatting via `format('.3s')` to abbreviate numbers. The chart builds on a prior bar chart example, highlighting axis customization through `axisBottom` and `axisLeft`, removing default domain lines, and styling tick marks, labels, and the title with CSS.

Nnicfavfar

77% 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

77% match

Loading thumbnail…

Fork of Customizing Axes

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.

Vvasanthvasu

77% match

Loading thumbnail…

Fork of Fork of Customizing Axes

This dashboard lets users explore player statistics from professional VALORANT matches through interactive bar and scatter plots. Using D3.js v4, it loads match data via `d3.csv` and renders SVG charts with animated transitions. Dropdown menus allow switching between metrics like KD, kills, and win rate for both visualizations. The scatter plot uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for point colors, while the bar chart sorts agents by the selected metric.

Ddaniel

77% match