Skip to main content
SimilarExport ZIP
100%

Fork of HeatMap: Career Data

✓ Published0🌍 Public
HHaili0109
Last edited Nov 26, 2024
Created on Nov 26, 2024

This heatmap visualizes student grades across five subjects, encoding each value as a colored, rounded rectangle. Rendered as an SVG using D3.js v4, it employs `d3.scaleSequential` with an interpolateCool color scheme, `d3.axisBottom` and `d3.axisLeft` for categorical axes, and interactive tooltips triggered by mouse events. The data comes from a CSV file containing grades for ten students across five subjects.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HeatMap: Career Data

This heatmap visualizes career data from a CSV file, using color intensity to represent values across two categorical dimensions. The chart employs `d3.scaleBand` for axes, `d3.scaleSequential` with the `d3.interpolateInferno` color scale, and SVG rectangles for cells. A tooltip appears on hover to show exact values. The cells are made draggable through `d3.drag`, and during a drag, all rectangles in the same group turn red, highlighting their column.

PPedram
88% match
Loading thumbnail…

Fork of HeatMap: Career Data

This fork of a D3.js heatmap visualizes career data from a CSV file, using an inferno color scale to encode values. The chart displays groups along the x-axis and variables on the y-axis, with each cell’s color intensity reflecting its numeric value. Built with D3 v4, it employs `d3.scaleBand`, `d3.scaleSequential`, and `d3.interpolateInferno` for axes and color mapping. Interactive tooltips show exact cell values on hover, while the SVG rendering includes axis labels and a title.

HHaili0109
86% match
Loading thumbnail…

Fork of HeatMap: Career Data

This heatmap visualizes career-related data across grouped categories, with each cell colored on a scale from 1 to 100 using the `d3.scaleSequential` interpolator `d3.interpolateInferno`. Rows and columns are defined by the `group` and `variable` fields from the CSV data, rendered as an SVG via D3 v4. Hovering a cell triggers a custom tooltip showing the exact value, while the chart includes axis labels, a title, and a subtitle. The code loads data from a remote GitHub CSV source.

謝謝惠喻
86% match
Loading thumbnail…

Fork of HeatMap: Career Data

This heatmap visualizes career-related data across two categorical dimensions, with each cell’s color intensity mapped to a numeric value using a sequential Inferno color scale. The chart is built with D3 v4, rendering an SVG grid where row and column labels are derived from the dataset’s `group` and `variable` fields. Interactive tooltips display the exact cell value on hover, while the code relies on `d3.scaleBand` for axes, `d3.scaleSequential` for coloring, and `d3.interpolateInferno` for the palette, sourcing data from a raw GitHub CSV file.

謝謝惠喻
84% 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
81% 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
78% match
Loading thumbnail…

Heatmap

This heatmap shows monthly values across five years, with a white-to-orange color scale indicating magnitude from 0 to 2. Rendering as SVG, the visualization uses d3.scaleBand for month and year axes, d3.scaleLinear for color encoding, and d3.csv to load the heatmap.csv data. A tooltip appears on hover, displaying the exact cell value via mouseover, mousemove, and mouseleave handlers.

Pprateekvasi
77% 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
76% match