Nicolás Troncoso

Fork of Refactored Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019, rendered as an SVG via React. The visualization uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.csv to load the dataset. It includes bottom and left axes generated from custom React components, with rectangular marks representing each country’s population. The chart is intentionally minimal, lacking gridlines and other embellishments, and updates reactively when data loads.

Apr 4, 2021

Loading Data into a React program

This visualization demonstrates loading a CSS named colors dataset into a React application using D3 utilities. The program fetches a CSV file from a GitHub gist via `d3.csv`, stores the parsed data in React state with `useState` and `useEffect`, and displays a summary message showing the data size in kilobytes, row count, and column count. The output is rendered as a large `<pre>` element, with a "Loading..." placeholder shown while the data is being fetched. The code uses React DOM for rendering and D3's CSV parsing and formatting functions.

Apr 2, 2021

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width with each of the three species colored distinctly. The visualization uses React components to render SVG marks, with d3.scaleLinear for the x and y axes and d3.scaleOrdinal for the categorical color mapping. A color legend identifies species, and axes are generated from d3’s tick formatting. The data is loaded asynchronously using d3.csv, while the tooltip displays the petal length value on hover.

Fork of Loading Data with React & D3

This example demonstrates React state managing asynchronous data loading by fetching CSS named colors from a CSV file via D3’s `csv` utility. The app renders tiny colored squares based on each color’s RGB hex value, and a loading message appears until the data arrives. The visualization uses React hooks (`useState`, `useEffect`) to trigger the D3 data request and re-render the component when the promise resolves.

fetch after

This example demonstrates the use of D3 v5's `d3.csv` method to load a CSV dataset containing CSS Named Colors from a remote URL, then parses and displays summary statistics about the data. The page renders the file size in kilobytes, row count, and column count in large text within a `<pre>` element. The code highlights the modern asynchronous pattern with promises via `.then()`, while commented-out alternatives show `fetch` with `async`/`await` and a nested "pyramid of doom" approach for comparison.

fecth

This example demonstrates loading and parsing CSV data from a remote URL, displaying the file size in kilobytes, row count, and column count. The implementation uses the Fetch API with async/await to retrieve the text, then d3.csvParse to convert it into structured data. The d3.csv method appears in commented-out code as an alternative approach. The interface renders the summary statistics in a large monospace font within a pre element. The data source is a JSON file containing named colors, fetched via d3 v5.

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas, with its position updating in real time based on the pointer's coordinates. The React component uses the `useState` and `useCallback` hooks to manage and optimize the mouse position state, while the `onMouseMove` event handler captures the cursor's `clientX` and `clientY` values. The visualization is rendered through ReactDOM, which mounts the SVG element into the HTML body, with the circle's center point and radius defined as constants within the code.

React Mocules Components

A React and D3.js application assembles a smiley face in SVG from modular components: a yellow background circle, two eyes, and a mouth drawn with a D3 arc path. The code splits each facial feature into its own ES6 module file, using React fragments to group the eye circles. D3’s `arc` function generates the mouth’s path with specified inner radius, width, and angular range. The final composition is rendered by React DOM into an SVG canvas sized 960 by 500 pixels, with layout coordinated through an SVG group transform.

React Components

A React component renders a yellow smiley face as an SVG, with the face centered on a 960 by 500 canvas. The example demonstrates composing D3's `arc` generator inside JSX to draw the mouth, while circles for the eyes and a reusable `BackgroundCircle` component handle the other shapes. React 16.9 and D3 v5 are loaded via UMD scripts, and `ReactDOM.render` mounts the component to the page. The code shows styling through SVG attributes like `stroke-width` and uses D3's `arc` for the path geometry.

React + D3 II , using components

This example shows a smiley face rendered as an SVG using React components for each shape, with D3 generating the mouth path. The face consists of a yellow circle with a black stroke, two eye circles, and an arc created by `d3.arc()`. React manages the SVG elements declaratively, while D3 provides the arc generator with specified inner and outer radii and start/end angles. The code uses React 16 and D3 v5, rendering directly into the DOM via `ReactDOM.render` with static positioning based on fixed dimensions.

using d3 inside a component

This example shows a smiley face rendered as an SVG, with its circular face, eyes, and mouth positioned and styled through React components. It demonstrates how to integrate D3 into a React application by importing the `arc` function from D3 v5 and using it to generate the mouth’s path. The code defines constants for dimensions and offsets, then applies the arc generator to create a half-circle mouth. The rendering approach uses React to manage the SVG elements, while D3 handles the geometric computation of the arc path.

Fork of Smiley Face Part III

This example shows a smiley face built with React and D3, rendered as an SVG. The face consists of a yellow circle with a black stroke, two eye circles, and a mouth drawn using D3’s `arc` generator with specified inner and outer radii and angular ranges. React manages component structure and state, while D3 provides the `arc` function to compute the mouth path. The SVG coordinates are centered via a translated `<g>` element, with all shapes positioned relative to that origin.

Fork of Fork of Fork of Hello HTML under index.js

A simple React application renders a yellow circle with black outline as a face, featuring two smaller black circles for eyes, positioned symmetrically on either side. The SVG canvas is fixed at 960 by 500 pixels, with the face centered and the eyes offset using defined constants. The code uses React 16.9.0 and ReactDOM to inject the SVG directly into the page's root element, with all geometry calculated from the canvas dimensions. The composition is minimal, showing only the basic shapes without additional styling or interaction.

Fork of Fork of Hello HTML 2

This example shows a simple static smiley face drawn with two black eyes and a yellow circle outline on a blank SVG canvas. It loads the React library from a CDN and logs the React object to the browser console, though no React components are actually rendered. The visualization uses raw SVG elements—a `<circle>` for the face and two smaller `<circle>` nodes for eyes—positioned with fixed coordinates within a 960×500 viewport. The page is styled with zero margins and hidden overflow, making the SVG fill the entire browser window without scrolling.

Fork of Hello HTML

This example shows a simple yellow circle with two smaller black circles positioned on it, creating a minimalist face-like composition. Rendered as inline SVG within an HTML page, the visualization uses basic SVG elements—circles with fill, stroke, and stroke-width attributes—to draw the shapes. The code relies on the native SVG API, embedded directly in the markup, with no JavaScript libraries or data sources involved. The page is styled with margin zeroing and hidden overflow to isolate the graphic.