nibud

100%

✓ Published0🌍 Public

Last edited Jan 22, 2020

Created on Jan 6, 2020

This visualization presents the monthly budget categories from Nibud, showing whether each category results in a positive or negative value. The bars extend left or right from a central zero axis, with positive values in orange and negative values in blue. Using D3 v5 with SVG rendering, the code implements `scaleLinear`, `scaleBand`, `axisLeft`, and custom tick positioning to place negative category labels on the opposite side. Data is loaded from a CSV file and sorted by value using `ascending`.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values for eight named categories, using color to distinguish them: steel blue for positive bars and dark orange for negative bars. Built with D3 v3 and rendered as SVG, it loads data from a TSV file and applies a linear scale to position bars along the x-axis while an ordinal scale with rangeRoundBands handles the y-axis placement. The code calculates bar positions conditionally so negative values extend leftward from zero and positive values extend rightward. Axis components from d3.svg.axis add tick marks and labels.

Mmbostock

71% match

Loading thumbnail…

Making a Bar Chart

This bar chart visualizes monthly household expenses across categories like gas, electricity, and education, using data from a 2018 United Nations population report. It compares spending against NIBUD advisory thresholds, with a vertical line marking the recommended limit. Built with D3 v5, the chart uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG. Custom background rectangles highlight the advisory zone, while colors distinguish expense types. The x-axis is formatted with percentage ticks, and data loads from a CSV via `d3.csv`.

MManoukK

71% match

Loading thumbnail…

Stacked bar chart with negative values

This stacked bar chart visualizes positive and negative values across six months from a CSV file, with each bar divided by category and color. The chart uses a diverging layout where positive segments extend rightward from a zero baseline and negative segments extend leftward, anchored by the axis. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `d3.stack`, and `axisLeft`/`axisBottom` to compute and render the SVG. The data is split into positive and negative stacked series, with zero-baseline positioning calculated from value ranges.

LLittledevil7

70% match

Loading thumbnail…

Diverging Color Scale

This diverging bar chart displays positive and negative values for seven categories using a diverging color scale. The visualization encodes value magnitude through bar height, while direction is shown by bars extending above or below a central zero axis, with the PiYG interpolator assigning distinct colors to positive and negative values. Built with D3 v6, the example uses `scaleDiverging`, `scaleBand`, and `scaleLinear` to position and color rectangles, alongside the d3-legend library to render a horizontal color legend. Data comes from a local CSV file containing category-value pairs.

KKwasi Acquaye

69% match

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values for named items, with positive bars in steelblue and negative bars in brown. Using D3 v3 with SVG rendering, the visualization employs a linear scale for the x-axis to position bars and an ordinal scale with rangeRoundBands for the y-axis. Rects are positioned conditionally so that their x-coordinate and width correctly handle negative values, while a top-oriented axis and zero line clarify the scale. Data is loaded from a tab-separated file.

KKevinRourke

68% match

Loading thumbnail…

bar negative table #2

This example presents a table of margin values for four locations, using horizontal bars to compare positive and negative results. Each row shows a location name beside a bar extending left or right from a central zero line, colored dark orange for negative values and steel blue for positive ones. A third column summarizes each entry with a label like “Humpty” or “Dumpty” and the absolute value. Built with D3 v3, it uses `d3.scale.linear`, `d3.tsv` for data loading, and SVG elements such as `rect` and `line` to draw the bars and gridlines.

PPatrick Wojda

67% match

Loading thumbnail…

Bar Chart with Negative Values II

This example shows a horizontal bar chart where negative values extend to the left and positive values to the right, with each bar color-coded by sign. The visualization uses `d3.scale.linear` for the x-axis and `d3.scale.ordinal` with `rangeRoundBands` for the categorical y-axis. The code builds the chart in SVG using `d3.svg.axis`, and a custom axis adjustment flips the tick orientation for negative bars by repositioning their tick lines and labels. Data is loaded from a TSV file via `d3.tsv`, and the bars are drawn as `rect` elements with widths computed from the absolute difference between the zero point and each value.

Mmbostock

67% match

Loading thumbnail…

Untitled

This grouped bar chart displays monthly values for three categories (Orange, XPC, and ABC) from a local CSV file. The visualization uses `d3.scaleBand` for the categorical x-axis and subgroup positioning, with `d3.scaleOrdinal` assigning a distinct color to each series. A manual legend is drawn using SVG circles and text elements. The chart renders as an SVG via the `d3.csv` load, with axes generated by `d3.axisBottom` and `d3.axisLeft` on a fixed 20-unit y-domain.

SSeanisgod1994

66% match