scatter_heatmap

100%

scatter_heatmap

✓ Published0🌍 Public

Last edited Jan 20, 2023

Created on Jan 20, 2023

A scatter-heatmap visualization traces a player's movement through a game map over time, using a slider to scrub through timestamps and reveal player positions as colored dots. The map is divided into named regions like "A Main" and "Mid Top," each mapped to x/y coordinates via a custom `addPosition` function. Built with D3 v6, it uses `scaleLinear` for axes, `sliderBottom` for time navigation, and SVG rendering. Data comes from a CSV file containing game telemetry, with positions annotated as labeled points.

AI-generated description

A demonstration of basic HTML and CSS.

MIT Licensed

Similar vizzes

Loading thumbnail…

HeatMap Try 2

A heatmap-like scatterplot visualizes a time series of x and y positions as a smooth, green path with a Catmull-Rom curve, overlaid with individual circle marks. The code loads CSV data from a GitHub gist, parses numeric coordinates, and uses D3 v7 scales, axes, and the `d3.line` API with `curveCatmullRom.alpha`. The SVG rendering fills the browser window, with axis tick labels styled via CSS.

KKhanAzmat

76% 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

72% match

Loading thumbnail…

Heatmap

A d3.js heatmap displays a matrix of values using the Inferno color scale, with each cell representing a combination of a group and variable from a CSV dataset loaded from GitHub. The SVG rendering includes band scales for axes, rounded rectangles, and a tooltip that shows the exact value on hover. The code uses d3.scaleSequential with d3.interpolateInferno, d3.axisBottom, d3.axisLeft, and mouse event handlers for interactivity.

Bbepnye@gmail.com

72% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the heat values of different foods, mapping each food type along the y-axis and its heat value along the x-axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to position circular marks, with SVG rendering for the plot. Data is loaded from a local JSON file via `json()`, and axes are generated using `axisLeft` and `axisBottom`. The x-axis labels are formatted with `format`.

Aanniehoshi18

72% match

Loading thumbnail…

Player Data Scatter Plot

This scatter plot visualizes player data, showing age on the x-axis and matches played on the y-axis, with each point’s radius scaled to the player’s score. The data is loaded from a CSV file via `d3.csv`, and the visualization is rendered as an SVG using D3 v6. Axes are created with `axisLeft` and `axisBottom`, while `scaleLinear` and `scaleSqrt` map the data values. A categorical color scheme distinguishes score ranges, and axis labels are added as text elements.

Aaniteshterala2000

72% match

Loading thumbnail…

HeatMap: Career Data

A d3.js heatmap displays career data across two categorical axes, with each cell colored using an inferno sequential scale. The visualization maps group and variable labels to x and y coordinates, while the cell intensity reflects a numeric value. Hovering a cell reveals its exact value via a custom tooltip. Built with d3.js v4 and the d3-scale-chromatic library, the SVG chart loads data from a remote CSV file and includes axis labels, a title, and a subtitle.

SSimon Hackbert

71% match

Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang

70% match

Loading thumbnail…

Heat Map

A 5x5 heat map visualizes numeric values from a CSV file as colored squares, using a quantile scale with a sequential orange colormap to encode values from 1 to 20. The SVG rendering employs d3.csv for data loading, d3.scaleQuantile for color mapping, and d3.axisRight and d3.axisBottom to display axes. A tooltip appears on mouseover, showing the exact value of each cell.

CChai94

70% match