Customisation! D3.js

100%

Customisation! D3.js

✓ Published0🌍 Public

Last edited Feb 9, 2020

Created on Jan 30, 2020

Forked from One programmer walks into a bar... D3.js

This example displays the top 10 most popular dog names in NYC using a horizontal bar chart. The visualization shows the count of each name, with bars sized proportionally to their values. The code uses D3 v5 with an SVG rendering approach, reading data from a CSV file. It employs `d3.scaleLinear` and `d3.scaleBand` for axes, while `d3.axisBottom` and `d3.axisLeft` generate the ticks. The chart is customized through CSS styling, including steelblue bars and formatted tick labels using `d3.format`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most popular dog breeds by registration count, using horizontal bars sorted from highest (Labrador Retriever) to lowest (Miniature Schnauzer). The visualization demonstrates customized D3 axes: the y-axis has its domain and tick lines removed, while the x-axis uses a custom tick format that abbreviates large numbers (e.g., converting 'G' to 'B') and extends grid lines across the plot area. Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the scales and axes, with data loaded from a CSV file.

BBigDataVisClass

82% match

Loading thumbnail…

One programmer walks into a bar... D3.js

A bar chart displays the frequency of popular dog names from a CSV dataset, with horizontal bars showing counts for names like Bella and Max. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for the x-axis count scale and `scaleBand` for the categorical y-axis names. Axes are generated via `axisLeft` and `axisBottom`, while `csv` loads the data and rect elements are bound to the values.

AAli Shah

82% match

Loading thumbnail…

Making a Bar Chart

This example displays the population of the top 10 most populous dog breeds as a horizontal bar chart, using data from a local CSV file. The visualization uses d3.scaleLinear and d3.scaleBand to map population and breed names to x and y positions, with d3.axisLeft and d3.axisBottom rendering the axes. Bars are appended as SVG rectangles whose widths are proportional to population values, and the chart is rendered with a steelblue fill and a fixed SVG viewport.

BBigDataVisClass

80% match

Loading thumbnail…

Customizaing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using a D3 v5 SVG rendering. The chart shows population values on a linear x-axis with custom tick formatting that abbreviates large numbers (e.g., converting billions to 'B'), while the categorical y-axis lists country names. The code uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the scales and axes. It removes default domain lines and tick lines, and adds custom axis labels and a title. Data is loaded from a CSV file and multiplied by 1,000.

Nnkohdatavis

77% match

Loading thumbnail…

Bar Chart.js!

A horizontal bar chart displays the top 10 most populous countries from a CSV file using D3 v5. The chart uses `d3.scaleBand` for y-axis categories and `d3.scaleLinear` for population values, with formatted tick labels converting values to billions. Bars are rendered as SVG rectangles in steel blue, with axis labels and a title included. The code loads data via `d3.csv` and applies a custom tick format to abbreviate large numbers.

PPetter-Smit

77% match

Loading thumbnail…

Customizing axes!

This example shows a horizontal bar chart ranking the top ten most populous countries, with population on the x-axis and country names on the y-axis. The visualization customizes both axes by removing domain lines, adding a formatted tick label that converts large numbers into billions, and including a descriptive axis title. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the chart as SVG, pulling data from a local CSV file. The bars are colored steelblue, and text styling is applied via an external stylesheet.

WWai Kit Tsang

77% match

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populous countries, using population values loaded from a CSV via `d3.csv`. The chart shows raw bars in dodger blue, with customized axes: the y-axis omits its domain line and tick lines, while the x-axis uses `d3.axisBottom` with a custom tick formatter that abbreviates large numbers and replaces 'G' with 'B'. The code leverages `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.format` for number formatting, with a labeled x-axis reading "Pupulation" and a chart title.

Llars-ruijs

76% match

Loading thumbnail…

Aggregating Data With React & D3 (skipped ahead)

This example shows a horizontal bar chart of the top 10 baby names from an 1880 dataset, with each bar’s length scaled to the name’s frequency. It uses React’s `useState` and `useEffect` to asynchronously load CSV data via `d3.csv`, then renders SVG rectangles with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The chart also includes gridlines, tick labels, and axis labels generated from `xScale.ticks()`. The data source is a GitHub Gist, and the visualization updates only after the CSV resolves.

AAdrianna87

76% match