sidobagga

@sidobagga·3 public vizzes

Fork of Animated Vehicle Consumption Scatterplot

This fork of the Animated Vehicle Consumption Scatterplot visualizes 2014 vehicle fuel consumption data from dipinpdinesh's GitHub repository. The scatterplot cycles through CO2 emissions, engine size, and cylinder count as the x-axis, plotting each against combined MPG on the y-axis. Using D3.js v6 with selection.join and transition methods, circles animate positions and axes update smoothly. The chart leverages scaleLinear, axisBottom, and axisLeft, with SVG rendering and a timer that reassigns the x-value accessor every 17 seconds.

Jan 12, 2023

Loading thumbnail…

Fork of Title to the Dot Scatter Plot - Good

This example shows a scatter plot of the Iris dataset, visualizing petal length versus sepal length with tooltips revealing exact coordinates on hover. The visualization is rendered as an SVG using D3 v6, with circles positioned using linear scales computed from the data’s extent. The code explicitly references the CSV via a GitHub gist URL, parses numeric columns, and employs `axisLeft` and `axisBottom` for labeled axes. The chart adapts to the browser viewport dimensions, and each data point includes a title element for interactive details.

Jan 12, 2023

Loading thumbnail…

Hippo HTML

A single red-outlined circle floats against an empty page, sized by CSS to occupy the full viewport. The example demonstrates a minimal SVG rendering approach, using a circle element with a transparent fill and a thick red stroke. The underlying HTML structure includes a message class set to an extremely large font size, though no text is present in the rendered output. This illustrates the simplest form of data visualization, where a single geometric shape serves as the entire graphical representation. The code relies on native SVG syntax within an inline `<svg>` tag, with no external JavaScript libraries or data sources involved.

Dec 20, 2022