Skip to main content
SimilarExport ZIP
100%

White Hat Bar Chart

✓ Published0🌍 Public
PPranay Matalia
Last edited Apr 26, 2022
Created on Apr 26, 2022
Forked from HTML Starter

This example shows annual rainfall totals from 2014 through 2021 as a simple bar chart, with each bar’s height encoding millimeters of rain and axes labeled for both year and rainfall length. The visualization is built with D3 v7 in an SVG container, using `d3.scaleBand` to position bars and `d3.scaleLinear` to map rainfall values to pixel heights. The code loads data from an external CSV file via `d3.csv`, then renders bars with `container_g.selectAll(".bar")` and adds bottom and left axes using `d3.axisBottom` and `d3.axisLeft`. A rotated text label and custom tick format (`d + "mm."`) annotate the chart.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Black Hat Bar Chart

This bar chart visualizes yearly rainfall data, with a fixed y-axis scale from 5 to 15 mm and bars colored steelblue via a CSS class. The chart uses D3 v7’s `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for tick rendering. Data loads from a CSV file using `d3.csv`, and the SVG is generated procedurally in a React-free vanilla JavaScript setup.

PPranay Matalia
90% match
Loading thumbnail…

Diverging Color Bar Chart

This example visualizes annual rainfall data as a diverging color bar chart, showing deviations from the mean of 1215.2mm. Bars are colored on a red-white-green linear scale, with positive deviations in green and negative in red, anchored at zero. Built with D3 v7 in SVG, it uses d3.scaleBand for the x-axis, d3.scaleLinear for both y-values and color, and the d3-legend library for a sequential color legend. Data is loaded asynchronously from a CSV file.

PPranay Matalia
83% match
Loading thumbnail…

Rainfall

This visualization shows monthly effective rainfall measurements over time as a histogram of steelblue bars. The chart maps dates on a time-scaled x-axis and rainfall values on a linear y-axis, using D3 v5’s `scaleTime`, `scaleLinear`, and `axisBottom`/`axisRight` APIs. SVG rectangles are bound to data from a CSV dataset, with each bar’s height determined by the `EffectiveRainfall` value. The code loads the external CSV via `d3.csv` and parses dates with `timeParse` before rendering.

SShane Carey
79% match
Loading thumbnail…

making a bar chart

This example shows annual snowfall totals from 1999 to 2018 using a simple bar chart built with D3 v5. It renders SVG rectangles that are appended to the chart, with each bar’s width fixed at 300 pixels, though the height is not yet encoded from the data values. The visualization relies on `d3.select` and `d3.csv` to load the dataset, and the code converts the snowfall field to numbers before logging the parsed data to the console. The chart is styled with a full-viewport SVG and minimal CSS.

Llemonyunyun
79% match
Loading thumbnail…

Bar and Line chart

This example displays a dual-axis chart combining bars for effective rainfall and a line with points for water level over time. The visualization uses two scales, time on the x-axis, and separate linear scales for the bar and line values. Panning and zooming are implemented via d3.zoom, rescaling both axes and updating the shapes. Data is loaded from two CSV files using d3.csv, and all elements are rendered as SVG.

SShane Carey
78% match
Loading thumbnail…

Year wise rainfall analysis

This area chart visualizes average annual rainfall in millimeters across different years, with the x-axis representing years and the y-axis showing rainfall amounts. The visualization uses a purple gradient fill beneath the line to emphasize the trend over time. Built with d3.v5, the code leverages `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisLeft`/`axisBottom` to generate the SVG rendering. Data is loaded from a CSV file via `csv()` and parsed with `new Date()` for the year values. The chart includes labeled axes and a title, styled with custom CSS classes.

Nnavyasrimeka9@gmail.com
77% match
Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example shows seasonal average rainfall across multiple years as a 3D bar chart. It uses the d3-x3d library’s `barChartMultiSeries` component to render the bars in an X3DOM scene. The code loads CSV data, parses each year into winter, spring, summer, and autumn values, and binds that data to the chart container. The visualization relies on D3 v5 for data processing and selection, with d3-3d and X3DOM providing the 3D rendering.

Nnavyasrimeka9@gmail.com
77% match
Loading thumbnail…

Bar chart TT

This example displays a vertical bar chart of yearly values from a CSV file, using D3 v4 (loaded via both a CDN link and the `d3.v4.js` script). The visualization uses SVG rendering with the `d3.select` and `d3.scaleBand`/`d3.scaleLinear` APIs to map years and values to bar positions, while `d3.axisBottom` and `d3.axisLeft` generate the axes. The bars are drawn as `rect` elements, styled with a class from the provided CSS.

Hhanulik.ondrej@gmail.com
77% match