Arlind Pestisha

@ArlindPestisha·7 public vizzes

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, displaying summary statistics about the dataset. It fetches the CSS Named Colors CSV file and outputs the file size in kilobytes, the number of rows, and the number of columns using `d3.csv` and `d3.csvFormat`. The code also includes commented-out alternatives using the `fetch` API with `async`/`await` and `d3.csvParse`, as well as a nested promise approach. The result is rendered as large text inside an HTML `<pre>` element.

Sep 19, 2022

Loading thumbnail…

Fork of Stylized Line Chart

This visualization presents a stylized line chart comparing carbon dioxide emissions and per-capita emissions over time, using data from a CSV file hosted on GitHub. Built with React and D3 v5, it renders as an SVG with distinct axes and a smooth natural curve. The chart employs `scaleTime` and `scaleLinear` for axis scaling, with `line()` and `curveNatural` from D3 to draw the path, while custom React components for the bottom and left axes handle tick marks and labels. Styling is applied via CSS classes, using the Poppins font.

Sep 14, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL using both the Fetch API and D3.js, displaying the raw text in the console. It shows how to use `fetch` with promise chaining and `response.text()` to retrieve the data, while commented-out alternatives illustrate `d3.csv` and `d3.csvParse` with async/await. The code references a CSV file containing CO2 data, but the visible output is only the logged text; no visualization is rendered. The example serves as a technical tutorial on data loading patterns in JavaScript.

Sep 14, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example demonstrates the initial step in constructing a smiley face visualization, using a half-finished face as the focus. It fetches CO2 data from a GitHub-hosted CSV file via the `fetch` API, logging the response to the console. The code is minimal, setting up a blank canvas and preparing data ingestion, though it does not yet render any visual output or import visualization libraries like D3. The project’s core logic remains incomplete, highlighting the early development stage of the visualization.

Sep 13, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiley face rendered as a yellow circle with two black eyes and a curved mouth, all centered in an SVG canvas. The face is built using React components that calculate positions and dimensions from constants, while D3’s `arc()` generator creates the mouth’s path. React handles DOM updates, and D3 v5 provides the geometric shape calculation. The stroke, eye, and mouth radii are defined as variables, demonstrating a modular, parameterized approach to combining React’s declarative UI with D3’s drawing utilities.

Sep 13, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a single yellow circle rendered as a smiley face, drawn in an SVG using React components. The circle is centered dynamically based on the viewport dimensions, with a black stroke and fixed stroke width. The code uses React 16.9 and ReactDOM to render the SVG element into the DOM, with the circle’s position and radius calculated from width and height variables. The rendering approach relies on declarative JSX to define the SVG, and the interactive video demonstrates the implementation.

Sep 13, 2022

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black outline and two smaller black circles inside an SVG canvas forms a simple face. The example renders directly in the browser using inline SVG elements, with no external JavaScript libraries. The HTML page sets the body margin to zero and hides overflow, while the SVG is fixed at 960 by 500 pixels. This fork of a basic "Hello HTML" template demonstrates raw SVG markup for shapes and styling without any data binding or interaction.

Sep 13, 2022