Importing

100%

✓ Published1🌍 Public

Last edited Jun 7, 2021

Created on May 6, 2021

This example presents an image slider interface for a data import feature. A full-screen banner cycles through four background images with corresponding text panels, navigated by arrow controls. The slider logic uses plain JavaScript DOM manipulation, tracking image and text indices via `getElementsByTagName` and `classList`. The page also includes the D3 v5 library and the SheetJS (xlsx) library, loading them via external script tags, suggesting integration for data file handling within the static HTML structure styled by CSS.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Importing

This example demonstrates an interactive data import and sampling interface built with D3 v5 and React. It allows users to upload Excel or CSV files, parses the data using the read-excel-file library, and displays a dropdown menu for selecting a column to group by. It incorporates a scatter plot with animated circle transitions, implemented using D3 scales, axes, and transition delays. The visualization uses data from the auto-mpg.csv dataset and renders with SVG.

Ddanish-nix

75% match

Loading thumbnail…

d3 class practice

This example demonstrates a before-and-after image comparison slider with a draggable white divider. The interface lets users interactively reveal one of two photographs by dragging the resizer horizontally across the container. The implementation relies on plain JavaScript event listeners for mouse and touch interactions, manipulating DOM element widths and positions directly. It uses CSS gradients and flexbox for styling, with images sourced from Pexels, and does not utilize any D3 or React APIs despite the title.

TThandolwethu Shakes Dlamini

70% match

Loading thumbnail…

Cards

This example presents a horizontally scrollable gallery of interactive cards, each displaying an image from a shuffled list of external URLs on its front and descriptive placeholder text on its back. Clicking a card triggers a CSS 3D flip animation, revealing the back content, while hovering lifts the card and shifts neighboring cards horizontally to create a stacked effect. The implementation combines plain JavaScript for DOM manipulation and event handling, alongside D3.js v6 for data shuffling and image loading, with all visual effects driven by CSS transitions and transforms.

MMTR

68% match

Loading thumbnail…

time slider

This example showcases various interactive slider configurations built with D3 v5 and the d3-simple-slider library. It demonstrates core functionalities like simple continuous sliders, step-based sliders for discrete values, and time-based sliders using the `d3.timeFormat` and `d3.timeScale` for date handling. Additional features include filled sliders, range selection, vertical orientation, customized handles, and smooth transitions. The visualization also presents practical applications, such as a New York Times-style slider and a color picker, all rendered as SVG elements with Bootstrap styling for layout.

Mmanoj-soft

68% match

Loading thumbnail…

slider

A playable slider scrubs through a date range from January to July 2020, with a draggable handle and animated play button. The time-based scale uses `d3.scaleTime` with `d3.drag` for interaction, and the handle position updates a text label showing the formatted date. The animation advances the slider via `setInterval`, incrementing the current value until it reaches the end. Data comes from `circles.csv`.

Aashpradhan01123

67% match

Loading thumbnail…

Blank Canvas

A slider controls the background hue of an SVG canvas. Dragging the handle updates the color in real time, with tick labels showing the degree value. The visualization uses d3.drag for interaction, d3.interpolate for a smooth intro animation, and d3.hsl to convert the slider value to a color. The code imports d3 via `import {} from 'd3'` and renders with SVG elements.

RRostyslav

67% match

Loading thumbnail…

Auto Image Slider

This example displays an automatic image slider for navigating three nature photographs. It cycles through images every two seconds, with preview and next arrow buttons and clickable dots for direct slide selection. The code uses vanilla JavaScript with `getElementsByClassName`, `addEventListener`, and `setTimeout` for automation, while CSS manages positioning, transitions, and active states for navigation elements.

KKacieW

67% match

Loading thumbnail…

D3 and React data import

This example displays a loading state followed by a full-width vertical stack of colored horizontal bars, each representing a CSS named color from a CSV file. The code uses React hooks (`useState`, `useEffect`) to fetch and store data, while D3’s `csv` function loads the remote dataset. Each row renders a `div` with a background color from the ‘RGB hex value’ column, creating a visual spectrum strip.

RRahul Gupta

66% match