spikemap

100%

✓ Published0🌍 Public

Last edited Jan 17, 2025

Created on Jan 17, 2025

This map uses a spike or bar projection to visualize the distribution of Old Faithful geyser eruption durations and waiting times. The D3.js SVG visualization renders the two-dimensional data set, with each point represented by an upright spike. The height and position of these spikes correspond to the `eruptions` and `waiting` values from the `faithful.json` file, creating a 3D-like terrain. The chart employs a simple scene graph with an orthographic projection, mapping the numeric fields to both the x/y placement and the extruded z-axis of the spikes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Old Faithful Scatter Plot

This scatter plot visualizes the Old Faithful dataset, showing the relationship between eruption time and waiting time. The visualization uses overlapping semi-transparent green circles to convey data density, with larger circles at lower opacity revealing concentrated clusters. Built with D3 v4, the code loads tab-separated data via `d3.tsv` and renders SVG circles with dynamically adjusted radii. The interactive component responds to mouse movement on the page, recalculating the circle radius based on cursor position to explore different density levels. Axes are styled with custom tick marks and labels using D3's axis components.

CCurran Kelleher

77% match

Loading thumbnail…

Old Faithful Dataset

This example visualizes the Old Faithful geyser dataset, plotting eruption duration against waiting time to reveal a clear bimodal clustering pattern. The code uses D3.js to render a scatterplot, with `d3.scaleLinear` mapping the data to pixel coordinates and `d3.axisBottom` and `d3.axisLeft` generating the axes. Each point is drawn as a circle using SVG elements. The data is loaded from a TSV file via `d3.tsv`, containing 272 observations of eruption lengths in minutes and subsequent waiting times. The visualization highlights the two distinct groups of short and long eruptions.

CCurran Kelleher

76% match

Loading thumbnail…

Old Faithful Contour Plot B

This visualization displays the Old Faithful geyser dataset as a smooth contour plot, with eruption time on the x-axis and waiting time on the y-axis. The code uses d3.contourDensity to compute density contours from the data, then renders them as filled SVG paths via d3.geoPath, with a sequential color scale from d3-scale-chromatic using interpolateGreens. Interactive bandwidth adjustment occurs on mousemove, altering the contour smoothing level dynamically. Axes are drawn using d3.axisBottom and d3.axisLeft, with data loaded via d3.tsv from a GitHub gist.

OOleJRask

76% match

Loading thumbnail…

spikemap

This visualization, titled "spikemap," displays a world map rendered as an SVG. The map is generated by loading geographic data from the world-atlas dataset and processing it with the topojson library. The code utilizes d3.select to target the SVG element and d3.json to fetch the world map data. The map is drawn within a 960 by 500 pixel canvas, with the styling applied via an external stylesheet that removes default page margins.

Jjleviaguirre

75% match

Loading thumbnail…

Old Faithful HeatMap A

This interactive heat map visualizes the Old Faithful geyser dataset, showing the relationship between eruption duration and waiting time through a grid of colored rectangles. Using Vega-Lite’s binned aggregation, each cell’s color encodes the mean waiting time for eruptions within that bin, with a greyscale heatmap color scheme. The visualization is rendered as SVG via `vegaEmbed`, with the bin count dynamically adjusted based on mouse X position, triggering a re-render through the `d3.select` mousemove handler. Data is loaded from a TSV file using `d3.tsv`.

OOleJRask

75% match

Loading thumbnail…

Old Faithful HeatMap

This visualization presents the Old Faithful eruption dataset as a binned heatmap using Vega-Lite and D3 v4. It displays geyser eruption durations and waiting times on x and y axes, with color intensity representing the count of observations per bin. The heatmap dynamically updates in response to mouse movement, adjusting the bin count based on the cursor’s horizontal position. The code builds a Vega-Lite specification programmatically and renders it via vegaEmbed, while d3.tsv loads the source data from a GitHub gist.

SSagarikaS

75% match

Loading thumbnail…

Old Faithful HeatMap

This example visualizes the Old Faithful eruption dataset as a binned 2D heatmap, showing the joint distribution of eruption durations and waiting times through a green color scale. The visualization updates dynamically as the mouse moves across the page, adjusting the number of histogram bins along the x-axis based on the cursor’s horizontal position. Built with Vega-Lite and embedded via vegaEmbed, the chart renders as SVG, while d3.tsv fetches the raw data from a GitHub gist and d3.select listens for mousemove events to re-render the specification.

JJerfaas

75% match

Loading thumbnail…

Old Faithful HeatMap 03

This interactive heatmap visualizes the Old Faithful dataset, showing the relationship between eruption duration and waiting time through binned rectangular cells colored by count on a green scale. Rendered as SVG via Vega-Lite’s `rect` mark, the visualization updates dynamically as the mouse moves across the page, adjusting the maximum number of bins on the x-axis based on cursor position. The code uses Vega-Embed, Vega-Lite’s API, and d3.tsv for data loading, with the view’s legend offset to the left.

OOleJRask

74% match