Skip to main content
SimilarExport ZIP
100%

Bars

✓ Published1🌍 Public
Jjoanoliper
Last edited Sep 19, 2019
Created on Sep 19, 2019
Forked from Bars

This bar chart displays the asset allocation percentages of a portfolio sample, with each bar labeled by asset type. It uses D3 v5’s `scaleLinear` and `scaleBand` to map allocation values and asset names, respectively, and renders an SVG with axes via `axisLeft` and `axisBottom`. Data is loaded from `data.csv` using the `csv` method, and bars are appended as `rect` elements with widths proportional to allocation. The chart is styled with a steelblue fill for the bars and includes a left margin for the categorical labels.

AI-generated description

This bar chart shows weights for a portfolio sample.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bars

This bar chart displays the allocation of assets in a portfolio, with horizontal bars representing values from $100 million to over $500 million. The visualization uses d3.scaleBand for the categorical asset labels on the y-axis and d3.scaleLinear for the numerical allocation values on the x-axis. Data loads from a CSV file, and SVG rendering includes formatted tick labels that convert values to billions using d3.format with a custom .3s suffix replacement from G to B.

Jjoanoliper
87% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes portfolio asset allocations, plotting each asset’s allocation value along the x-axis against its asset name on the y-axis. The chart uses `d3.scaleLinear` for the x-scale and `d3.scalePoint` for the categorical y-scale, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously from a CSV file using `d3.csv`, and circles are rendered in an SVG container.

Jjoanoliper
78% match
Loading thumbnail…

Making Bar chart with D3

A bar chart displays monthly values from a CSV file, using horizontal bars where length encodes value and vertical position encodes date. The visualization is built with D3 v5, using `scaleLinear` for the value axis, `scaleBand` for the categorical date axis, and `axisLeft`/`axisBottom` for tick marks. SVG rectangles are rendered from the loaded data, with axes simplified by removing domain and tick lines.

JJuan David Bolaños Rojas
75% match
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
75% match
Loading thumbnail…

Bars

This bar chart displays population counts for six countries, with horizontal bars sorted by the data’s order rather than by value. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisLeft`/`axisBottom` for ticks. Data loads from a CSV via `d3.csv`, with numeric population values parsed before rendering as SVG rectangles. The chart’s styling applies a steelblue fill to each bar.

Jjoanoliper
75% match
Loading thumbnail…

Basic bar chart

This basic bar chart displays categorical year-based values as vertical bars, with each bar’s height encoding the numeric value from a CSV file. The chart loads data from `test-data.csv` using `d3.csv`, then renders SVG rectangles via `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the code includes configurable labels and margins. The design emphasizes simplicity and reusability, adapting a prior block by mbostock into a customizable template.

EEleonore9
75% match
Loading thumbnail…

My bar chart.

This bar chart displays categorical letters on the y-axis against quantitative numbers on the x-axis using d3.scaleBand and d3.scaleLinear. The SVG rendering uses d3.csv to load data.csv, converting the numbers field to numeric values before binding the data to rectangles. d3.axisLeft and d3.axisBottom generate the axes, while the bar height derives from the scale band’s bandwidth.

CChocoOrange
75% match
Loading thumbnail…

Bar charts with D3

A bar chart displays total ad spend across management entities, sorted vertically with steelblue rectangles encoding values from a CSV dataset. The visualization uses D3 v5’s `csv` loader, `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis positioning, and `axisLeft`/`axisBottom` for ticks. SVG rendering occurs via appended `rect` elements, with margins and transforms controlling layout.

MMichael Oppermann
75% match