zjulijie0618

Fork of Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Bar

This visualization displays a bar chart of population by country, sourced from the UCI Auto MPG dataset via a Gist. It is built using the Vega-Lite API alongside d3.v5, with Vega-Lite 4 and Vega 5. The chart sorts bars descending by population and includes tooltips. The code programs the visualization declaratively via `vl.markBar()` and encodes fields with `vl.x()` and `vl.y()`, applying custom axis and label styling from a config object.

Jan 23, 2022

Fork of Histogram

This is a dark-themed, responsive histogram built with D3.js (v7) that visualizes the distribution of a single numeric variable. The chart displays the frequency of prices from the OneNum dataset, fetched via `d3.csv`, with bars rendered using SVG `rect` elements. It uses `d3.histogram()` to compute bins and `d3.scaleLinear` for x and y axes. The visualization adapts to window resizing through a debounced event listener, re-rendering the histogram with updated dimensions.

Jan 23, 2022

Fork of Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Stacked Bar

This stacked bar chart visualizes the distribution of religions across countries, using population to encode the share of each religious group. The visualization is built with the Vega-Lite API, registered with Vega and Vega-Lite, and relies on d3.csv for data loading from a Gist containing the religionByCountryTop5 dataset. The bars are sorted by country in descending order, with color mapping population values and tooltips displaying the exact population figures. The chart fits the full browser window via an autosize setting and applies a custom configuration for axis styling and label font sizes.

Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Bar

This example displays a bar chart of population by country, sorted in descending order to highlight the most populous nations. The visualization is built programmatically using the Vega-Lite API, which constructs a specification that is then rendered by the Vega engine. The code registers Vega-Lite and Vega with the vega-lite-api library, uses D3’s CSV parser to load data from a Gist-hosted file, and applies custom configuration for axis styling and tooltips. Data originates from the UCI Auto MPG dataset, though the visualization itself plots country populations.

Fork of Episode 18 - Iterating Fast with Vega Lite API - Line

This example shows a line chart of temperature over time, using data from the Auto MPG dataset via a CSV file. The visualization is built with the Vega-Lite API, registered through `vl.register` with Vega and Vega-Lite, and rendered as an SVG. The code encodes timestamp on the x-axis and temperature on the y-axis, applying custom axis and label styling from a config object. Data is fetched asynchronously with `d3.csv`, and the chart fits the full window using `.autosize({ type: 'fit' })`.

Episode 18 - Iterating Fast with Vega Lite API

This example uses the Vega-Lite API to create an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization encodes vehicle weight on the x-axis, horsepower on the y-axis, origin as color, and miles per gallon as point size, with tooltips showing car names. Built with `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()`, the chart renders via Vega and Vega-Lite, while d3.csv loads the data. Custom styling in `config.js` and a dark theme improve readability for presentation.

Episode 16 - Loading Data in React

This example demonstrates loading a CSV dataset in a React application and displaying a summary of its contents. The code uses React hooks (`useState`, `useEffect`) to fetch the data asynchronously with D3’s `csv` function, then renders a formatted message showing the file size in kilobytes, row count, and column count. The data source is a GitHub gist containing CSS named colors, rendered as SVG text in a `<pre>` element. The visualization relies on React 17, D3 v7, and the `d3.csvFormat` API for calculating the data size.

Episode 15 - Parsing CSV Data with D3

This example demonstrates how to parse CSV data using D3.js, displaying basic statistics about a remote dataset containing CSS named colors. It fetches the CSV file via `d3.csv` and then uses `d3.csvFormat` to calculate the data size in kilobytes, along with the row and column counts. The results appear in a large, centered `<pre>` element, styled with CSS for dramatic typography. The visualization highlights D3’s built-in CSV parsing and formatting utilities for handling tabular data directly in the browser.

Episode 14 - Interaction With React

A circle follows the mouse cursor across an SVG canvas, its position updating in real time as the pointer moves. Built with React 17, the app uses the `useState` hook to store mouse coordinates and the `useCallback` hook to define the `onMouseMove` event handler. The circle is rendered as an SVG element within a fixed 960×500 viewport, with its `cx` and `cy` attributes bound directly to the state.

Episode 13 - Loading Data with Fetch, Promises, Aync & Await

This example demonstrates loading external data from a CSV file using the browser’s Fetch API combined with async/await syntax. The code defines an asynchronous function that fetches a text file from a GitHub gist URL and logs the raw CSV contents to the browser console. It shows a minimal HTML page with a large message element but performs no visible rendering; the focus is solely on asynchronously retrieving and printing the text data. The page uses vanilla JavaScript, with no external libraries or frameworks.

Episode 10: Let’s Make a Face Part VI (Compartmentalizing Complexity)

This example renders a grid of eighteen cartoon faces, each composed of reusable React components for the background circle, eyes, and mouth. The visualizations demonstrate compartmentalizing complexity by breaking a face into modular parts within a React and D3 v7 environment. Randomly generated eye and mouth radii provide variation across faces, while a shared SVG face container manages positioning. The code leverages React’s component model, D3’s `arc` generator for mouth paths, and the `range` utility to create the layout.

Episode 9: Let’s Make a Face Part V multiple files with ES6 modules

This example shows a simple cartoon face composed of modular React components, with a yellow facial background, two eyes, and an arc-shaped mouth rendered as SVG elements. The components are defined in separate ES6 module files and assembled in a central `App` component, which sets positions and sizes via props. The mouth uses D3’s `arc` generator to create its path, while the background and eyes are plain circles. The SVG is centered using a `<g>` transform, and the app is mounted with ReactDOM.

Episode 8: Let’s Make a Face Part IV (React Components & ES6)

A yellow cartoon face with black outlined circular eyes and a curved mouth is drawn using React components. The example demonstrates ES6 syntax and component-based structure, composing SVG circle and path elements within a React App component. D3’s `arc()` generator defines the mouth shape, while React renders the SVG to the DOM. The face is centered using an SVG transform, with computed offsets for eye placement and stroke width.

Episode 7: Let’s Make a Face Part III (With React & D3)

This example shows a static cartoon face built with SVG elements—a yellow circle head, two eyes, and a mouth—positioned using React components and D3’s `arc()` generator for the mouth path. The code imports React, ReactDOM, and the arc function from D3 v7, then defines constants for face dimensions and renders the face inside a `<g>` group translated to the center of a 960×500 viewport. The mouth arc uses `innerRadius`, `outerRadius`, and fixed angles to create a smile shape.