cremcircle@gmail.com

@cremc·16 public vizzes

Refactored Barchart_Fork of Axes with React & D3

This example demonstrates a horizontal bar chart displaying the population data of ten countries for the year 2020. The React-based visualization uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with separate React components rendering the axes and marks as SVG elements. The data is loaded asynchronously from a remote CSV file using D3's `csv` utility, and the chart updates once the data is fetched.

Dec 24, 2024

Loading thumbnail…

Axes with React & D3

A bar chart displays the top ten countries by 2020 population, loaded from a CSV dataset of UN country-wise population figures. Using React for component rendering and D3 v7 utilities for data processing and scales, the visualization constructs a horizontal bar layout with a linear x-axis and a banded y-axis. The SVG output includes axis ticks and gridlines generated via `scaleLinear.ticks()`, with axis labels positioned using `scaleBand`. This example demonstrates a hybrid approach where D3 handles data binding and scaling while React manages the DOM output.

Dec 22, 2024

Loading thumbnail…

The Margin Convention with React & D3

This example demonstrates the margin convention in a React-based bar chart, showing the top ten countries by 2020 population. The visualization uses D3's `scaleBand` and `scaleLinear` to map country names and population values, respectively, while React handles rendering of SVG rectangles. Data is loaded asynchronously from a CSV file using D3's `csv` utility, and a margin object creates inner dimensions for the chart’s plotting area, with all bars grouped inside a translated `<g>` element.

Dec 19, 2024

Loading thumbnail…

Making a Bar Chart with React & D3

A bar chart displays the top ten countries by population in 2020, loaded from a CSV file using D3's `csv` method. React manages the component state and renders SVG `<rect>` elements for each bar, with D3's `scaleBand` and `scaleLinear` mapping country names and population values to screen coordinates. The chart updates asynchronously after data fetching completes.

Dec 18, 2024

Loading thumbnail…

Visualizing Data with React & and pie-chart with D3

This visualization displays all named CSS colors as a single pie chart, with each slice filled by its corresponding RGB hex value. The data is loaded from a CSV file using D3’s `csv` utility, while React manages the component state and rendering. D3’s `pie` generator computes the arc angles, and the `arc` generator creates the SVG paths. The chart renders in an SVG element centered on a 960×500 canvas.

Dec 14, 2024

Loading thumbnail…

Visualizing Data with React & D3

Named CSS colors are rendered as a layered semicircular fan of SVG paths, with each path filled according to its RGB hex value from a CSV dataset loaded via `d3.csv`. The example demonstrates combining React state management (`useState`, `useEffect`) with D3's `arc` generator to compute path geometries. React handles the component lifecycle and DOM updates, while D3 fetches the data and supplies the `arc()` shape for each color entry, producing a dense, colorful visualization that fills the viewport. The chart spans from a 90-degree to a 270-degree angle, radiating outward from the center.

Dec 11, 2024

Loading thumbnail…

Fork1 of Vega-Lite API Template

This example visualizes a scatterplot of automobile characteristics, plotting displacement against horsepower, with tooltips revealing the car model name. Point size, fill, and opacity are fixed for a uniform cloud of semi-transparent dots. The visualization is built using the Vega-Lite API (vl) with a D3 CSV loading function for the auto-mpg dataset, and it renders through the Vega and Vega-Lite rendering pipeline, configured with custom axis and label styling.

Nov 25, 2024

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset within a React application, displaying the data's size, row count, and column count. It fetches a CSS named colors dataset from a GitHub gist using D3's `csv` utility, then stores the parsed result in React state via `useState` and `useEffect`. The rendered output updates from a loading message to a formatted summary once the asynchronous fetch completes, highlighting the integration of D3's data-loading functions with React's state management for simple data-driven interfaces.

Nov 16, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote source, displaying the file size, row count, and column count in a large HTML `<pre>` element. The implementation shows two approaches: first using the Fetch API with `response.text()` and `d3.csvParse`, then the more concise `d3.csv` method. Both populate the same message container asynchronously, with results from the second method appended below the first. The data comes from a GitHub gist containing CSS named colors.

Nov 15, 2024

Loading thumbnail…

Interaction with React

This example shows a single circle that follows the mouse cursor across the full browser window, demonstrating real-time interaction in a React-based SVG visualization. The circle’s position updates continuously as the user moves the mouse, driven by React’s `useState` and `useCallback` hooks to store and update the cursor coordinates. It uses ReactDOM to render an SVG `<circle>` element, with `onMouseMove` handling events on the SVG root, and the initial mouse position set to the center of the viewport.

Nov 13, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data_main

This example demonstrates a minimal HTML page that fetches a CSV file containing CSS named colors and logs its contents to the browser console. The code uses the JavaScript `fetch` API within an async function to retrieve the remote CSV data from a GitHub Gist, then calls `response.text()` to parse the response as a string. The visualization itself is not rendered; instead, the page’s primary behavior is simply the asynchronous loading and logging of the raw CSV text. The page’s styling is minimal, with a large message font in CSS.

Nov 10, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using the D3.js library. It fetches a dataset of CSS named colors from a GitHub Gist and displays summary statistics—file size in kilobytes, row count, and column count—in a large preformatted text element. The code uses the `d3.csv` function to fetch and parse the data, then calculates metrics with `d3.csvFormat` and property accessors. A commented alternative shows the same process using the Fetch API with async/await and `d3.csvParse`.

Nov 9, 2024

Loading thumbnail…

Fork of D3_Fork of Let's Make a Face Part II

A grid of eighteen randomized smiley faces renders in SVG via React functional components. Each face uses `d3.arc` for its mouth, with `startAngle` and `endAngle` fixed to create a downward curve, while eye and mouth dimensions vary per instance through `Math.random()`. The `FaceContainer` applies an SVG group transform for centering, and `BackgroundCircle` draws the yellow head with a black stroke.

Nov 7, 2024

Loading thumbnail…

D3_Fork of Let's Make a Face Part I

This example demonstrates how to construct a stylized smiley face using React and D3.js, combining basic SVG shapes with D3's arc generator. The face consists of a yellow circle with a black outline, two eyes positioned using offset variables, and a mouth drawn as an arced path. The code defines geometric constants for dimensions and positions, then uses React's declarative syntax to render the SVG elements. D3's `arc()` function with inner and outer radius and specified start and end angles creates the curved mouth shape.

Nov 3, 2024

Loading thumbnail…

D3_Fork of Let's Make a Face Part I

A yellow smiley face is drawn within an SVG canvas using React. The face consists of three circles: a large yellow head with a black stroke and two smaller circles for eyes. The dimensions and positions are calculated using variables for width, height, and center coordinates. The code uses React's `ReactDOM.render` to display the SVG, with styling handled by inline attributes and CSS properties. This example demonstrates the initial step of a multi-part tutorial, showing only the base face shape without a mouth.

Oct 26, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses CSS and JavaScript to render a large, centered message and a simple SVG circle. The React framework is not used here despite the title, with plain HTML and inline styles handling the layout. The SVG circle is drawn without any libraries, relying on native SVG elements. The code serves as a bare-bones starting point for web-based data visualization, showing how basic styling and vector graphics can be combined in a single document.

Oct 20, 2024