kcai93

@kcai93·5 public vizzes

Stylized Scatter Plot

This stylized scatter plot visualizes the relationship between petal length and sepal width in the Iris dataset, sourced from the UCI Machine Learning Repository. It uses React with D3 v5 scales and SVG rendering. The code employs `scaleLinear` for both axes, `extent` for domain calculation, and custom axis components. The Poppins font and teal circle marks create a distinctive visual style, with tooltips displaying formatted x-axis values.

Aug 24, 2022

Loading thumbnail…

KC Vega-Lite API Template

This visualization displays a time-series area chart of daily temperatures in San Francisco, with the data loaded from a CSV file. The chart is built using a declarative pipeline that combines the Vega-Lite API (`vega-lite-api`) with D3.js for data fetching, and renders through Vega's SVG engine. The code configures axis styling and tooltips via `vega-tooltip`, and dynamically sizes the chart to fit the browser window.

Aug 23, 2022

Loading thumbnail…

Loading and Parsing csv data

This example demonstrates how to load and parse a CSV file using D3 v7, displaying the file size in kilobytes, the number of rows, and the number of columns from the CSS named colors dataset. It uses the `d3.csv` method to fetch and parse the remote CSV, then `d3.csvFormat` to calculate the file size and the `data.columns` property to count attributes. The resulting summary is rendered as large text inside a `<pre>` element.

Aug 22, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a minimal React application that uses D3 utilities to load data and manage it through React state. The program fetches a CSV dataset and parses it with D3’s parsing functions, while the `useState` hook tracks the loaded data. The code imports React and ReactDOM, renders an `App` component into a root div, and leaves room for visualization logic. The design uses D3’s data-loading APIs alongside React’s component model, though the current version only sets up the data-loading scaffold without yet drawing any marks.

Aug 20, 2022

Loading thumbnail…

smiley face I

A yellow smiley face rendered as an SVG, with a black circular outline, a pair of eyes, and a mouth. The face is centered within a 960 by 500 pixel viewport, with the head diameter determined by the height. Built with React, the component uses JSX to define three circle elements for the face outline and eyes, while the mouth remains as a commented-out placeholder. The code relies on React 18 and ReactDOM to mount the component into the page's root element.

Aug 15, 2022