H

huashe418

@huashe418·17 public vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map with D3.js, displaying country boundaries and a blue sphere as the base layer. It uses the `geoNaturalEarth1` projection and `d3.geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. The visualization demonstrates a simple two-step workflow: drawing the sphere outline first, then fetching and appending each country's path via `topojson.feature`. The map is styled with CSS, using a light green fill for countries and a dark blue ocean, with a clean, minimal aesthetic.

Loading thumbnail…

Working with Time

This visualization displays a week of San Francisco temperature data as a smooth time series line chart. The chart uses a React front end to render SVG elements, with D3 v5 providing the scales (`scaleTime`, `scaleLinear`) and the `line` and `curveNatural` generators for the path. Temperature readings from the CSV dataset are plotted against time on the x-axis, with formatted tick labels showing the day of the week. The code reveals the underlying data loading through `csv` and a custom `useData` hook that parses timestamps and numeric values.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, letting users switch which flower measurements appear on the x and y axes via dropdown menus. The visualization is built with React and D3, using d3.scaleLinear for axes and d3.extent to set scale domains. It renders SVG circles for each iris specimen, with tooltips showing formatted x-axis values, and resizes the plot area to accommodate a fixed menu height above the chart.

Loading thumbnail…

Stylized Bar Chart

This scatterplot shows the relationship between sepal length and sepal width for iris flowers, with each flower represented by a teal circle. The chart uses a React component structure with D3 scales (`d3.scaleLinear` and `d3.extent`) to map the data from the Iris dataset (loaded via `d3.csv`) to SVG coordinates. Axes are rendered as reusable React components, with tick marks and labels styled via CSS.

Loading thumbnail…

line chart

This line chart visualizes temperature readings over time, with each point along the line representing a recorded temperature value and a tooltip displaying the exact temperature on hover. It renders as a single continuous stroke, styled with a dark color scheme for axis labels and a light grid. The visualization is built using the Vega-Lite API, which composes the chart specification and renders it through Vega. Data is loaded asynchronously from a CSV file using `d3.csv`, and the chart is configured with custom axis styles and a responsive sizing that adapts to the browser window dimensions. A Vega tooltip handler enables interactive data inspection.

Loading thumbnail…

Stylized Line Chart

A stylized line chart visualizes temperature trends over time using data from the San Francisco week temperature dataset. The graphic plots timestamps on the x-axis and temperatures on the y-axis, rendered as a smooth curve with a teal stroke. Built with React and D3 v5, the code leverages `scaleTime` and `scaleLinear` for axis scaling, `line` with `curveNatural` for the smooth path, and `csv` for data loading. Custom Poppins typography and muted axis colors contribute to its polished, modern aesthetic.

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It maps miles per gallon on the x-axis, horsepower on the y-axis, vehicle origin to color, and weight to point size, with tooltips showing car names. The visualization is built programmatically via `vl.markCircle` and `vl.encode` methods, then rendered as SVG using the Vega and Vega-Lite libraries with a custom config for larger fonts and a dark color scheme. Data is loaded asynchronously using `d3.csv` from a remote gist.

Loading thumbnail…

Loading Data the React & D3

This example demonstrates how to load data with D3 utilities and manage it with React state. It fetches a CSV file from a GitHub gist using D3’s `d3.csv`, then displays a summary of the dataset via a React component. The summary shows the file size in kilobytes, the number of rows, and the number of columns, computed using `d3.csvFormat`. The visualization uses React’s `useState` and `useEffect` hooks to asynchronously load the data and update the display, rendering a plain-text message with a loading state initially.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, displaying summary statistics about the CSS Named Colors dataset. The page shows the data size in kilobytes, row count, and column count in a large monospace font. The code uses `d3.csv()` to fetch and parse the data asynchronously, then formats the summary using `d3.csvFormat()`. An alternative approach using the Fetch API with `d3.csvParse()` is provided in commented-out code.

Loading thumbnail…

Homework2_Loading and Parsing CSV data

This example displays a simple summary of a CSV file’s contents, showing the file size in kilobytes, the number of rows, and the number of columns as large text on a white page. It loads data from a GitHub-hosted CSS named colors CSV file using d3.csv, then uses d3.csvFormat to measure the formatted data length for the size estimate. The results are inserted into a pre element via d3’s data join and the textContent property, with no charts or visual encoding beyond the numeric readout.

Loading thumbnail…

Homework3_mousefollower

A circle follows the mouse cursor across an SVG canvas, updating its center position in real time as the pointer moves. The visualization uses React's `useState` and `useCallback` hooks to track mouse coordinates via an `onMouseMove` event handler on the SVG element. The circle is rendered as an SVG `<circle>` element with a fixed radius, while the component imports the `arc` function from D3 v5, though it is not used in the displayed logic. The initial circle position is centered at (480, 250) on a 960×500 canvas.

Loading thumbnail…

Homework1

The visualization shows a grid of six by three cartoon faces, each randomly generated with varying eye and mouth sizes against a yellow background. Built with React and rendered as SVG, the code composes reusable components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`) and leverages D3’s `arc` generator to draw the smiling mouth shape. The faces are instantiated via `d3.range` and mapped in `index.js`, with attributes like `eyeRadius` and `mouthWidth` set through `Math.random()` for each iteration.

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays global economic groups, with countries colored by their economy category. Selecting a color in the legend interactively filters the map, highlighting only countries in that group while dimming the others. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` projections for geographic rendering, and `d3.scaleOrdinal` with the spectral scheme for color assignment. Data comes from the world-atlas dataset, loaded via `d3.tsv` and topojson. The map supports zooming through the `d3.zoom` event handler.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This visualization displays the size and structure of a CSV dataset containing CSS named colors, reporting its file size in kilobytes, row count, and column count as large text. It demonstrates two equivalent approaches for loading and parsing CSV data: the primary method uses `d3.csv` with a Promise, while commented alternatives show `fetch` combined with `async`/`await` and `d3.csvParse`. The data originates from a GitHub gist containing named color values. The example highlights modern asynchronous JavaScript patterns for handling external data in D3 v5.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays file size, row count, and column count from a CSV file containing CSS named colors. The visualization uses D3 v5’s `d3.csv` method to load and parse the data asynchronously, then presents the statistics in a large HTML `<pre>` element. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, illustrating different approaches to handling remote data loading. The data source is a GitHub gist hosted CSV file.

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is centered on a full-screen SVG canvas, drawn with a circular face, two eyes, and a smiling mouth arc. The illustration uses React to render the SVG elements and D3’s `arc` generator to create the mouth path. The face’s radius is derived from the window height, and the component positions all shapes relative to the screen center, with the eyes offset by fixed pixel distances and the mouth arc spanning a half-circle.

Loading thumbnail…

Hello HTML

A collection of smiley faces is rendered as SVG elements using React components. Each face is composed of a yellow background circle, two eyes, and an arc-shaped mouth, with positions and sizes randomized through JavaScript's `Math.random`. The face geometry is assembled from modular React components, while D3's `arc` generator creates the mouth path. The example demonstrates a React and D3 integration, with 18 faces generated using D3's `range` function.