Skip to main content
Log in
A

Adira4300

@Adira4300·7 public vizzes

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 392 cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red circles mark each vehicle, with axes labeled and a title displayed. The code uses D3 v5’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data, map values, and render SVG axes. Tick marks extend across the chart, while circle opacity is set in CSS for readability.

Apr 5, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries using data from the United Nations World Population Prospects 2019, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` for categorical positioning and `scaleLinear` for population values, rendering marks as SVG rectangles. The code implements custom `AxisBottom` and `AxisLeft` components for ticks, applies a Poppins font, and includes tooltips via SVG `<title>` elements. Population values are formatted using D3’s `format` function to abbreviate large numbers.

Apr 5, 2020
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying the text “Hello HT” centered in the browser window. The page uses plain HTML and inline CSS to set the text alignment and a large font size of 13em. No external libraries or JavaScript are included, making it a bare-bones starting point for web-based projects. It demonstrates the fundamental structure of an HTML document with a title, style block, and body content.

Apr 5, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond dynamically to browser window resizing. It shows a full-page SVG containing a large green X shape, where the X’s endpoints are recalculated to match the current viewport dimensions whenever the window is resized. The code uses `d3.select` to append an SVG element to a fixed-position chart container, then defines a `redraw` function that reads the container’s `clientWidth` and `clientHeight` properties to update the SVG’s `width` and `height` attributes. It binds the X’s line coordinates through D3’s data join pattern, and registers the `redraw` function as a listener for the browser’s `resize` event.

Apr 5, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can adapt to browser resizing by redrawing an SVG to fill the available viewport. A green, semi-transparent X is rendered across the entire chart area, with its coordinates recalculated on every window resize event. The code uses `d3.select` to manage the SVG element and the native `window.addEventListener("resize")` to trigger the redraw function, which reads the container’s `clientWidth` and `clientHeight` to set the SVG’s dimensions. The data comes from a CSV file, though it is only logged to the console and not visualized here.

Apr 5, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates a D3.js visualization that fills the entire browser window and dynamically adapts to resizing. An SVG element is resized to match the CSS-computed client dimensions of its container, while two thick, semi-transparent green lines are redrawn to form an X spanning the full width and height. The code uses D3’s selection API (`d3.select`, `.append`, `.merge`) to manage the lines, and relies on the `clientWidth` and `clientHeight` properties plus a window `resize` event listener to trigger redrawing.

Apr 5, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates a D3.js visualization that fills the entire browser window and dynamically adapts to resizing. An SVG element is resized to match the CSS-computed client dimensions of its container, while two thick, semi-transparent green lines are redrawn to form an X spanning the full width and height. The code uses D3’s selection API (`d3.select`, `.append`, `.merge`) to manage the lines, and relies on the `clientWidth` and `clientHeight` properties plus a window `resize` event listener to trigger redrawing.

Apr 5, 2020