npk2001

@npk2001·3 public vizzes

Fork of Let's make a face with D3.js!

This example demonstrates how to construct a simple smiley face using D3.js, starting with a yellow circle for the head and two smaller black circles for the eyes. A quadratic Bézier path, defined using the `d` attribute with values like `M70,120 Q100,145 130,120`, draws the mouth. The code relies on D3’s `select` and `append` methods to manipulate the SVG elements directly, setting attributes for position, radius, fill, and stroke. It shows fundamental DOM manipulation with D3’s v5 API, using a blank SVG canvas with 960 by 500 pixels as the rendering surface.

Jan 20, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. The visualization is built with D3 v5 and rendered as SVG, with axes customized to improve readability. The code in index.js creates a face from circles and a path, though the main chart itself is not fully implemented in the provided snippets, which instead show a yellow smiley face drawn with `d3.select` and SVG primitives. Rendering uses the `d3` library within an HTML page that loads D3 from a CDN.

Jan 20, 2023

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how to build a simple face using SVG shapes—a yellow circle for the head and two smaller black circles for the eyes—positioned dynamically within an SVG canvas. The code selects the SVG element with d3’s `select` method, parses its width and height attributes, and appends the circles using method chaining with `attr` calls. Styling is applied via CSS classes and inline attributes, while the D3 v5 library is loaded from a CDN to handle the DOM manipulation.

Jan 19, 2023