Skip to main content
SimilarExport ZIP
100%

Responding to Resize

✓ Published0🌍 Public
Ppaularl
Last edited Jan 26, 2020
Created on Jan 23, 2020

A bar chart ranks ten Brazilian electricity distributors by consumer count, using a horizontal categorical axis and a linear vertical scale. The visualization highlights a selected company in teal while others remain gray, responding to clicks that update the selection and re-render the chart via a callback. SVG rendering with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` displays the data, while `d3.zoom` enables panning and zooming on the chart group. The chart also includes rotated axis labels and tooltips showing each company’s exact consumer numbers.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bar viz using d3 testing

This example displays horizontal bars ranking the top 20 most-traded securities on Brazil’s B3 exchange by volume, with tick labels formatted using d3’s `format('.3s')`. The chart is built in SVG using D3 v5, loading data from a CSV via `csv()`, scaling values with `scaleLinear` and `scaleBand`, and rendering axes via `axisBottom` and `axisLeft` in a straightforward bar-viz demonstration.

Mmomopng
75% match
Loading thumbnail…

Simple bar chart with custom axes

A simple bar chart displays the ten most populous countries using population data from a CSV file, with country names on the y-axis and population values on the x-axis. The chart uses custom axes that convert large numbers from the d3.format('.3s') format (such as G for billions) to B for billions, and removes the default axis domain lines. Built with d3.csv, scaleLinear, scaleBand, axisLeft, and axisBottom, the visualization renders red bars in an SVG element with a Roboto Mono font and a title in Portuguese.

RRodolfo Viana
73% match
Loading thumbnail…

Fork of Fork of dataset

This bar chart displays the top 20 most heavily traded stocks on the Brazilian B3 exchange, with horizontal bars ranked by trading volume. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG. Data is loaded from a CSV file via `d3.csv` and parsed into numeric values. The chart includes a title, axis labels, and a button element whose click behavior is partially implemented in a separate ES6 module.

SSheshidharreddy
73% match
Loading thumbnail…

Responding to Resize

This example demonstrates how a bar chart responds to window resizing, presenting population data for ten countries from a CSV file. The visualization uses an SVG canvas and relies on D3 v5’s `select` and `csv` methods to load and parse the data. While the initial code only logs the parsed data to the console, the chart’s structure is set up to dynamically adjust its dimensions when the browser window changes size, ensuring the visualization remains proportional and readable.

Ooceanecharlery
72% match
Loading thumbnail…

Making a Bar chart

This bar chart displays the populations of ten countries in descending order, using horizontal bars ranked from largest to smallest. The visualization is built with D3 v5, loading data from a CSV file and rendering SVG elements. It employs `scaleLinear` and `scaleBand` for the x and y axes, respectively, with data-driven rectangles and axis generators (`axisLeft`, `axisBottom`).

Llipeoliveira
72% match
Loading thumbnail…

Electric Bar Chart Before Stack Refactoring

This bar chart visualizes personal electricity consumption across two years, with bars colored by account number to distinguish usage among three household accounts. Rendered in SVG with D3 v6, the visualization uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` to position and color the bars, with hover interactions transitioning fills to grey. Data is loaded via D3’s `csv` from a GitHub gist, and axis labels, a title, and a legend are generated using `axisLeft`, `axisBottom`, and custom text elements.

PPeter Cordone
72% match
Loading thumbnail…

making a bar chart

This example shows a horizontal bar chart ranking the populations of ten countries, from largest to smallest. The visualization uses a linear scale to map population values to bar widths and a band scale to position the categorical country labels, with axes rendered using d3.axisBottom and d3.axisLeft. The SVG is drawn using D3 v5, with data loaded from a CSV file via d3.csv and population values converted to numbers before rendering. Bars are appended as SVG rect elements with a steelblue fill.

Jjingwg3@163.com
72% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays population estimates for ten countries, with horizontal bars ranked by population size from largest to smallest. Rendered as SVG, the visualization uses D3 v6 scales to map population values to bar lengths and country names to bar positions. Its axes come from D3’s `axisLeft` and `axisBottom`, while bar heights rely on `scaleBand`’s bandwidth. Hovering over a bar turns it dark blue. The data loads from a CSV file via `d3.csv` and is preprocessed by multiplying each population value by 1,000, reflecting the source’s units in thousands.

MMatthew Rubino
72% match