DimitarDraganov

@DimitarDraganov·5 public vizzes

Let's make a face with D3.js!

This example demonstrates basic DOM manipulation with D3.js by building an animated smiley face from SVG shapes. It shows how to append and style circles for the face and eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows use chained `transition` calls to move up and down over two-second intervals, while the face is centered using a `g` element with a `translate` transform. The code imports `select` and `arc` from D3 and renders entirely in SVG.

Jul 5, 2020

Loading thumbnail…

Bar chart ex!

A bar chart displays population estimates for nine countries, with horizontal bars sorted by country name along the y-axis and population values on the x-axis. The visualization uses D3 v5 modules including `csv` for loading data, `scaleLinear` and `scaleBand` for scales, and `axisLeft`/`axisBottom` for axes. Bars are rendered as SVG `rect` elements with widths proportional to population, which is converted from thousands to absolute numbers. The chart updates once after the CSV data is parsed and processed.

Jun 20, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with a black outline and three eyes is drawn using D3.js. The shape is assembled from SVG circles, rectangles, and arc-generated paths for the nose and mouth. The code uses d3.select, d3.arc, and chained transitions to animate the eyebrows, which move upward and then back down over a two-second duration. The example demonstrates basic DOM manipulation and SVG rendering with D3 v5.

Jun 17, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how to create an SVG visualization that dynamically responds to browser resizing. It uses CSS fixed positioning to make the chart container fill the viewport, and then extracts the computed `clientWidth` and `clientHeight` to set the SVG element’s dimensions. The visualization draws two crossing green lines forming an X, demonstrating that the size is correct. The code uses D3 v5 for DOM selection and SVG element creation, and listens for window resize events to call the `redraw()` function, which updates the line coordinates to span the full width and height of the container.

Jun 16, 2020

Loading thumbnail…

HTML cars rep

This example displays a largely empty circular shape within an SVG, representing a repository of car-related HTML content. It uses a basic SVG `<circle>` element with a large radius, rendered inside an HTML page titled "Cars Repo." The visualization relies on minimal styling from a linked `styles.css` file, which includes classes for lines and paths with specific stroke properties, though the current markup does not yet apply them to any visible elements. The code does not demonstrate any data loading, dynamic interactions, or JavaScript libraries beyond the foundational SVG structure.

Jun 16, 2020