kaddindr

@kaddindr·6 public vizzes

Fork of Customizing Axes

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 highlights customized D3 axes: the left axis uses no domain or tick lines, while tick text is enlarged and colored. The code leverages d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render the SVG, with population values scaled by 1000 in the data loading step.

Jun 2, 2021

Loading thumbnail…

Bar Chart Practice

This bar chart practice visualization displays population data for ten countries, with each country represented by a horizontal bar scaled proportionally to its population. The example loads data from a CSV file and renders the chart as an SVG using the React framework and D3 v6's `scaleLinear`, `scaleBand`, `select`, and `csv` API functions. The bars are drawn via D3's selection and data join methods, with the y-axis assigned to country names and the x-axis to population values.

May 27, 2021

Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, set against a red background. Two smaller circles create the eyes, while a thick arc-shaped path forms the mouth. The drawing is centered using an SVG `g` element and a `translate` transform. The code uses d3’s `select` and `append` to build the SVG structure, and the `arc` generator to define the mouth’s path, with all coordinates calculated relative to the canvas center.

May 27, 2021

Loading thumbnail…

Smiley Face Part 1 Old

This example displays a classic yellow smiley face with two eyes and a wide mouth, drawn using SVG circles and a path. The face is centered within a 960 by 500 pixel canvas, with all geometric properties (center, eye offsets, radius, and stroke width) defined as constants. The mouth is generated using the D3 arc generator, which creates a semicircular path through the `arc()` API. The visualization is built with React, where the `App` component returns an SVG element, and is rendered to the page via `ReactDOM.render`. The code uses D3 v5 and React 16.9.0.

May 26, 2021

Loading thumbnail…

Smiley Face Part 1

This example presents a static SVG smiley face composed of a large yellow circle with a black outline, two smaller circles for eyes, and a mouth drawn as a semi-circular arc. The visualization is built using React and D3 v5, with dimensions and positions calculated from the width and height of the canvas. The mouth is generated using D3’s `arc()` API, which creates an SVG path for a semicircle, while the eyes and face are drawn as basic SVG circle elements.

May 25, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes and transformations within an HTML page. A circle and rect are rendered at their original positions, then duplicated with a vertical translation, blue fill, and red stroke. A group with class "lines" contains a line and a path, with CSS rules applying stroke styling to all line elements and a custom teal color to the path. It uses plain SVG markup with CSS classes and inline attributes, and does not employ JavaScript or external libraries.

Apr 26, 2021