Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart

✓ Published0🌍 Public
Kkesmith21
Last edited Dec 5, 2020
Created on Dec 5, 2020
Forked from Making a Bar Chart

This bar chart displays the market capitalization of two companies, Apple and TM, using data from a CSV file. Built with D3 v5 and rendered as an SVG, the visualization uses `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, with customized axes via `axisBottom` and `axisLeft`. The chart includes axis labels and a title, while the bars are styled with a steelblue fill via CSS.

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 charts everywhere

This example compares the average monthly stock prices of Microsoft, Amazon, IBM, and Apple across years (2000–2010) using bars that can switch between stacked and grouped layouts via radio buttons. The visualization uses D3 v4 with `d3.nest()` and `d3.rollup()` to aggregate the CSV data, `d3.stack()` for stacking, and ordinal and linear scales for positioning. An animated transition (800ms) updates the bar positions and heights when the mode changes, with SVG rendering and a custom color scale for each company.

RRaphAllier
74% match
Loading thumbnail…

Stacked to Grouped

This visualization displays monthly stock prices for four companies (MSFT, AMZN, IBM, AAPL) across selected years, initially rendered as stacked bars and toggling to grouped bars when a white circle is clicked. The code uses D3 v4 with SVG rendering, loading data from `stocks.csv` via `d3.csv`. It builds linear scales (`d3.scaleLinear`) for positioning and creates rectangles for each bar, with colors distinguishing companies. The chart updates by re-binding data and adjusting bar widths and heights, and includes labeled axes and a company legend.

BBaptisteL54
74% match
Loading thumbnail…

Assignment5

This visualization displays the relationship between market capitalization and annual revenue for 30 U.S. companies using a scatter plot. D3 v7 loads CSV data from a GitHub gist and renders an SVG chart with circles positioned by two quantitative axes. The code reports dataset summary statistics with formatted numbers and labels axes with dollar values in billions. Uses `d3.csv()` for parsing, `d3.extent()` for value ranges, and `d3.format()` for number formatting, with equal circle size to emphasize positional encoding.

HHaiyan Sun
73% match
Loading thumbnail…

Grouped bar chart v4 Stocks

A grouped bar chart displays monthly stock prices for Microsoft, Amazon, IBM, and Apple across four selected years. The visualization uses D3 v4's `d3.csv` to load data from a local CSV file and `d3.select` to append an SVG element with a dark blue background. Bars are drawn using `svg.selectAll("rect")` with a linear scale for the y-axis, and each group of four rectangles represents the four companies' prices for a given month. The chart includes axis elements created with `d3.axisBottom` and `d3.axisLeft`, plus text labels for each company.

BBaptisteL54
73% match
Loading thumbnail…

Apple Daily Price- Customizing Axes

This horizontal bar chart displays Apple Inc.’s daily stock price for selected days in 2019, using a bar length to represent price and a band scale for dates. Built with D3 v5, the SVG chart applies `scaleLinear` and `scaleBand` for axes, with `axisLeft` and `axisBottom` for ticks. The x-axis labels use `format('.3s')` to abbreviate numbers, rendering price values in thousands. Data is loaded from a CSV file, and the chart is drawn using SVG `rect` elements with a pink background and steelblue bars.

Rrangitit
72% match
Loading thumbnail…

Assignment5

This dashboard visualizes the relationship between market capitalization and revenue for 30 U.S. companies, with each dot representing a single firm. The interface allows switching between five chart versions that explore different encoding channels, from position-only to color and area variations. Built with D3 v7, the visualization uses `d3.csv` to load data from a GitHub gist, `d3.extent` for summary statistics, and SVG rendering for the scatter plot. The code also includes interactive navigation buttons that update the chart's visual encodings.

HHaiyan Sun
72% match
Loading thumbnail…

Stacked bar chart v4 Stocks

This stacked bar chart, built with D3 v4, visualizes the monthly closing stock prices for four major tech companies (MSFT, AMZN, IBM, AAPL) across four selected years. It uses `d3.csv` to load data from `stocks.csv`, then filters and aggregates the data to display stacked rectangles. The chart employs `d3.scaleLinear` for both the x and y axes, with each month’s bar segmented by company, colored in grayscale, and rendered as SVG. The visualization includes axis labels and company legends, with a dark background for contrast.

BBaptisteL54
72% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most valuable companies, with market values in billions and a green axis label and title. It uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom to render axes. The chart is drawn as SVG rectangles, with the y-axis line and ticks removed, and the x-axis tick format converts values from gigabytes to billions. A React starter is also referenced in the README, though the main implementation relies on plain D3 v5.

Aamiralitah
71% match