nicholasgonzalez1

@nicholasgonzalez1·10 public vizzes

Working with Time

This visualization shows how temperature varies over time in San Francisco across a week, using timestamp and temperature data from the United Nations World Population Prospects 2019 dataset. A natural curve connects the data points, with the time axis formatted to display day abbreviations. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` to map the data, while custom `AxisBottom` and `AxisLeft` components render the tick marks and labels as SVG elements.

Jul 2, 2021

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flower samples. The visualization uses React components with D3 scales (d3.scaleLinear) and rendering via SVG, displaying axis ticks generated with custom AxisBottom and AxisLeft components. Each data point is rendered as a circle with a tooltip showing its value, styled with a Poppins font and teal coloring. The data is loaded asynchronously from a CSV file using d3.csv, with numeric fields parsed for quantitative comparison.

Jul 2, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization presents the ten most populous countries as horizontal bars, with country names on the vertical axis and population counts on the horizontal axis, formatted in billions. It uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` to map data to coordinates, and `csv` to load the UN World Population Prospects 2019 dataset. The chart’s styling includes Poppins typography and a teal color scheme, with axis labels and a tooltip showing the population value via a `<title>` element.

Jul 2, 2021

Loading thumbnail…

Margins and Axes

This example presents a horizontal bar chart of 2019 UN population data for the top ten countries, emphasizing the layout margins that separate the plotting area from the axes. The chart uses D3’s `scaleBand` and `scaleLinear` to map country names and population counts into a fixed `svg` coordinate system, with explicit `margin` constants controlling the left, right, top, and bottom spacing. React manages the component state, while the data is loaded via D3’s `csv` helper. The code renders tick marks and labels for the x-axis using `xScale.ticks()` and custom `<g>` elements, with the y-axis labels positioned manually using `yScale.bandwidth()`.

Jun 22, 2021

Loading thumbnail…

Making a Bar Chart with React & D3

This example shows a horizontal bar chart displaying the top 10 countries by 2020 population, using React for component structure and D3 for scales. It renders SVG rectangles with widths proportional to population values, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data comes from a CSV file loaded via `d3.csv`, and React’s `useState` and `useEffect` manage the asynchronous data fetching. The visualization appears once data is loaded, otherwise showing a loading message.

Jun 22, 2021

Loading thumbnail…

Rendering Data with React & D3

A React and D3 pie chart renders the CSS named colors dataset as a full-screen SVG donut. The code loads CSV data from a GitHub gist using `d3.csv`, then builds each slice with `d3.pie` and `d3.arc`. Each path’s fill is set directly from the `RGB hex value` column in the data, producing a color wheel that displays all named CSS colors in a single circular layout.

Jun 22, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and display CSV data using React and D3. The app shows a simple text summary of the dataset, including file size, row count, and column count, or a "loading" message while the data is being fetched. It uses React’s `useState` and `useEffect` hooks to manage state and trigger the data request, and the `d3.csv` method from D3 v7 to load the remote CSV file. The data source is a GitHub gist containing CSS named colors.

Jun 22, 2021

Loading thumbnail…

Loading Data

This example demonstrates the initial step of loading and parsing CSV data from an external URL, logging the number of parsed rows to the browser console. It uses a custom `fetchText` async function to retrieve the raw text, then calls `d3.csvParse` from D3 v7 to convert the comma-separated content into an array of objects. The data source is a GitHub-hosted CSS named colors dataset, and no visual output is rendered—only the parsed record count appears in the console.

Jun 22, 2021

Loading thumbnail…

Interaction with React

This example demonstrates a real-time interactive visualization where a circular SVG element follows the mouse cursor across a 960x500 canvas. Built with React 17 and D3 v7, the application uses React’s `useState` and `useCallback` hooks to track mouse coordinates through an `onMouseMove` event handler on the `<svg>` element. As the pointer moves, React re-renders the circle’s `cx` and `cy` attributes, updating its position instantly. The visualization highlights how React manages state-driven updates for DOM elements, contrasting with D3’s imperative approach to data binding.

Jun 22, 2021

Loading thumbnail…

Face

This example renders a stylized yellow face composed of SVG circles and an arc-shaped mouth, centered within a fixed 960×500 viewport. The `Face` React component composes reusable subcomponents for the background, eyes, and mouth, with dimensions passed as props for flexible configuration. The mouth uses `d3.arc()` from D3 v7 to generate a path with a specified inner radius and stroke width. All elements are drawn via SVG within a translated group, with React managing the component hierarchy and property flow.

Jun 18, 2021