I

Ilgar Akalın

@d00dy89·16 public vizzes

Loading thumbnail…

Temperature Time Series

This visualization displays a blue line graph tracking temperature over time, with points plotted by date and temperature values. The data originates from an Istanbul CSV file fetched via D3’s `csv` function. Built with Vega-Lite API and D3 v5, the chart uses `vl.markLine` with an x-axis encoding `fieldT('dates')` and a y-axis encoding `fieldQ('temperature')`, configured with `scale({ zero: false })` for a focused range. The visualization auto-sizes to the window and includes tooltips showing temperature values.

Loading thumbnail…

Pie chart with react

A pie chart displays the relative frequency of named CSS colors, with each slice filled by its corresponding RGB hex value. The visualization loads CSV data via `d3.csv` and uses React's `useState` and `useEffect` hooks to manage asynchronous data fetching and component state. D3's `pie` and `arc` generators compute the slice geometry, which React renders as SVG `<path>` elements. The example demonstrates unidirectional data flow and mouse-event readiness within a React-D3 integration.

Loading thumbnail…

Rendering CSV named colors with React

This example visualizes the 148 CSS named colors as horizontal color bars stacked vertically, with each bar’s background color set from the CSV’s “RGB hex value” column. It demonstrates unidirectional data flow in React, loading the dataset via D3’s `csv` utility inside a `useEffect` hook and managing the async result with `useState`. The app renders a “Loading…” message until the data arrives, then maps each row to a styled `<div>` element, with mouse events available for user interaction. The code uses React 16.13.1, ReactDOM, and D3 v6.

Loading thumbnail…

Loading Data with React D3

This example demonstrates a simple React application that loads a CSV dataset of CSS named colors from MDN using D3's `csv` utility. The interface displays a loading message until the data arrives, then summarizes the dataset by converting it back to a formatted string with `d3.csvFormat` and reporting the file size, row count, and column count. It uses React's `useState` and `useEffect` hooks to manage asynchronous data loading and state updates, following a unidirectional data flow where the fetched data is passed directly into the React state. Mouse events are not handled in this visualization, which focuses solely on the data ingestion and basic summary.

Loading thumbnail…

Smiley Face Part VI (Compartmentalization Complexity)

A grid of fifteen randomly colored smiley faces demonstrates how React component nesting and the children prop scale complexity in D3-based SVG visualizations. Each face is built from separate reusable components—BackgroundCircle, Eyes, and Mouth—with the Mouth using d3.arc to generate a path. The code maps an array from d3.range and applies random eye radii and hex colors per instance.

Loading thumbnail…

Marks & Channels

This visualization shows the relationship between engine displacement, miles per gallon, horsepower, and country of origin for a sample of automobiles. Using Vega-Lite’s API, it renders a scatterplot where point positions encode displacement and MPG, color encodes origin, and size encodes horsepower, while tooltips reveal additional details. The data is loaded asynchronously via D3’s CSV parser, and the chart is configured with custom axis and label styling for readability.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle weight against horsepower while encoding origin via color and mpg through circle size. The code uses the Vega-Lite API to declaratively construct the scatter plot, registering Vega, Vega-Lite, and Vega-Tooltip for rendering and interactivity. D3’s `csv` function loads the remote data, while custom configuration adjusts axis styles and font sizes. The visualization fills the window, with tooltips displaying vehicle origin on hover.

Loading thumbnail…

Parsing CSV with D3

This example demonstrates how to parse CSV data with D3, displaying a concise summary of the dataset's size and structure. It fetches a CSS named colors CSV from a GitHub gist, then uses `d3.csv` to asynchronously load and parse the data. The code counts the rows and columns, estimates the file size in kilobytes using `d3.csvFormat`, and presents the results as text in a `<pre>` element. An alternative commented-out approach using `fetch`, `d3.csvParse`, and `csvFormat` is also included.

Loading thumbnail…

Interaction with React

This example demonstrates a React-based SVG visualization where a circle follows the mouse pointer across a 960-by-500 viewport. It shows how mouse events and unidirectional data flow manage interactive state in React, using the `useState` hook to track cursor coordinates and `useCallback` for the event handler. The single-circle rendering, with a white inner circle, updates its `cx` and `cy` attributes on every `onMouseMove` event, relying on D3 v6 for SVG utilities and React 16 for component rendering.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates asynchronous loading and parsing of a CSV file containing CSS named colors. The code fetches a remote CSV from a GitHub gist using the Fetch API, then processes the response text through ES6 async/await syntax. It shows how to avoid callback nesting by wrapping promise-based fetch calls in an async function, returning the parsed text to the console. The visualization itself is minimal, displaying the raw CSV data as plain text in the browser console.

Loading thumbnail…

Smiley Face Part V (Multiple files with ES6 modules)

A smiling face is rendered as an SVG composed of separate React components for the background circle, eyes, and mouth. The components are organized across multiple files using ES6 module named exports, with the mouth path generated by the d3 `arc` helper. The face is assembled by passing explicit props for dimensions and positions into each component, which are then nested inside a translated SVG group element for centering.

Loading thumbnail…

Smiley Face Part IV (React Components & ES6)

This example shows a yellow smiley face built from SVG primitives, with yellow circular background, two black eyes, and a curved mouth. It demonstrates how to combine React components with D3’s arc generator for the mouth path. The code uses React and ReactDOM for rendering, D3’s `arc()` method for path data, and ES6 features like arrow functions, destructuring, and template literals. The face is centered on a 960×500 canvas, with eyes offset by fixed pixel values and the mouth drawn as an arc between specified angles.

Loading thumbnail…

Smiley Face Part-3 (Assignment)

This example shows a yellow smiley face drawn with SVG shapes, including two eyes and an arc-shaped mouth, all centered within a fixed 960×500 viewport. The face is built using React for component rendering and D3’s `arc` helper from the `d3-shape` package to generate the mouth’s path. Circle elements handle the head and eyes, while a group element with a `transform` attribute positions everything at the center. The mouth’s inner and outer radii, along with start and end angles, are configured through method chaining on the `arc` constructor.

Loading thumbnail…

Smiley Face Part-3 (React and d3)

A React component renders a yellow smiley face in an SVG, with eyes as circles and a mouth drawn using the `arc` helper from the `d3-shape` package. The face’s elements are positioned inside a group element via a transform translation, with the mouth path generated from inner and outer radii and angular start and end points. The code uses ES6 template literals for the transform string, and the static data (dimensions, offsets, and radii) is hardcoded in constants.

Loading thumbnail…

Smiley Face with React..

A smiling face rendered with SVG primitives in a React application. The visualization uses two black circles for eyes and a large aqua circle with a black outline for the head, all positioned on a 960 by 500 canvas. The code demonstrates React component creation with arrow function syntax and renders the SVG via `ReactDOM.render`. The example uses the React and ReactDOM libraries loaded from unpkg, with styling defined in the accompanying `index.html` file.

Loading thumbnail…

Smiley Face Part 1

This example displays a static smiley face rendered as SVG circles, with a cyan face and black outline, two eyes, and an incomplete mouth—"halfway towards a smiley face." The code uses React and ReactDOM to render a separate "Hello JSX" heading into a root div, while the SVG markup is hardcoded directly in the HTML page. The visualization demonstrates basic SVG shape composition and React’s declarative setup.