Elif Altundag

@elifaltundag·3 public vizzes

Fork of React + D3 Viz Starter

This example demonstrates a minimal React and D3.js starter project, fetching a CSV file of CSS color names and their hex codes from a GitHub gist using `d3.csv`. The code sets up a fixed 960×500 SVG canvas with margin conventions and uses a reusable `VizContainer` component to render the SVG and a group element. While the visualization is not fully implemented, the structure includes a commented-out mapping of colors in the data to inline-styled `<div>` elements, and the container can display its margins via a `showMargins` prop. The program currently only outputs “Hello world” after loading the data.

Aug 24, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This example shows a color swatch visualization built from a CSV of CSS named colors, with each color rendered as a horizontal strip stacked vertically to fill the viewport. The data is loaded using D3's `csv` utility from a GitHub gist, while React manages the component state and renders the strips using inline styles that set the background color and height. The visualization uses React hooks (`useState`, `useEffect`) to asynchronously fetch and store the data, displaying a “Loading...” message until the CSV arrives.

Aug 24, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot correlated with car weight and horsepower reveals relationships between vehicle attributes for the Auto MPG dataset from UCI. The visualization encodes engine displacement, acceleration, and origin via point size, color, and tooltip. Built with the Vega-Lite API, the code uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to map quantitative fields, while `vl.color().fieldN()` applies categorical coloring. Data loads asynchronously via d3.csv from a Gist URL, and the view renders dynamically to the window size.

Aug 22, 2022