Making a bar chart

100%

Making a bar chart

✓ Published1🌍 Public

Last edited Jun 9, 2019

Created on Jun 9, 2019

This bar chart displays the median monthly rent in Berkeley, California, for eight ZIP codes, with costs scaled up by a factor of 1,000 from the original data. Using D3 v5, it maps the numeric Cost values to a linear scale for the x-axis and the categorical ZIP codes to a band scale for the y-axis, rendering SVG rectangles. The code employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and customizes tick formatting with `d3.format`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bar chart

This bar chart displays median monthly rent for Berkeley ZIP codes, with horizontal bars sorted by postal code. The visualization uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear to map ZIP codes and costs, and d3.axisLeft and d3.axisBottom with custom tick formatting. Rendered as SVG, the chart applies margins, removes default axis lines, and labels the x-axis as "Rent" with a title above the plot.

MMercPai

95% match

Loading thumbnail…

ICE-6 Bar Graph

This bar graph shows average monthly rent prices for twelve US cities, with city names on the vertical axis and rent amounts on the horizontal axis. The visualization uses React hooks to manage state and fetch CSV data via `d3.csv`, then renders SVG rectangles scaled through `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Grid lines are generated with `xScale.ticks()` and labeled using text elements. The data comes from a gist-hosted salaries CSV file, and the graph updates once the asynchronous data loading completes.

SSUSHMA CHIRRA

71% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes annual rent increases from 2000 to 2020 using data loaded from a CSV file. Each year is represented by a simple square rectangle rather than a standard proportional bar, emphasizing the graphic style over quantitative accuracy. The visualization uses D3 v5 with the `d3.csv` method to fetch and parse the data, appending SVG `rect` elements inside an `<svg>` container. The rectangles are fixed at 300 by 300 pixels, with formatting that prioritizes a uniform, decorative appearance over encoding the actual values.

MmarcoFijan

71% match

Loading thumbnail…

Making a Bar Chart with D3

This horizontal bar chart displays counts of different housing situations, from rough sleeping to private housing, using a CSV data source. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for the axes. Data loads asynchronously via `csv`, then binds to rectangles with heights set by `yScale.bandwidth()` and widths proportional to each count, with maroon fills.

AAloysius

70% match

Loading thumbnail…

D3.js Bar Chart

This bar chart displays the top 15 most expensive cities by their mean cost of living index, sourced from a CSV file. Using D3 v4, the code filters data by rank, nests entries by city, and computes averages with `d3.nest().rollup()`. It renders an SVG with `d3.scaleBand` and `d3.scaleLinear` axes, while interactive tooltips appear on mouseover via `d3.select` and style changes.

Kkottenikhil

70% match

Loading thumbnail…

Making a Bar Chart Fork

This example visualizes the average price of a two-bedroom flat across ten countries, using a horizontal bar chart rendered as SVG. The chart orders countries by price and labels each bar with its value in thousands. The code uses D3 v5 utilities including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with data loaded from a CSV file via `d3.csv`. A `format('.3s')` tick formatter abbreviates axis labels, while the bars themselves are styled with a steelblue fill.

Ssamwatersw15

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

70% match

Loading thumbnail…

ICE-6 Bar Graph

This bar graph displays the Rent Index for 12 global cities, comparing their relative rental costs. Built with React and D3 v5, it loads CSV data and renders an interactive SVG chart with horizontal bars. The code explicitly uses `scaleBand` for the city categories on the y-axis, `scaleLinear` for the numeric rent values on the x-axis, and manual axis tick generation with D3’s `ticks()` method. Grid lines are drawn as red vertical elements, and the data comes from a GitHub Gist URL.

Kkottenikhil

69% match