B

Belede Rahul

@Belede·16 public vizzes

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js within a React application, displaying a list of universities categorized by tier (Tier1, Tier2, Tier3). The visualization uses D3's built-in CSV parsing utilities to fetch and process the data from an external source, then renders the results as styled SVG elements. The interface includes a header describing the data, decorative SVG icons, and a message container for displaying the parsed output. The chart is implemented with React, utilizing D3 v7 for data loading and SVG for rendering, with MIT licensing.

Loading thumbnail…

Fork of Fork of loading and parsing CSV data

This example demonstrates how to load and parse a CSV file using D3.js v7, displaying a summary of the dataset in a simple HTML page. The page uses `d3.csv` to fetch a restaurant review dataset and computes key statistics, including file size in kilobytes and bytes, row count, and column count, which are then displayed in a `<pre>` block. The page also embeds an external SVG visualization and applies a pink background with centered text styling via CSS. The example highlights the basic workflow of reading CSV data with D3 and presenting the parsed metadata in the browser.

Loading thumbnail…

Fork of Fork of loading and parsing CSV data

This example demonstrates loading and parsing a CSV file with D3.js, displaying a summary of the dataset in the browser. The page uses `d3.csv` to fetch a CSV file containing restaurant review data, then computes and displays the file size in bytes and kilobytes, the number of rows, and the number of columns in a <pre> container. The page also includes an embedded SVG graphic and is styled with a pink background and centered text. The visualization is rendered as SVG and follows a simple, educational format to show basic D3 data-loading and parsing techniques.

Loading thumbnail…

Teddy Bear

This example uses D3 to draw a teddy bear composed entirely of SVG circles, an ellipse for its nose, and rectangular hat pieces. The visualization shows a simple, stylized bear face with a body, ears, eyes, and a smile, all rendered on a pink background. The code selects a container, creates an SVG canvas sized to its dimensions, and appends each shape using D3’s selection and attribute methods, such as `append` and `attr`. The bear’s features are positioned relative to the container’s center, with a maroon hat layered on top to complete the illustration.

Loading thumbnail…

Teddy Bear Img

This example uses D3.js to build a static teddy bear illustration from scratch, combining circles, lines, polygons, and rounded rectangles to form the character’s body, face, hat, and limbs. The code demonstrates fundamental DOM manipulation by binding arrays of geometric data to SVG elements via `selectAll().data().enter()`, setting attributes like coordinates, radii, and stroke styles directly. The visualization, rendered on a pink background with an opacity of 0.721, shows how basic shapes assemble into a recognizable figure, with explicit coordinates and styling for each part.

Loading thumbnail…

Fork of P5.js Starter

This example shows a teddy bear composed of simple geometric shapes—ellipses for the head, body, eyes, and nose, an arc for the mouth, and lines for the limbs—all positioned on a sky-blue canvas. The bear’s parts are drawn from JSON data loaded via p5.js’s `loadJSON` in the `preload` function. The visualization demonstrates how to integrate p5.js with ES modules and hot reloading in VizHub, using the p5 instance API to attach the canvas to a container and handle updates smoothly. It highlights drawing primitives like `ellipse`, `arc`, and `line` within a p5 sketch.

Loading thumbnail…

Image

This example uses D3.js v7 to draw a simple cartoon dog from geometric shapes defined in an external JSON file. The visualization shows a brown dog with a circular body and head, floppy elliptical ears, white eyes, a black nose, and a curved mouth line, all positioned within a 400x400 SVG canvas. The code loads the shape coordinates and colors from the JSON data using `d3.json`, then appends SVG elements—including `circle`, `ellipse`, and `path`—to render each part of the dog. The mouth is drawn as a path with a stroke, while the remaining features use filled shapes, demonstrating a straightforward declarative approach to building vector graphics with data-driven attributes.

Loading thumbnail…

Fork of Smiely Cat Fork

This example uses D3 v7 to draw a simple dog shape in an SVG canvas. It renders a brown head and body as two overlapping circles, adds black eyes, and a curved mouth path. The code builds the graphic by appending SVG elements—circles for the face, eyes, and body, and a path for the smile—directly to the page. The data is hardcoded within the script, with no external dataset or interactive behavior. The rendering relies solely on SVG attributes like cx, cy, r, and d, demonstrating basic shape composition with D3’s selection and append methods.

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.

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.

Loading thumbnail…

Fork of Fork of Main.js

This example uses emoji characters to build a playful nature scene entirely through JavaScript and CSS. The code programmatically creates and positions elements like a sun, tree, and flowers using `document.createElement` and `appendChild`, with each element assigned a CSS class for absolute positioning. The scene also includes animated additions like a bird, cat, dog, and butterfly, all styled via external CSS that defines their colors and placement. The rendering approach relies on the DOM’s structure and CSS layout properties rather than a canvas or SVG, making it a lightweight, static composition that demonstrates simple programmatic DOM manipulation.

Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a simple cartoon dog built entirely from basic geometric shapes, with a brown body, head, ears, legs, and a face featuring eyes and a nose. It demonstrates how to draw scalable vector graphics using D3.js selections and SVG elements. The code in index.js uses the `select` function and `append` methods to create circles, ellipses, and rectangles, positioning them relative to the container’s width and height. The visualization is rendered in a Svelte component, with a static gray background and no interactive behavior, serving as a foundational template for creative shape-based drawing.

Loading thumbnail…

Fork of Circles with D3

This example uses D3 to draw a stylized dog entirely from SVG primitives, with each body part—body, head, ears, eyes, nose, and legs—created as a distinct circle, ellipse, or rectangle. The code computes all positions relative to the container’s width and height, so the dog scales with the viewport. It relies on D3’s `select` and `join` methods to append the SVG canvas and shapes, while hardcoded fill colors define the brown body, white eyes, and black nose. The result is a simple, non-interactive illustration that demonstrates manual coordinate placement and shape composition without data binding or animation.

Loading thumbnail…

Fork of D3 Transitions

This example demonstrates a static SVG drawing of a red-brown cat created with D3.js v7. The visualization shows the cat’s body as an ellipse centered in a 400x400 viewport with a light green background. The code appends an SVG element using `d3.select` and `append`, then sets geometric attributes like `cx`, `cy`, `rx`, and `ry` along with a fill color. It serves as a minimal fork of D3 transitions, focusing on basic shape rendering rather than animated behavior.

Loading thumbnail…

Fork of Circles with D3

This example draws a static cartoon cat using D3.js and SVG within a Svelte component. The code constructs the animal entirely from primitive shapes—ellipses for the body, circles for eyes, polygons for ears, and paths for the mouth and tail—hardcoded to a 400x400 canvas. It uses D3’s selection and append methods to build each element, with the `drawAnimal` function exported for reuse. The rendering is purely declarative SVG, with no data binding or interactions, serving as a simple template for creative modification.

Loading thumbnail…

Fork of Circles with D3

This example draws a static cartoon cat using D3.js and SVG within a Svelte component. The code constructs the animal entirely from primitive shapes—ellipses for the body, circles for eyes, polygons for ears, and paths for the mouth and tail—hardcoded to a 400x400 canvas. It uses D3’s selection and append methods to build each element, with the `drawAnimal` function exported for reuse. The rendering is purely declarative SVG, with no data binding or interactions, serving as a simple template for creative modification.