tnk-dev

@tnk-dev·7 public vizzes

Fork of Rendering Data with React & D3

This visualization shows a scatter plot of iris flower measurements, plotting sepal length against sepal width. The code currently renders an empty SVG because the scales are commented out and no marks are drawn. It uses React for component rendering, D3’s `scaleLinear` and `extent` for scaling, and loads the iris dataset via D3’s `csv` utility in a custom `useData` hook. The page also contains unused bar chart and pie chart components, with the pie chart using `d3.arc` and `d3.pie` to render CSS named colors.

Jun 22, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example shows a table of CSS named colors loaded from a remote CSV file, with each row displaying the color name, RGB values, and hex code. The code uses React hooks (`useState`, `useEffect`, `useCallback`) to manage data loading and component rendering, while `d3.csv` fetches and parses the external dataset. The `Table` component maps over the parsed rows and columns to generate a styled HTML table, with D3 v5 loading the data and React 16.9 handling the user interface updates.

Jun 21, 2021

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays temperature data over time using an area chart, with a semi-transparent fill to emphasize trends. The chart is built with the Vega-Lite API, which compiles specifications to Vega and renders them as SVG. Data is loaded from a CSV file of San Francisco weekly temperatures using `d3.csv`. The visualization adapts to the full browser window and includes an interactive tooltip for exploring temperature values.

Jun 21, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement versus horsepower, with a tooltip revealing car names. It uses the Vega-Lite API to declaratively define the visualization and D3’s `csv` loader to fetch the auto-mpg dataset from a GitHub gist. The view is rendered as an SVG, sized to fit the full window, with configurable axis and label styling applied via Vega-Lite’s `config` object.

Jun 21, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays summary statistics from a CSV file containing CSS Named Colors, showing the file size in kilobytes, the number of rows, and the number of columns in a large monospaced text block. The code loads the remote CSV using `d3.csv` and processes the parsed data with `d3.csvFormat` and the `data.length` and `data.columns` properties. Alternate commented approaches demonstrate fetching the raw text with the Fetch API and parsing it via `d3.csvParse`, as well as an older promise-chain pattern.

Jun 21, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A single gray circle follows the user's mouse across a full-screen SVG canvas, updating its position in real time as the pointer moves. Built with React and ReactDOM, the application uses the `useState` and `useCallback` hooks to track the mouse's client coordinates via an SVG `onMouseMove` event handler. The circle's `cx` and `cy` attributes are bound to the tracked state, while the viewport dimensions are read directly from `window.innerWidth` and `window.innerHeight`.

Jun 21, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a grid of 18 procedurally generated cartoon faces using D3 v7 and React. Each face is composed of a yellow background circle, two eyes, and an arc-based mouth, with randomized eye offset, eye radius, mouth width, and mouth radius values. The React components structure the SVG output, while D3’s `arc` generator creates the mouth path. The faces are drawn asynchronously with each render, producing varied expressions across the grid.

Jun 21, 2021