akarki79

@akarki79·6 public vizzes

Fork of Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon and horsepower for automobiles, with color encoding by origin and interactive tooltips displaying car names. It uses the vega-lite-api to construct a circle mark scatter plot, which is then rendered and configured via Vega-Lite, Vega, and d3.csv for data loading. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, and the view auto-sizes to the window with custom axis and label styling.

Jul 27, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of auto MPG data from the UCI Machine Learning Repository, plotting horsepower against miles per gallon with circles colored by origin and tooltips showing vehicle names. The code uses the vega-lite-api library, which registers and renders via Vega and Vega-Lite, with d3.csv fetching the remote dataset. A custom config adjusts axis and label styling for readability, and the visualization fills the full window with a fit-based autosize and SVG rendering.

Jul 27, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset using React and D3. It fetches CSS named colors data from a GitHub gist via `d3.csv`, stores the parsed result in React state with the `useState` and `useEffect` hooks, and displays a loading message until the data arrives. The rendered output shows the data size in kilobytes, row count, and column count, computed using `d3.csvFormat`. The app uses React 16.9, D3 v5, and renders into a DOM root element.

Jul 26, 2021

Loading thumbnail…

Fork of Smiley Face Part V

A React application renders a smiley face as an SVG graphic, composed of a yellow background circle, two eyes, and a mouth. The code splits these visual components into separate ES6 modules, using React fragments to group them. D3's `arc` function generates the mouth path, while explicit `cx`, `cy`, and `r` attributes position the eyes within a transformed group centered on the canvas.

Jul 26, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a blank HTML page using a minimal document structure. It demonstrates the absolute basics of web page creation, containing only the `<head>` and empty `<body>` elements with the title "Fork of Hello HTML." The code uses no external libraries or APIs, relying solely on standard HTML tags. It serves as a starting point for building more complex data visualizations by providing an empty canvas for adding custom content.

Jul 26, 2021

Loading thumbnail…

Fork of Hello HTML

A React component renders a yellow smiley face as an SVG graphic, with D3’s `arc` generator defining the mouth path. The face is centered on a 960×500 canvas, using two circles for eyes and a larger circle for the head, all positioned via SVG transforms. The code imports `React`, `ReactDOM`, and `arc` from D3 v7, and draws the face using JSX elements within an `<svg>` tag. No external data is loaded; the visualization is purely geometric.

Jul 24, 2021