viz

100%

✓ Published0🌍 Public

Last edited Dec 12, 2021

Created on Dec 12, 2021

This visualization presents data from a speed dating study, filtered to exclude participants from waves 6-9 and display attributes from three time periods. The code reads a CSV file from OpenML and uses d3.csv with a row converter function to transform the raw data. It then creates a fixed 400x400 SVG canvas using d3.select("body").append("svg"), though the visualization itself does not render any marks or shapes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a speed dating dataset, showing the total row and column counts, the file size in kilobytes, and the first ten rows formatted as JSON. It loads the data from a remote CSV file using D3’s `csv` method, then appends the summary and a formatted preview to the page. The code uses `csvFormat` to calculate file size and `JSON.stringify` for readable output.

MMihir Sawant

70% match

Loading thumbnail…

Hello VizHub!

This example displays a minimal D3.js setup that loads a small CSV dataset containing names, races, genders, and occupations. It initializes an SVG canvas and reads the data file using the `csv` function. The code logs the parsed data to the console but does not yet render any visual elements. The visualization relies on D3 v5, with the HTML page wired to load the `bundle.js` script and a separate stylesheet for presentation.

CChristopher Repka

70% match

Loading thumbnail…

viz_2

This visualization displays the top 10 most populous countries as a bar chart, though it lacks axes and labels, making the data difficult to interpret. The bars are rendered as SVG rectangles using React’s declarative component structure, with D3’s `scaleBand` and `scaleLinear` handling the positional and length scaling. The dataset is loaded asynchronously via D3’s `csv` from a remote URL, and the chart updates once the data arrives. The code uses D3 v5 and React 16.9, with the visualization outputting directly to an SVG canvas.

HHuldahMerlinKolli

69% match

Loading thumbnail…

Hello VizHub!

This example visualizes a simple dataset from a CSV file, displaying two fictional people with attributes like name, race, gender, and occupation. The code loads the data asynchronously with `d3.csv()` and logs it to the browser console, while the page itself only contains a static message div. The visualization uses D3 v5 alongside a minimal SVG element that is selected but not currently populated with any data-driven shapes or marks. The rendering approach focuses solely on demonstrating data loading without producing a visible chart.

CChristopher Repka

69% match

Loading thumbnail…

Viz Test

This example renders a static SVG visualization of a blue circle centered on a 600x400 canvas, with a hardcoded dataset of five countries and their GDP values prepared for display using D3’s `scaleOrdinal` and `schemeDark2` color scale. The code uses `d3.select` to append the circle and defines the data array, though no bar chart or other shapes are actually drawn from the dataset. The page loads D3 v6 via a CDN, and the SVG is styled with basic attributes like `stroke` and `fill`.

RRan Guin

69% match

Loading thumbnail…

Data Visualization

This example displays a static SVG composition featuring a black ellipse overlaid by a triangular form, paired with a text summary of a dataset. The page loads CSV data from a GitHub gist using `d3.csv` and reports its size in kilobytes, row count, and column count. The visualization uses D3 v7 for data parsing, while React is not actively employed despite being listed in the framework metadata, and the SVG rendering is hardcoded in the markup.

Hharika-1929

69% match

Loading thumbnail…

DataViz

This visualization displays a bar chart of the Morley speed-of-light experiment data, with experiment run numbers on the x-axis and speed measurements on the y-axis. The page includes Google sign-in functionality and a Bootstrap-styled navigation bar. Built with React, it uses D3 v5 APIs including `d3.csv`, `d3.tsv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to fetch data from a remote CSV and render the chart within an SVG.

MMisha Lubich

69% match

Loading thumbnail…

New Viz

This example displays a simple text summary of a CSV file’s size, row count, and column count in a large `<pre>` element. It loads the `Colors.csv` dataset via `d3.csv` and uses `d3.csvFormat` to calculate the byte size of the formatted data. The visualization is built with React 17 and D3 v6, rendering the message directly into the DOM via `document.getElementById` and `textContent`. The data source is a remote GitHub gist URL.

Aaljusa

68% match