Skip to main content
SimilarExport ZIP
100%

Respond to resize

✓ Published0🌍 Public
CCJKraenzle
Last edited Oct 15, 2017
Created on Oct 15, 2017

This responsive scatter plot, built with D3 v4, visualizes World Happiness Report data, scaling both the chart and its axes to fill the screen. Unlike views that preserve aspect ratio, this block resizes width and height independently, so circles, axis fonts, and padding all grow proportionally with the chart. The animation responds smoothly to window resizing, with the x-axis representing GDP per capita and the y-axis showing life ladder scores across countries and years.

AI-generated description

Built with blockbuilder.org

The data comes from the World Happiness Report. Direct link to the data download can be found here.

The work for this block was developed locally using Curran Kelleher's dataviz-project-template as a starting point and also used the block World Happiness Ranking.

The focus of this block is to scale both the chart and axes to take up the full screen. We do not maintian view ratio. We scale for width and height individually. Note that as the chart gets bigger the circles in the scatter plot get bigger, same with axes fonts and chart padding for the axes.

mit Licensed

Similar vizzes

Loading thumbnail…

Responding to Resize

This example demonstrates a responsive D3.js visualization that adapts automatically when the browser window is resized. It shows a large green X drawn across an SVG canvas that fills the entire viewport. The code uses the `clientWidth` and `clientHeight` properties of the chart container to measure the CSS-computed dimensions, then applies those values to the SVG via `attr("width")` and `attr("height")`. A `redraw` function, triggered by a `resize` event listener, re-renders the X marks to match the updated size.

AAnton Bodnya
75% match
Loading thumbnail…

Interactive Scatter Plot and Responsive Axes

This interactive scatter plot visualizes Olympic participation, showing the number of participating countries per year. The visualization uses D3.js scales and axes, with a ResizeObserver to detect container dimensions and update the chart responsively. Axis tick density is calculated based on the inner width and height, ensuring consistent spacing across different screen sizes. The code includes a complete modular approach with separate files for axes, labels, and resize observation, featuring animation on circle hover.

AAkanksha
75% match
Loading thumbnail…

Interactive World Happiness Scatter Plot with Colored Menu

This scatter plot explores the relationship between the World Happiness Report’s happiness score and factors like GDP, school years, or employment rate, for a dataset of 156 countries. Two dropdown menus let viewers select which attributes appear on the x- and y-axes. Each country is plotted as a circle colored by whether it is considered a “happiest country,” and the interactive legend highlights points of that category while dimming others. The visualization is built with React and D3 v5, using `scaleLinear`, `scaleOrdinal`, and SVG rendering.

Mmkt-ds
75% match
Loading thumbnail…

Responding to Resize

This example shows a bar chart of population by country that redraws its X-shaped guide lines whenever the browser window is resized. The code uses `clientWidth` and `clientHeight` to extract the computed CSS dimensions of the chart container, then sets the SVG’s `width` and `height` attributes accordingly. It employs a `window.addEventListener("resize", redraw)` to trigger the update. The bar chart itself is built with `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, using population data loaded from a CSV file.

LLittledevil7
74% match
Loading thumbnail…

Fork of Scatter Plot of Happiness and Y axis attributes

This interactive scatter plot explores the relationship between the rate of depression across all ages and selected well-being indicators from the World Happiness Report. Users can switch between economy, social support, generosity, freedom, and perception of corruption using a dropdown menu, which updates the y-axis and its label. Built with React and D3 v5, the visualization uses D3’s `scaleLinear` and `extent` to compute scales, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG axes and circles. Point positions are set via `cx`/`cy` attributes, with tooltips formatted using D3’s `format`.

NNikithakatta30
74% match
Loading thumbnail…

Scatter Plot of Happiness and Y axis attributes

This scatter plot visualizes the relationship between happiness scores and several country-level attributes, including economy, social support, generosity, freedom, and perceived corruption, using data from the World Happiness Report. An interactive dropdown menu allows the viewer to switch the y-axis attribute, updating the visualization dynamically. The plot is rendered as an SVG using React and D3 v5, with `d3.scaleLinear` handling axis scaling and `d3.extent` and `d3.format` for domain and tick formatting. Axis components and data marks (circles) are implemented as reusable React components, with tooltips showing the happiness score on hover.

NNikithakatta30
74% match
Loading thumbnail…

Responding to Resize

This example demonstrates how a visualization can respond dynamically to browser resizing. It uses a full-page chart container defined with CSS and renders an SVG element whose width and height are updated on every resize event. The SVG draws two diagonal green lines forming an X, using data joins to update the line coordinates based on the container’s current client dimensions. The code relies on the D3 v5 library and the window’s resize event listener to trigger the redraw function.

NNick Dyson
73% match
Loading thumbnail…

Responsive Axes

This example demonstrates how to build a responsive scatter plot visualization with labeled axes using D3.js. It renders a gray inner rectangle with linear scales for the x and y axes, both of which dynamically adjust their tick count based on the chart's dimensions. The code uses a ResizeObserver to monitor the container size and automatically update the SVG’s width and height on resize. Axes are drawn with `axisBottom` and `axisLeft`, while labels are added as rotated text elements, showcasing a modular structure split into separate axis and label modules.

JJingxuan Yang
73% match