asafJortilles

@asafJortilles·8 public vizzes

Fork of Vega-Lite API Template

This example displays a bar chart of population by country, colored by religion, with a tooltip showing temperature on hover. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite specifications, and renders to SVG. Data is loaded asynchronously from a CSV file via D3’s `csv` function, sourced from the auto-mpg dataset. The chart is configured with custom axis and label styling, and fills the full viewport using automatic resizing.

Mar 23, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes car performance data from the auto-mpg dataset, plotting horsepower against miles per gallon and coloring points by country of origin. The visualization uses the Vega-Lite API to define a scatter plot with circles, where both color and size encode variables, and tooltips display car names. It loads data via d3.csv, configures a dark theme with custom axis styling, and renders the chart as SVG using Vega-Lite’s vega-lite-api library, integrated with vega-tooltip for interactive hover details.

Mar 17, 2023

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates data loading with React and D3, displaying a text summary of a CSV file’s size, row count, and column count. The `csv` function from D3 v5 fetches the remote dataset, while React’s `useState` and `useEffect` hooks manage the asynchronous state update. The resulting message is rendered in a large `<pre>` element, formatting the file size in kilobytes using `d3.csvFormat` to measure string length. The visualization focuses on the interplay between D3’s data utilities and React’s state-driven rendering.

Mar 17, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiley-face drawing built with React that tracks the user's pointer. A single circle follows the mouse cursor across the full browser window, rendered as an SVG element whose position updates in real time via React state and the `onMouseMove` event handler. The visualization uses React 16.9 and ReactDOM to manage the SVG circle's `cx` and `cy` coordinates, demonstrating interactive mouse tracking with a minimal, dynamic component.

Mar 16, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This visualization demonstrates the process of loading and parsing a CSV dataset of CSS named colors, displaying the file size in kilobytes, number of rows, and number of columns in a large pre-formatted text block. The code uses the D3.js `d3.csv` method to fetch and parse the remote CSV file from a GitHub gist, then computes summary statistics using `d3.csvFormat` and the resulting data array’s `length` and `columns` properties. The example also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, highlighting different approaches to asynchronous data loading. Built with React, the visualization focuses on the data-loading workflow rather than graphical rendering.

Mar 16, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS Named Colors from a GitHub gist, outputting the raw text to the browser console. Using the Fetch API with async/await syntax, the code retrieves the remote CSV resource and converts the response to text format. The visualization does not render any graphical output; instead, it focuses on the initial data-loading workflow within a React environment, leveraging modern JavaScript promises and asynchronous patterns.

Mar 9, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This example displays multiple smiley faces rendered as React components, each built from reusable SVG parts for the background circle, eyes, and mouth. It demonstrates component composition and parameterization, varying face size, stroke width, eye radius, and mouth dimensions across instances. The faces are generated using D3’s `range` function to create ten iterations, while the mouth shape relies on D3’s `arc` generator with specific start and end angles. The SVG output is produced through React’s declarative rendering, with a `FaceContainer` managing the central translation transform for each face.

Mar 9, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a simple, static smiley face constructed from basic geometric shapes. Rendered as an SVG graphic, a yellow circle forms the head, with two smaller black circles for eyes and a dark arc for the mouth, all centered on a 960 by 500 pixel canvas. The visualization is built using React, with the drawing logic relying on D3 v7’s `arc` function to compute the path for the mouth. The circle and eye radii, along with their positions relative to the center, are defined through straightforward arithmetic variables, and the final composition is created using ReactDOM.

Mar 6, 2023