Skip to main content
SimilarExport ZIP
100%

JS Bin

✓ Published0🌍 Public
KKacieW
Last edited Jun 29, 2017
Created on Jun 29, 2017

A clickable list of dog breeds and scenes displays a corresponding image and a click counter. The interface presents eight dog photos from Flickr, each paired with a name. Selecting a name turns it green and loads the associated picture; clicking the image increments and displays its specific count. The code uses vanilla JavaScript with DOM manipulation via `document.createElement` and `addEventListener` to handle the interactions, storing data in a JavaScript object model.

AI-generated description

Similar vizzes

Loading thumbnail…

JS Bin

This interactive dog clicker displays a list of dog names and images, allowing users to select a dog and click its photo to increment a visible click counter. Clicking the "Admin Change" button reveals a form for editing the selected dog’s name, image URL, and click count, with save and cancel options. The interface is built with plain HTML, CSS, and vanilla JavaScript, using DOM manipulation methods like `createElement`, `addEventListener`, and `classList.toggle` to manage the view and form interactions.

KKacieW
87% match
Loading thumbnail…

JS Bin

The visualization is a dog image selector that displays a photo of a dog when a user clicks its name in a list. Each click makes the corresponding image visible, while hiding all others, and inserts a caption with the dog's name above the image. The page uses plain JavaScript with `addEventListener` for click handling, `classList.add` to toggle the `active` class, and `createElement`/`insertBefore` to manage the caption. No external libraries are used; the images are loaded from static Flickr URLs via `img` tags.

KKacieW
87% match
Loading thumbnail…

Fork of ICE 8 - Animal Tree

This interactive animal tree visualization displays a hierarchical dataset of dog breeds, from the root "Dog Breed" down through subcategories like Retriever, Bull Dog, and Poodle to specific breeds such as Golden Retriever and French BullDog. Built with React and rendered as animated SVG, the diagram uses D3.js libraries including `d3.layout.tree` for tree layout, `d3.svg.diagonal` for link projections, and D3 transitions to animate node expansion and collapse. Clicking nodes triggers smooth animated updates, with nodes and links styled via CSS attributes like purple circles and red strokes.

IIndhuKrishnaraj
66% match
Loading thumbnail…

Family Tree of a Dog

This interactive family tree visualizes the hierarchical classification of dog breeds, using a JSON data structure to define nested categories like Retrievers and Hounds. Built with D3 v3 within a React framework, the SVG rendering uses `d3.layout.tree()` to position nodes and links, with collapsible behavior triggered by clicks. Each node is color-coded by type and includes a tooltip with breed details, while the chart supports zooming and panning via `d3.behavior.zoom`. Animations smoothly transition nodes during updates, and the entire tree is dynamically sized based on its depth and breadth.

VVamsi Krishna
64% match
Loading thumbnail…

ICE Assignment 5

This example displays a static image of a dataset related to dog breeds, presented as an embedded SVG graphic with a dark background. The visualization is rendered using raw SVG markup within an HTML page, which also includes styled headings and a preformatted text block. The code imports D3.js v7 from a CDN and uses basic CSS for layout and typography. The SVG references an embedded base64-encoded PNG image, which is repeated as a pattern, serving as the primary visual content for the breed data.

Aachyutanandmishra17@gmail.com
63% match
Loading thumbnail…

Dog's Image

A cartoon dog is drawn on a light green background with grass, created entirely through D3.js DOM manipulation. The example builds SVG elements—including circles for the head, body, and eyes, ellipses for ears, rectangles for legs, and paths for the tail and mouth—using plain JavaScript `document.createElementNS` and `setAttribute` calls, without any data binding or transitions. The dog is static, showing a smiling face with a small nose and curved mouth. This demonstrates how to construct a vector illustration from scratch by directly manipulating the DOM.

BBelede Rahul
62% match
Loading thumbnail…

Dog Image

This example renders a stylized dog face in a web page using React and D3.js, drawing the entire illustration with SVG elements. The visualization shows a silver elliptical head with brown ears, eyes, a black nose, whiskers, and a curved mouth, all composed of geometric primitives and arc paths. The code constructs the mouth, eyes, and ears using D3’s `arc()` generator, while React manages the component structure and rendering. The page loads React 17 and D3 v7 from CDNs, and the final image is produced entirely via SVG, with no external data—the design is hand-coded rather than data-driven.

BBelede Rahul
62% match
Loading thumbnail…

Fork of Dog Family Species

This interactive tree diagram visualizes the ancestry of dog breeds, tracing from a root labeled "Mudd" through mixed-breed crosses to purebred species like Labrador Retrievers, Chow Chows, Golden Retrievers, and German Shepherds. Built with D3.js version 3.5.17, the visualization uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to position nodes and draw curved links. Users can click any node to collapse or expand its children, triggering smooth 750-millisecond transitions via `d3.transition`. The SVG rendering includes styled circles and text, with the data structure defined as a hierarchical JSON array in JavaScript.

Rrakeshkommineni
61% match