Skip to main content
100%

Make a Viz Responsive

✓ Published2🌍 Public
JJingxuan Yang
Last edited Feb 13, 2024
Created on Feb 13, 2024

This example demonstrates a responsive D3.js scatter plot that maps house sale data from the kc_house_data dataset, showing the relationship between the number of bedrooms and living area in square feet. The visualization uses D3's `scaleLinear` and `extent` functions to scale the axes and renders data points as circles with configurable radius and opacity. It leverages the custom `@RenoBlitz/responsive-axes` library and `observeResize` function to dynamically adjust the plot’s dimensions and axis labels based on the container’s size. The axes, labels, and inner rectangle background are all redrawn automatically when the viewport resizes, ensuring the chart remains legible at any screen width.

AI-generated description

A simple scatter plot with D3 showing the kc_house_data

Challenge

  • Fork this viz
  • Modify it to show your data
MIT Licensed

Similar vizzes