necat1

@necat1·9 public vizzes

React & Vega Integration Test

This example demonstrates the integration of React with Vega and Vega-Lite for data visualization. It renders a scatter plot of greenhouse gas emissions data from Our World in Data, mapping the "Processing" and "Farm" fields to the x- and y-axes. The React component loads CSV data using D3’s `csv` method, then constructs the plot via the Vega-Lite API, configuring axis styles and fitting the visualization to the window. The rendered SVG is appended to the DOM within a React lifecycle method, with cleanup handled on unmount.

Aug 11, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how to construct and display SVG shapes—circles, rectangles, lines, and paths—within a single canvas. It applies inline visual properties like `fill` and `stroke-width` directly to elements, while a separate CSS stylesheet defines styling for a group with class `.lines` and for all `path` elements. The SVG uses `transform` attributes for scaling and translating entire groups, showcasing how layered rendering combines geometric primitives with cascading style rules.

Jul 25, 2021

Loading thumbnail…

Shapes with SVG

This example demonstrates how to build and render basic SVG shapes, showing a large red circle centered on a 960x500 canvas. It serves as a tutorial on using JavaScript objects, arrays, and modules, with the HTML embedding a static SVG element while a linked `bundle.js` (generated by Rollup) manages the dynamic behavior. The page includes a large `<pre>` element for displaying messages and uses minimal styling via `styles.css`, which hides overflow. The code relies on standard SVG circle attributes (`cx`, `cy`, `r`, `fill`) and a plain JavaScript setup without external libraries.

Jul 25, 2021

Loading thumbnail…

Fork of Cars Report

This example demonstrates a car-report generator that filters a set of car listings by price and formats the results as text. It fetches JSON data from a `fetch` API call to a local server, then uses JavaScript array methods (`filter`, `map`, and `join`) to process and display the report. The code relies on custom modules (`formatCard` and `generateReport`) and a mock data promise (`getCars`) that simulates a delayed response. The final output is rendered into an HTML `<pre>` element.

Jul 24, 2021

Loading thumbnail…

Covid-19 Serbia

This visualization shows the daily count of confirmed COVID-19 cases in Serbia over time, plotted as a line chart with points. It uses data from Serbia’s open data portal. The visualization is built with the vega-lite-api library, which wraps Vega-Lite, and uses d3.csv for data loading and filtering. The chart encodes the date on the x-axis and the case count on the y-axis, with a firebrick-colored line, and includes tooltips showing the exact value for each point.

Mar 29, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data—engine displacement on the x-axis and horsepower on the y-axis—with tooltips displaying each vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with vega and vega-lite, and rendered as an SVG via vega-tooltip for interactive hover details. The data is loaded asynchronously from a CSV file using d3.csv. The chart resizes to fill the viewport, with custom axis and label styling defined in a separate config module.

Mar 21, 2021

Loading thumbnail…

Loading and parcing csv data

This example demonstrates how to load and parse CSV data from a remote URL using D3.js v6. It fetches a text file containing CSS named colors, parses it with `d3.csvParse`, and reports the file size in kilobytes, the number of data rows, and the number of columns via the console. The code uses the fetch API to retrieve the text asynchronously, then logs the parsed data object and summary statistics to the browser console. The data source is a GitHub gist.

Mar 15, 2021

Loading thumbnail…

Mouse follower

A single yellow smiley face, rendered as an SVG circle with two smaller black circles for eyes, follows the mouse cursor across a 960×500 viewport. The React component tracks pointer movement via an `onMouseMove` handler and updates the face’s `cx` and `cy` attributes in state. D3’s `arc` utility is imported but unused; rendering relies entirely on React’s declarative SVG elements with no data source.

Mar 15, 2021

Loading thumbnail…

Fork of Hello HTML

A smiling face rendered in React and SVG shows two nearly identical overlapping faces built from a yellow circle, black-outlined face, eyes, and an arc-based smile. The code uses React components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, with D3’s `arc` generator to create the mouth path. Rendered via `ReactDOM.render` into a hidden-overflow body, the example demonstrates component reuse by displaying the same face twice with identical positional and sizing parameters.

Mar 13, 2021