Baji-2000

@Baji-2000·8 public vizzes

Fork of Fork of ICE-5: CSV Data with D3.js

This example demonstrates loading and parsing a CSV dataset from a remote URL using D3.js v7. The page displays a header, a message area, and an embedded SVG image of a panda. A script fetches the CSV via `d3.csv`, then computes and displays the dataset’s size in kilobytes, row count, and column count within a styled `<pre>` element. The code also includes a comment referencing the `Body.text` API, though it is not used in the implementation. The approach uses plain HTML, CSS, and vanilla JavaScript with D3’s CSV utilities.

Feb 28, 2022

Loading thumbnail…

Fork of dataset

This example displays a horizontal bar chart ranking the top 20 traded stocks on the B3 exchange by volume, using data from a local CSV file. The chart encodes the stock code on the y-axis and the trading volume on the x-axis. Built with D3 v5, the code imports specific functions like `scaleLinear`, `scaleBand`, and `axisBottom` to construct the visualization. The rendering is done through SVG elements, with bars styled in steelblue and custom axes, demonstrating a clean presentation of the dataset.

Feb 27, 2022

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face whose eyebrows animate upward and downward. It first builds the face using SVG shapes, including a red circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `arc` generator. The eyebrows then move repeatedly through chained `transition` calls, each lasting two seconds, shifting their vertical position on a continuous loop. The visualization relies on D3 selections and attribute methods to create and position elements within an SVG canvas.

Feb 20, 2022

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example uses the D3.js library to draw a simple emoji-like face, comprising a yellow circle head with black outline, two eye circles, and a semicircular mouth path. The visualization is built with React and rendered as SVG, using D3’s `arc` generator to create the mouth’s curved shape. Dimensions such as eye offset, radius, and mouth width are defined as constants, while absolute positioning is handled by translating a central group. The code demonstrates a minimal integration of React and D3 for static vector graphics.

Feb 20, 2022

Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows upward and back down in a repeating cycle. The face is composed of SVG shapes: a red circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth. The code uses D3 v5's selection and transition methods to move the eyebrow group via the `attr` tween. The animation runs on a 2000-millisecond duration for each movement phase, creating an infinite loop of eyebrow raises.

Feb 20, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Part I

This example shows a stylized smiley face built from basic SVG shapes: a black circle with an orange stroke for the head, two orange eyes, and an orange mouth. The visualization is rendered entirely with SVG and React, using D3’s `arc` generator to create the mouth path with a specified inner radius, outer radius, and angular start and end points. All shapes are positioned relative to a central transform, with explicit offsets for the eyes and mouth. The code relies on React 17 for component rendering and D3 v7 for arc calculation.

Feb 20, 2022

Loading thumbnail…

Fork of Smiley Face Part I

A stylized smiley face is drawn halfway, with a black circular head outlined in orange, two orange eyes, and an orange arc for the mouth. The face is centered within an SVG canvas, and the mouth arc is generated using the D3 `arc` generator with specified inner and outer radii and angle constraints. The shape is constructed declaratively with React, using explicit `circle` and `path` elements positioned via calculated constants.

Feb 20, 2022

Loading thumbnail…

Face emoji

This example renders a simple smiley face emoji using scalable vector graphics (SVG) with React’s JSX syntax. It draws a yellow circle with a black outline for the face, and two smaller black circles for the eyes, all positioned using computed constants for the center point, eye offsets, and radii. The SVG element’s width and height are set to fixed dimensions, and the body’s margin is removed with CSS to eliminate page scrollbars. The code uses React’s `ReactDOM.render` to mount the component into the DOM.

Feb 20, 2022