Fork of d3 bar sequential

100%

Fork of d3 bar sequential

✓ Published0🌍 Public

Last edited Mar 5, 2024

Created on Mar 5, 2024

This bar chart shows the distribution of disease types in 1968, using a sequential color scale to encode the number of infections from light to dark orange. The chart displays each disease category as a separate bar, with the color intensity reflecting the infection count. Built with D3 v6, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with the ColorBrewer OrRd scheme to map values to colors. A legend, created with the d3-legend library, accompanies the chart, and the data is loaded from a CSV file. The SVG rendering includes labeled axes for disease type and infection numbers, with the chart styled on a black background.

AI-generated description

A bar chart using a sequential color scale with color brewer in D3

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://corgis-edu.github.io/corgis/csv/global_development/

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 bar sequential

This example visualizes the distribution of infectious diseases in 1968 using a sequential bar chart, with each bar’s height and color intensity encoding the number of infections. The chart employs a sequential color scale based on ColorBrewer’s OrRd scheme, mapping values from 0 to 150,000, and includes a legend generated with the d3-legend library. The visualization is rendered as SVG using D3 v6, with axes, labels, and a dark background for contrast. The data, simplified from the CORGIS Global Development dataset, is loaded from a CSV file, and the chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the quantitative y-axis.

AAndrew

93% match

Loading thumbnail…

d3 bar chart

This bar chart visualizes the distribution of disease types by number of infections in 1968, using a logarithmic y-scale to accommodate wide value ranges. Built with D3 v6, it renders SVG rectangles with maroon fills that transition to crimson on hover, supported by an interactive tooltip displaying exact infection counts. The chart includes labeled axes, a title, and data simplified from the CORGIS health dataset, demonstrating the use of d3.scaleBand, d3.scaleLog, d3.axisBottom, and d3.axisLeft.

AAndrew

89% match

Loading thumbnail…

Fork of HTML Starter

This bar chart visualizes the distribution of diseases in 1968, showing the number of infections for each disease type. Built with D3 v6 and SVG, it uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.axisBottom`/`d3.axisLeft` for axes. The dataset is loaded via `d3.csv` from a GitHub Gist URL. Interactive tooltips appear on mouseover, displaying infection counts, implemented with D3 selection and event handlers.

AAndrew

86% match

Loading thumbnail…

A6 - Bar Chart w/ Sequential Color Scale

This example visualizes new AIDS diagnoses in 2020 for six countries, using a horizontal bar chart where bar height encodes the diagnosis count and a sequential red color scale encodes the same quantitative value. The visualization includes an axis, gridlines, and a legend for the color scale. The chart is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateReds` for the color mapping. The legend is generated via the `d3.legendColor` API. Data comes from UNAIDS via CORGIS.

AAndrew Blakeslee Moore

80% match

Loading thumbnail…

D3 - Sequential scale bar chart

This example visualizes life expectancy across different countries using a bar chart where bar colors are mapped through D3’s `scaleSequential` with an `interpolateRgb` gradient from lightgreen to darkgreen. The chart loads CSV data via `d3.csv` from a GitHub gist, renders SVG bars with `d3.axisBottom` and `d3.axisLeft` for axes, and includes a sequential color legend generated by the `d3-legend` plugin. The code explicitly sets the color scale’s domain slightly beyond the data range and applies it to each bar’s fill, while the chart’s background, title, and axis labels are all configured inline.

CChandana Srinivas

77% match

Loading thumbnail…

A6 Sequential Color Barchart

This example visualizes total cancer deaths by U.S. state using a sequential color barchart. The bars encode the death count by height while their color reflects the death rate per 100,000 people, ranging from light to dark red. Hovering over a bar reveals precise values via a native title tooltip. The chart is built with D3 v7, using `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.scaleSequential` with `d3.interpolateReds` for color, and the `d3-legend` plugin to display the color threshold legend. Data comes from the CORGIS dataset, rendered as SVG.

NNoah C.

77% match

Loading thumbnail…

Untitled Document

This interactive D3.js visualization displays a grouped bar chart showing the frequency of drug categories (1-6) across different survey categories (2-5), with each group further broken down into colored sub-bars. The chart uses d3.scaleBand for the grouped axes, d3.scaleOrdinal for color encoding, and d3.nest for hierarchical data aggregation. Bars animate from zero to their final heights using randomized delays with SVG transitions. The visualization is built on D3 v4 and Bootstrap, reading data from a local CSV file.

GGerardoFurtado

76% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart visualizes total COVID-19 cases across eleven countries, using a horizontal layout with a blue-pink gradient fill for bars. The visualization customizes both axes: the y-axis removes tick lines and domain, while the x-axis formats values using D3’s `format` function (e.g., converting to compact notation) and includes a labeled axis title. Data is loaded from a CSV file using `d3.csv`, with scales created via `scaleLinear` and `scaleBand`. Text elements also feature gradient fills, and margins are explicitly set to position the chart within an SVG canvas.

RRohit-2710

76% match