Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Aanduskong
Last edited Dec 17, 2020
Created on Dec 16, 2020

This example demonstrates a dynamic heatmap visualization that maps a function across a two-dimensional grid. The code uses D3.js to create an SVG container, define scales, axes, and draw the heatmap by rendering pixel data onto a Canvas element via a foreignObject. The Canvas `createImageData` API is used to compute and display color values based on the linear mapping function, with opacity halved for transparency. The visualization updates interactively through inputs like sliders and checkboxes, which control the model parameters.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows a D3.js v4 heatmap that visualizes a matrix of values using the Inferno color scale, with an interactive tooltip that displays each cell’s exact value on hover. The chart loads CSV data from an external URL, builds band scales for the x and y axes, and renders colored rectangles with rounded corners. A title and subtitle are added via SVG text elements. The code also includes separate JavaScript modules for generating car reports and fetching JSON data, though these are not part of the heatmap rendering itself.

Jjesramyep1263
81% match
Loading thumbnail…

Untitled

This interactive heatmap displays hourly activity counts for each date, using a color gradient to show intensity variations. The visualization renders a grid of tiles positioned by date and hour bucket, with color encoding count values via a sequential scale. It cycles through multiple color interpolators automatically, including Viridis, Inferno, and sequential schemes from d3-scale-chromatic, while allowing manual selection. The code uses d3.csv for data loading, d3.scaleTime, d3.scaleLinear, and d3.scaleSequential to map values, with SVG rectangles and d3.axisBottom/d3.axisLeft for the chart’s axes.

Mmkt-ds
79% 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
77% 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
76% match
Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar
74% match
Loading thumbnail…

Untitled

This example displays an interactive 3D bar chart built with D3.js v2 and jQuery. It renders an SVG-based visualization where bars are grouped by categorical x-axis values, with drop shadows applied via SVG filters to create a 3D effect. The chart uses ordinal and linear scales to map data, and includes custom axis tick formatting for captions. The code initializes on document ready, transforming input data and building the chart within a scrollable container.

Sskambhore04
73% match
Loading thumbnail…

Untitled

This example presents a dynamic scatterplot that visualizes a dataset from the v3 source, mapping points that shift between states based on interactive forces. The visualization uses the HTML5 Canvas API’s `getImageData` method to sample pixel colors and enable readback of the rendered scene, while `d3.forceSimulation` drives the physics-based layout and motion of the nodes. A bare-bones `index.html` hosts the code, which draws the points as they relax into clusters and respond to real-time user drag interactions. The graph updates its edges and positions through iterative simulation steps.

JJared McCarver
73% match
Loading thumbnail…

Untitled

This example demonstrates a data visualization built with D3, showcasing modular ES6 imports and dynamic rendering directly in the browser. It loads D3 v3 from UNPKG and uses `d3.csv` to parse an external dataset, then renders the results using `d3.select` and `d3.scaleLinear` for mapping data values to visual properties. The visualization updates interactively, with transitions applied via `d3.transition` to smoothly animate changes in the data-driven elements, illustrating a complete workflow from data ingestion to interactive display.

MMonaYuan
73% match