Skip to main content
SimilarExport ZIP
100%

Fork of making a bar chart

✓ Published0🌍 Public
Jjmmoser7
Last edited Feb 11, 2022
Created on Feb 11, 2022
Forked from making a bar chart

This fork of a D3.js bar chart visualizes the total gross floor area (TotalGFA) for different access types from a CSV dataset. The chart uses a linear scale for the x-axis and a band scale for the y-axis, rendering steel-blue rectangles within an SVG. It employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 v5 to construct the axes and bars, with data loaded via the `csv` function.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of making a Bar graph

This bar chart visualizes the Area values from a CSV dataset across various years, rendered as steelblue rectangles on an SVG canvas. The visualization uses the D3.js v5 library to load and map the data, with each bar's height corresponding to the Area measurement. A supplementary JavaScript array demonstrates dataset manipulation by finding the index of a specific car brand, though this is logged to the console rather than displayed graphically. The chart is styled with CSS, adjusting the rect fill color and enlarging text for readability.

SSteve_Nashon
78% match
Loading thumbnail…

Fork of Let's make a bar graph

This example displays a horizontal bar chart of country populations using SVG rectangles. It loads data from a local CSV file and renders each bar with D3 v5’s `scaleLinear` for widths and `scaleBand` for vertical positioning. The code imports `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` from the D3 module, fetches the CSV asynchronously, and appends `rect` elements to an SVG. The data values are multiplied by 1,000 to convert population figures.

MMatiasmedrano66
77% match
Loading thumbnail…

Fork of area chart

This area chart visualizes annual data from a CSV file loaded via `d3.csv`, using D3 v7 to render an SVG path with a steelblue fill. The chart employs `d3.area()` with linear scales for the x-axis (Year) and y-axis (Value), and includes bottom and left axes with labels. The data is fetched from a GitHub Gist URL, and axis tick formatting for the year is specified with `d3.format('d')`.

Rreddysushma994@gmail.com
77% match
Loading thumbnail…

Fork of area chart

This area chart visualizes annual data from a CSV file loaded via `d3.csv`, using D3 v7 to render an SVG path with a steelblue fill. The chart employs `d3.area()` with linear scales for the x-axis (Year) and y-axis (Value), and includes bottom and left axes with labels. The data is fetched from a GitHub Gist URL, and axis tick formatting for the year is specified with `d3.format('d')`.

Rreddysushma994@gmail.com
77% match
Loading thumbnail…

Fork of Bar Chart

This example presents a bar chart of global sales data across historical periods, rendered as an SVG with D3 version 6. It shows a default view of steel-blue bars, which transition to orange on mouse hover via D3's selection and transition APIs. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file and mapped to rectangles with explicit width and height attributes.

GGuilinabaoge
77% match
Loading thumbnail…

Fork of Fork of barchart4

This horizontal bar chart displays the heights of six products from a CSV file, with D3.js rendering SVG bars. The visualization supports interactive features: clicking an alert on a bar and hovering over a bar generates a tooltip, both showing the product name and height. The code uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. A `csv()` call loads the data, and configuration options in `chartJson` control labels, grid lines, and events.

Llimeroc
77% match
Loading thumbnail…

Fork of Making a barchart

This bar chart shows total sales by product category, using data loaded from a CSV file. The visualization is built with D3 v6 and rendered as SVG, applying linear scaling to sales values and band scaling to categories. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with each rectangle’s height and width determined by the data values. The data is preprocessed by converting sales strings to numbers.

GGinnWG
77% match
Loading thumbnail…

Fork of bargraph d3

A horizontal bar chart displays country populations with bars extending rightward from the y-axis. The example loads data from a CSV file and renders it as SVG rectangles using D3 version 6. It employs `d3.scaleLinear` for the x-axis population scale, `d3.scaleBand` for the categorical y-axis, and `d3.csv` to parse the data. The visualization demonstrates basic data binding and SVG attribute manipulation with `selectAll` and `enter` selections.

FForemost123
76% match