EmnaAbbes

@EmnaAbbes·5 public vizzes

Fork of Reusable D3 Scatter Plot

This example presents a reusable D3.js scatter plot that visualizes the Iris Dataset, initially mapping petal width against sepal length. The plot animates by cycling through four data columns as the x-axis variable every two seconds. Built using D3 v6's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, it leverages a custom `scatterPlot` function with a fluent interface for configuration. The visualization renders as an SVG, with circles drawn via D3's `selectAll` and `join` operations, and uses the Share Tech font from Google Fonts.

Jan 14, 2023

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, compute scales, and render axes. Circles are drawn with SVG via `selectAll` and `join`, with coordinates transformed from data values to pixel positions. The plot fills the browser window and includes a 24-pixel tick font for readability. Data is fetched from a GitHub Gist, and parsing converts numeric fields with `+d`.

Jan 14, 2023

Loading thumbnail…

JavaScript

This example demonstrates a minimal JavaScript page that pairs HTML content with an empty script element. The page displays a static message, "Hello HTML!", within a styled div, while the accompanying JavaScript block remains unused and performs no operations. The visualization relies solely on standard HTML markup and inline CSS, with no external libraries, data sources, or rendering techniques employed. The code serves as a basic template for integrating HTML structure with JavaScript functionality, though in its current state it only renders the static text.

Jan 13, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates a minimal smiley face constructed from basic SVG elements, including circles for the face, eyes, and a stroke outline in yellow and black. The code shows how raw SVG markup in an HTML file can render static vector graphics without any external libraries. It uses standard SVG APIs for shapes and styling, with the face centered at (480, 250) within a 960×450 viewport. A small console.log statement in the script tag reveals basic JavaScript integration, but the visualization itself relies purely on SVG’s declarative rendering.

Jan 13, 2023

Loading thumbnail…

Fork of D3-1: Making a face

This example builds a cartoon face out of basic scalable vector graphics (SVG) shapes within a 960 by 500 canvas. It shows a yellow circle for the head, two blue eyes, a black-outlined mouth, and two rectangular eyebrows. The code uses D3 v7 selection and attribute methods, such as `d3.select` and `.attr`, to manipulate SVG elements, and the `d3.arc` API to generate the mouth's path. All coordinates are derived from the SVG's width and height attributes, with groups applied to style the eyes collectively.

Jan 13, 2023