Ezhil-Kalai

@Ezhil-Kalai·10 public vizzes

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. The chart customizes both axes by removing domain lines, styling tick labels and lines via CSS, and formatting population numbers with `d3.format` to display abbreviations like "B" for billions. The code uses `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisLeft` and `d3.axisBottom` for axes, and renders in SVG with React, loading data from a CSV file.

Feb 26, 2023

Loading thumbnail…

Making a Bar Chart

This example creates a horizontal bar chart of country populations using React and D3 v7, rendering to SVG. It loads data from a CSV file and uses `d3.scaleLinear` and `d3.scaleBand` to map population values and country names to positions, with `d3.axisLeft` and `d3.axisBottom` generating the axes. The bars are drawn as `rect` elements appended to a grouped SVG container.

Feb 26, 2023

Loading thumbnail…

Making a face - Ex 1

A face made of simple SVG shapes—a yellow circle, two eyes, eyebrows, and a curved mouth—animates gently on a dark background. D3 v7’s `select` and `append` methods build the graphic, while `transition` chains smoothly move the eye group, eyebrows, and mouth through two-second cycles. The path for the mouth is generated using the `arc` API. This example demonstrates basic D3 transitions and shape construction from scratch.

Feb 25, 2023

Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face in the browser using D3.js, with a yellow circular head, eyes, eyebrows, and a simple mouth. The code constructs the face by appending SVG shapes—circles, rectangles, and an arc path—to a central group element. An animation is applied to the eyebrows using chained `transition()` calls, causing them to rise and fall over two-second intervals. The visualization uses D3's `select` and `arc` functions, and renders entirely as SVG without any external data source.

Feb 25, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered "Hello HTML!" message using CSS styling within an HTML page. The page relies on standard HTML elements and a CSS class to control the font size and text alignment. It demonstrates the fundamental structure of an HTML document, including a `<head>` with embedded styles and a `<body>` containing the visible content. The code uses no JavaScript libraries or external frameworks, serving as a minimal illustration of static web page rendering.

Feb 25, 2023

Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is rendered as a circle using SVG within a React framework. The code utilizes `d3.csv` to load and parse the data, `d3.scaleLinear` for axis scaling, and `d3.extent` to determine data domains. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while the chart dynamically fills the browser window's dimensions.

Feb 24, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3 - Grouping - SVG

This piece reproduces a Sol LeWitt drawing using D3 to render alternating horizontal and vertical striped rectangles. It uses two SVG masks to create a cross-hatched effect: the first mask shows white bars on black, the second shows black bars on white, and each displays a series of 100 geometric symbols across the center. The code employs `d3.select`, `d3.range`, and the `d3.symbol` API to draw the paths, generating a patterned composition that responds to the browser window size.

Feb 24, 2023

Loading thumbnail…

D3 Selection

Animated circles in navy float across the screen, their sizes and vertical positions oscillating smoothly in a wave-like pattern that changes over time. The number of visible circles also fluctuates rhythmically, creating a dynamic, generative composition. Using D3.js v6 with SVG, the code computes coordinates from trigonometric functions and a time variable within a `setInterval` loop. It employs the data-join pattern with `.selectAll`, `.data`, and `.join` to update circle attributes continuously, demonstrating D3's core selection mechanics in a responsive full-viewport canvas.

Feb 24, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js within a React framework. It displays a grid of thin, evenly spaced horizontal and vertical bars rendered as SVG rectangles. Two circular masks are applied to these rectangle groups, causing the horizontal bars to fade out in the center and the vertical bars to fade out in a ring pattern, creating a subtle visual interplay. The code leverages D3's selection and range APIs to generate the marks efficiently.

Feb 23, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by rendering a grid of horizontal and vertical bars across the full viewport, with circular masks that reveal or hide portions of the pattern. The visualization uses D3’s `select` and `range` functions to generate 100 rectangles in each direction, applying masks defined via SVG `<mask>` elements with white and black circles. The code constructs the SVG scene programmatically, showing how React-based projects can manipulate vector graphics through D3’s data-join syntax and attribute setters.

Feb 23, 2023