Alina Sul

@Alina-sul·5 public vizzes

Bar chart

This example renders a simple bar chart using D3 v5 with SVG output within a React framework. Six hardcoded data values are displayed as vertical bars, with bars colored red for values 80 or higher and gray for lower values. Each bar’s height is twice its data value, and the corresponding number labels each bar. The chart uses D3’s `select`, `append`, and `attrs` methods to construct and style the SVG rectangles and text elements, with the page structured by an HTML file loading the D3 libraries and the chart script.

Mar 21, 2020

Loading thumbnail…

Basic Bar chart

This example presents a basic bar chart built with D3 v5 and React, rendering to SVG. The chart displays a static dataset of five values as vertical bars, with bar heights proportional to the numbers. The code defines a 500x500 SVG canvas, applies a padding of 2 pixels between bars, and positions each rectangle using a calculated x coordinate. D3’s data join pattern (selectAll, data, enter, append) creates the rectangles, while attributes like width, height, and y are set via arrow functions derived from the dataset.

Mar 21, 2020

Loading thumbnail…

Text with d3

This example demonstrates how to add text to an SVG visualization using D3.js within a React framework. It shows both a static SVG text element in the HTML and a dynamically inserted text node created through D3’s selection and append methods. The code uses `d3.select()` to target the body, chains `.append('svg')` and `.append('text')` to build the structure, and applies `.attr()` and `.style()` for positioning and orange fill color. The rendered SVG measures 600 by 100 pixels, with text placed at the bottom-left corner.

Mar 21, 2020

Loading thumbnail…

Drawing circles with d3

This example demonstrates two approaches to drawing a circle with D3, resulting in side-by-side red and blue circles. One circle is created directly in static SVG markup within the HTML, while the other is generated dynamically using D3’s selection and append methods, chaining `attr` calls to set the `cx`, `cy`, and `r` properties and `style` to fill the shape. The code uses `d3.select` and `d3.append` from the D3 v5 library to construct the SVG element and its circle child, showcasing basic programmatic SVG creation.

Mar 21, 2020

Loading thumbnail…

Drawing SVG rect with D3

This example demonstrates two ways to render a blue SVG rectangle: one statically defined directly in HTML markup, and another generated dynamically using D3’s selection and data-join methods. The code uses `d3.select` to append an `svg` element to the body, then chains an `append('rect')` call to set its width and height attributes via `.attr()` and its fill color via `.style()`. A hand-written `<rect>` element appears above as a visual comparison, while the D3-generated rectangle is rendered below, with both sharing the same dimensions and color.

Mar 21, 2020