Skip to main content
SimilarExport ZIP
100%

Data Visualization - Assignment 1

✓ Published1🌍 Public
CCenz Wong
Last edited Feb 24, 2022
Created on Feb 21, 2022
Forked from Hello HTML

This example uses a 10×10 heatmap grid to visualize the density of 150,000 randomly generated points, with each cell colored on a gradient from white to royal blue based on point count. The visualization is rendered as SVG using D3.js v4, employing `d3.interpolateRgb` for color scaling and D3’s data-join to bind grid cells to rectangles. Points are binned into rows and columns via JavaScript math, and the minimum and maximum densities normalize the color scale. Axes are added with `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

MSBD5005 Assignment 1

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization - Assignment 1

This example visualizes the distribution of 150,000 randomly generated points using a static heatmap rendered as an SVG. The viewport is divided into a 10 by 10 grid, and each cell’s fill color encodes the density of points within it, using a white-to-blue interpolated color scale via `d3.interpolateRgb`. The code computes per-cell point counts to determine the minimum and maximum densities, then maps those values to the color range. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the grid rectangles are bound to data with `d3.selectAll().data().enter()`.

CCenz Wong
95% match
Loading thumbnail…

Untitled

This example shows a 10-by-10 heatmap of categorical data, where each cell’s fill pattern encodes a numeric value instead of color. Four texture patterns with different circle sizes are mapped to value ranges via a `d3.scaleOrdinal`. The chart is built with D3 v4, using `d3.scaleBand` for axes and SVG `<rect>` elements for cells. Data is loaded from a remote CSV file, and textures are generated with the textures.js library.

Zzoniyac
75% match
Loading thumbnail…

Example of Heatmap using D3 with React

This heatmap displays a 10-by-10 grid of values using a white-to-teal linear color scale (`d3.scaleLinear`) mapped from a CSV dataset loaded via `d3.csv`. The graphic uses React to render SVG rectangles for each cell, with `d3.scaleBand` positioning the rows and columns. Axis labels for groups (A–J) and variables (v1–v10) are drawn as SVG text elements. The full window is filled with the visualization, and the chart includes a title above the plot area.

LLewis Ward
75% match
Loading thumbnail…

Heatmap with D3 Overlay

This example displays a heatmap of 100 data points across 10 variables and 10 groups, with each cell colored on a teal-to-green gradient using d3.scaleLinear. A large white "D3" text overlay is positioned at the center of the SVG canvas, creating a visual watermark effect. The React component loads CSV data via d3.csv and renders the chart using d3.scaleBand for axes and SVG rect elements. The overlay text is drawn directly within the same SVG group, demonstrating how to combine data-driven visualizations with static annotations in a React-D3 workflow.

LLewis Ward
74% match
Loading thumbnail…

Heatmap D3 random

This example shows a 50-by-50 heatmap with randomly generated values, where each cell’s color scales from light teal to dark green. It renders as an SVG using React, with d3.scaleBand for x and y positioning and d3.scaleLinear for the color range. The data is created in-memory via Math.random, and the chart fills the entire browser window.

LLewis Ward
74% match
Loading thumbnail…

Untitled

This example shows a heatmap with pattern-filled cells instead of solid colors, using wave textures of varying density to represent values. The heatmap displays data for groups A through J and variables v1 through v10, loaded from a CSV file. The code uses the textures library to generate four wave patterns with different sizes, then maps values to these patterns via `d3.scaleOrdinal`. Each cell is drawn as an SVG `rect` positioned with `d3.scaleBand` for the x and y axes, with a black stroke and a fill from the selected pattern URL.

Zzoniyac
73% match
Loading thumbnail…

Heatmap

This heatmap visualizes the frequency of chess opening moves across a 10x10 grid of board positions, with color intensity representing move popularity. The visualization uses d3.scaleBand for axes, d3.scaleLinear for the color gradient from white to green, and d3.axisBottom/axisLeft for labels. Data loads from a CSV file containing sleep efficiency records, though the grid dimensions and labels are hardcoded. The code includes separate modules for axes and heatmap rendering, with d3.csv fetching and d3.selectAll joining rectangles to render cells.

MMartha Cash
73% match
Loading thumbnail…

Heatmap with tooltip

This example shows a 10x10 heatmap with a custom tooltip that reveals the exact value of each cell on hover. The data is loaded from a CSV file and rendered as colored squares, with a linear color scale mapping values from white to teal. Built with D3 version 6, the visualization uses `d3.scaleBand` for axes, `d3.scaleLinear` for the color encoding, and event listeners for mouse interactions. The tooltip is a styled HTML div appended to the page, positioned using the event’s coordinates and updated on mousemove.

LLewis Ward
72% match