HeatMap

100%

✓ Published0🌍 Public

Last edited Nov 11, 2021

Created on Nov 10, 2021

This heatmap visualizes automobile specifications from a small dataset, displaying cars along the x-axis and attributes such as engine size, speed, power, and price along the y-axis. Cell colors, rendered with the `d3.scaleSequential` and `d3.interpolateInferno` color scale, encode the power value of each car. The chart is built with D3 v4, using `d3.scaleBand` for axes and SVG rectangles for cells. Interactive tooltips appear on hover, showing the car’s power value.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Heat Map

This heat map visualizes five car models from a CSV dataset, plotting engine displacement (hubraum) on the x-axis and car name on the y-axis, with cell colors encoding horsepower (leistung) using conditional fills (SteelBlue, LightSteelBlue, and Orange). Built with D3 v7 and SVG rendering, the code uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for the axes. The cells are drawn as rectangles with attribute-based data binding, and the legend text explains the maximum power and speed values.

Sshatomouimena

86% match

Loading thumbnail…

Heatmap of mtcars dataset

This heatmap visualizes the classic mtcars dataset, showing the relationship between car models and their attributes such as mpg, horsepower, and weight. Each cell is color-coded using d3.scale.category10 based on the raw value from the CSV data, with a tooltip revealing the specific car, property, and value on mouseover. The chart is built with D3 v3, using SVG rectangles positioned via a grid, and includes a brief animation for tooltip opacity transitions. The x-axis represents cars, the y-axis represents properties, and the legend is intended to display a color scale, though the color scale is not fully implemented.

JJverma

81% match

Loading thumbnail…

Cars HeatMap 01

This interactive visualization displays the performance of various car models across multiple dimensions, specifically showing the relationship between a selectable metric, such as Acceleration, Displacement, or Horsepower, and fuel efficiency (Miles_per_Gallon). The view is structured as a small multiples grid, with each panel representing a different country of origin. The visualization uses Vega and Vega-Lite’s API to perform a KDE2D density estimation, which is then rendered as a heatmap using the `viridis` color scheme. Users can dynamically adjust the smoothing bandwidth, cell size, and color scale resolution, while a legend shows the normalized density probability.

OOleJRask

80% match

Loading thumbnail…

Cars HeatMap 02

This interactive visualization presents small multiples of 2D density heatmaps for automobile statistics, showing the relationship between variables like Acceleration, Displacement, and Horsepower against Miles per Gallon, faceted by the car’s Origin. Built with Vega-Lite and Vega specifications, it uses the `kde2d` transform for kernel density estimation and a `heatmap` transform to render colored grids. Users can adjust bandwidth, cell size, resolution (independent or shared scales), and toggle between count and probability density via bound signals. The data comes from the cars.json dataset, rendered through Vega’s image marks with a viridis color scheme.

OOleJRask

80% match

Loading thumbnail…

P5js Heatmap

This p5.js heatmap visualizes the relationship between car brands and two metrics, Horsepower and MPG, using a color-coded grid. The color of each cell transitions from orange (lower values) to green (higher values) based on the data's minimum and maximum. Built with the p5.js library, the visualization loads CSV data from a Gist, calculates color values using the `map()` function, and renders the results as colored squares. The chart includes labels for the axes and a color legend indicating green for higher and orange for lower values.

Vvishusikka

77% match

Loading thumbnail…

Cars Statistics

The visualization displays automotive statistics from a CSV dataset, showing relationships between variables like horsepower, MPG, weight, and acceleration. Four small multiples scatterplots compare horsepower against different attributes, while a large interactive scatterplot lets users select any two columns via dropdown menus. The main chart animates points using D3 transitions with staggered delays. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` for scales and axes, rendering SVG circles with opacity styling.

Aala-wahibi

76% match

Loading thumbnail…

Cars Report

This example displays a scatterplot of car data, examining relationships between attributes like horsepower and miles per gallon. The visualization loads D3 v5 from a CDN and uses D3’s scales, axes, and SVG rendering to plot circles for each vehicle. It also demonstrates importing local ES6 modules and updating a text element with a message. The chart’s interactive behavior is not shown, focusing instead on static data encoding through positioning and color.

SShalin Shah

76% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot from D3 v5 visualizes automotive data, mapping each car’s weight on the x-axis and horsepower on the y-axis using d3.scaleLinear and SVG circles. The axes are generated with d3.axisBottom and d3.axisLeft, and tick labels are formatted using d3.format. The chart loads data from a remote CSV file and applies a semi-transparent steelblue fill to the circles, with margins, axis labels, and a title configured for readability.

Rratschke

76% match