A6 - Sequential Color Scale Bar Chart

100%

A6 - Sequential Color Scale Bar Chart

✓ Published1🌍 Public

Last edited Mar 21, 2024

Created on Mar 5, 2024

This example visualizes average temperatures across cities using a horizontal bar chart with a sequential blue color scale. It shows how temperature values map to color intensity, with a legend on the right providing the quantitative scale. The visualization uses D3.js v6 with d3.scaleSequential and d3.interpolateBlues for the color encoding, along with d3.scaleLinear and d3.scaleBand for the axes. A linear gradient legend displays the temperature-to-color mapping, and the data comes from a CSV file hosted on GitHub Gist. The chart includes axis labels and a title, with the bars' color intensity reflecting the average temperature for each city.

AI-generated description

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

Similar vizzes

Loading thumbnail…

A6 - Diverging Bar Chart in D3

This diverging bar chart compares average temperatures across cities, using a diverging color scale (blue to red) to show deviations from the mean baseline. The visualization renders as SVG via D3 v7, with bars extending left or right from the baseline depending on whether temperatures fall above or below average. It uses `d3.scaleDiverging` with `d3.interpolateRdBu` for coloring, `d3.scaleBand` for city categories, and a `d3.legendColor` legend. Data comes from a CSV file containing weather records, loaded with `d3.csv`, and the chart includes labeled axes and a title.

RRiya Mathur

88% match

Loading thumbnail…

A6_BarChart with Sequential Scale

This example visualizes the happiness scores of various countries using a bar chart where each bar’s color encodes its score through a sequential blue scale. The chart is rendered as an SVG in a React application, leveraging D3 v7 for scaling and axis generation, while the color mapping is handled by `d3.scaleSequential` with the `interpolateBlues` interpolator. The data is loaded via `d3.csv` from a GitHub-hosted dataset, and a legend is added using the `d3-legend` library to clarify the score-to-color mapping. The visualization highlights the relative happiness rankings across countries while making score differences visually intuitive through color intensity.

DDuc Pham

84% match

Loading thumbnail…

Diverging Bar Chart of Temperatures

This diverging bar chart displays average December 2016 temperatures for various station cities, with each horizontal bar extending left or right from a central zero axis to show below- or above-freezing values. The bars are colored using a sequential red-blue interpolator (`d3.scaleSequential` with `d3.interpolateRdBu`), ranging from blue for cold to red for warm temperatures. The visualization loads weather data via `d3.csv` and renders as SVG, using `d3.scaleBand` for the city axis, `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` for ticks, and the external `d3.legend` library’s `d3.legendColor` for a color scale legend. Hovering over a bar turns it red.

AAllen Ho

81% match

Loading thumbnail…

A6 - Color Scales in D3

This example demonstrates four distinct D3.js visualizations, each employing a different color scale type: a bar chart using a sequential color scale, a diverging bar chart with a diverging scale, a scatterplot with a qualitative scale, and a line chart. The code uses D3’s `scaleSequential`, `scaleDiverging`, and `scaleOrdinal` APIs to map data values to colors. Each chart is rendered using SVG elements created via D3’s `select` and `append` methods. The visualizations are embedded as standalone pages, with the bar chart and diverging chart showing categorical comparisons, while the scatterplot and line chart reveal patterns across continuous variables.

DDuc Pham

81% match

Loading thumbnail…

ICE6-BAR graph fork Yashwanth with D3.js

This bar chart visualizes average temperatures for multiple cities, with each city represented by a blue rectangle and the y-axis encoding temperature values. The visualization uses D3.js v5 scales (scaleBand for the x-axis, scaleLinear for the y-axis) alongside React hooks to manage CSV data loading and rendering. Axes are generated using d3.axisBottom and d3.axisLeft, while the temperature data is loaded from a remote CSV file. The chart includes labeled axes for "Cities" and "Temperature," with a 10-unit headroom added to the y-axis maximum for visual spacing.

YYashwanth0311

80% match

Loading thumbnail…

Colors

This example uses the Sense Your City API to visualize temperature data from seven cities. A line chart shows temperature trends over the past 24 hours for each city, while a bar chart displays current temperatures. Colors code the lines to the city, with palettes generated automatically using the LAB color space for optimal distinctness. The visualization updates every five minutes, and the line and bar charts are built with reusable D3.js modules, animated via SVG.

CCurran Kelleher

79% match

Loading thumbnail…

[A6] Min Temp Readings from Alabama Weather Stations on 01/03/2016 (Bar Chart with a Sequential Color Scale)

This example visualizes minimum temperature readings from Alabama weather stations on January 3, 2016, using a bar chart with a sequential color scale. Each bar’s height and fill color encode the recorded minimum temperature, ranging from light blue for cooler readings to dark blue for warmer ones. The chart includes axes for weather station location and temperature in degrees Fahrenheit, along with a horizontal legend showing the color gradient. The code uses D3 v7 to load CSV data via `d3.csv`, apply `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateBlues` for color mapping, while the legend is rendered with the `d3.legendColor` helper from the d3-legend plugin.

Cctan13@dons.usfca.edu

78% match

Loading thumbnail…

Temperature across cities

This example visualizes temperature variations across multiple cities over a one-week period, with each city represented as a distinct colored line. The chart displays time on the x-axis and temperature on the y-axis, and includes a color legend identifying each city. Data is loaded from a CSV file using `d3.csv`. The visualization uses `d3.line` with `curveBasis` to generate smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.nest` to group data by city, and `d3.scaleOrdinal` with `schemeCategory10` for colors. A custom `colorLegend` component provides the interactive legend, and the rendering uses SVG with animated transitions on legend updates.

BB Sundaresan

78% match