Kimberly Nguyen

@trust-kimberly·15 public vizzes

Blue Bike Stations

This visualization maps Blue Bike stations by district, using circle size, color, and opacity to represent the total number of docks at each station. It is built with the Vega-Lite API, leveraging `vl.markCircle` and encoding fields like `Total docks` for quantitative mapping and `District` for categorical positioning. The data is loaded from a remote CSV file via `d3.csv`, and the visualization is rendered with `vega-lite` and `vega`, incorporating custom styling through a `config` file for axis and label appearance.

Feb 13, 2023

Loading thumbnail…

Nativity English Ability by Race

This visualization shows the relationship between nativity and English ability across racial groups, using population data from the 2015–2019 American Community Survey. A line plot encodes values with position, color, and opacity, while tooltips expose district and municipal details. The example is built with the vega-lite-api library, which registers Vega and Vega-Lite, and uses d3.csv to fetch the remote tabular dataset. Appearance is customized through a shared config object that adjusts axis ticks, label font sizes, and color, and the chart auto-fits to the window width via the autosize property.

Feb 13, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a radial burst of colored arcs, each representing a CSS named color from a dataset loaded via D3’s CSV utility. The React component uses the `useState` and `useEffect` hooks to fetch and store the data, then renders each arc as an SVG path. The arcs are generated with `d3.pie()` and `d3.arc()`, with each path’s fill set to the corresponding color’s hexadecimal value. The visualization highlights how React manages the DOM while D3 computes the geometric layouts.

Feb 12, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a bubble chart of Bluebikes station data, with the x-axis showing "Total docks" and the y-axis showing the "District". The circles are sized and colored by the number of docks, and a tooltip reveals details like station name and capacity. The code loads the tooltip, config, and data modules, with the data fetched from a remote CSV using `d3.csv`. The visualization is rendered to SVG, and the `viz.js` file defines the mark and encodings.

Feb 12, 2023

Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part II

This example demonstrates loading and displaying a CSV dataset of CSS named colors using React and D3 v7, with a message showing dataset size, row count, and column count. The application fetches the data via `d3.csv` within a `useEffect` hook, manages state with `useState`, and conditionally renders whether the data is loaded. The SVG markup in the HTML comment suggests a smiley face visualization, but the active code focuses on data loading feedback rather than rendering the shape.

Feb 12, 2023

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A smiley face follows the mouse cursor as it moves across an SVG canvas. Built with React and D3 v7, the example tracks pointer coordinates via a mouse-move event handler and updates the circle's position through React state. The visualization demonstrates a simple interactive pattern without static data, using only a yellow circle to represent the face.

Feb 12, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and native browser APIs. It fetches a dataset of CSS named colors from a GitHub gist and displays the file size in kilobytes, row count, and column count in a large text element. The primary implementation uses `d3.csv` with a promise-based `.then()` callback, while commented-out alternatives show the same task using `fetch`, `async/await`, and `d3.csvParse`. The code also includes a commented "pyramid of doom" example illustrating nested promise callbacks.

Feb 12, 2023

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face with black outlined eyes and a curved mouth is rendered inside an SVG. The React components—`BackgroundCircle`, `Eyes`, and `Mouth`—are split into separate ES6 modules and composed within a central `<g>` transform. D3’s `arc` generator creates the mouth path, while fixed constants define dimensions. The example demonstrates reusable component structure with React fragments and SVG rendering.

Feb 12, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This is a React and D3.js visualization that renders a smiley face as an SVG. The face is drawn with a large lavender circle for the head, two offset black circles for eyes, and a mouth depicted as a thick arc path. The code uses React for the component structure, the D3 `arc` API to generate the mouth’s path, and fixed pixel dimensions for the canvas. The layout applies a centered transform, with the mouth arc positioned using specified start and end angles.

Feb 12, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face built with two concentric circles forms the head, while two smaller black circles serve as eyes. The markup uses raw `<circle>` elements inside an `<svg>` tag with fixed coordinates and dimensions, including a lavender face fill and a thick black stroke. No JavaScript libraries are present, and the example relies solely on SVG’s native shape rendering to produce a simple, symmetrical smiley-face composition without a mouth.

Feb 12, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, mapping miles per gallon on the x-axis against horsepower on the y-axis. Each point represents a car model, with a tooltip displaying the vehicle name on hover. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite specifications, while D3’s `csv` function loads the remote data. The chart renders as an SVG, with custom configuration adjusting axis style, label font sizes, and colors for improved readability.

Nov 23, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the CSS Named Colors dataset by loading it from a remote CSV file and appending each color keyword as text directly into the DOM. It uses D3 v5’s `d3.csv` method to fetch and parse the data asynchronously, then maps over the parsed rows. The code integrates React 16.9, though React rendering is minimal. It also comments out alternative approaches using the Fetch API and `d3.csvParse`, highlighting the distinction between fetching raw text and using D3’s built-in CSV parser.

Nov 17, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and display data in a React component using D3’s `arc` generator, rendering an SVG smiley face. It uses React’s `useState` hook to track the mouse position and updates a circle’s coordinates on `mousemove` events. The code imports `arc` from `d3` and renders SVG elements with React, while loading external libraries via CDN.

Nov 16, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across a blank SVG canvas, updating its position in real time as the user moves the pointer. Built with React hooks, the app tracks mouse coordinates through the `onMouseMove` handler and stores them in state via `useState`. The circle re-renders at the new location on every movement event, demonstrating a simple interactive visualization that combines React's declarative rendering with D3's SVG utilities.

Nov 16, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a yellow face constructed from SVG shapes, centered within a 960-by-500 viewport. The face is drawn using React and D3.js, with circles for the head and eyes and a D3 arc path for the mouth. The React component renders directly into the DOM via ReactDOM, while D3’s `arc()` API generates the mouth’s curved path. All coordinates are computed relative to the center, and the SVG is produced declaratively through JSX.

Nov 15, 2021