Office

100%

✓ Published0🌍 Public

Last edited Feb 25, 2024

Created on Feb 25, 2024

Forked from People

This example uses D3.js (v6) to draw a simple office scene in an SVG container. It shows a wooden desk with legs, a person seated in a chair, a laptop, keyboard, mouse, coffee cup, and a small plant. The code appends rectangles, circles, lines, and a path onto the SVG, using attributes like `x`, `y`, `width`, `height`, and `fill` to style each element. All shapes are positioned manually with fixed coordinates, producing a static, schematic illustration of a workspace.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Hello D3

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It shows how to compose geometric primitives within nested groups, applying transforms like `scale()` and `translate()`, and using both CSS rules and presentation attributes for fill, stroke, and stroke-width. The visualization uses HTML5 `<svg>` elements directly in the markup, with JavaScript and CSS linked externally, and does not include any data or interactive behavior.

HHe Jianfeng

71% match

Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania

69% match

Loading thumbnail…

d3-svg-play-1

This example demonstrates basic SVG shape rendering and interaction within a React page. It shows a static composition of circles, rectangles, lines, and a complex path with embedded arc commands, plus a group containing a red-striped circle, text, and a crossing line. The visualization uses raw SVG elements styled with CSS, where circles transition to white fill and change to a semi-transparent red on hover. The page includes an “Hello HTML!” heading and sets the SVG canvas to 960 by 700 pixels, rendering shapes directly without external data.

JJP Adams

69% match

Loading thumbnail…

SVG basic template

This example shows how to draw basic SVG shapes—a circle, rectangle, line, and path—within a static 900×400 viewport. It relies on raw SVG elements embedded directly in the HTML, using inline attributes like `cx`, `r`, `stroke`, and `fill` to style each shape with colors such as red, green, and violet. No JavaScript libraries or data sources are involved; the visualization simply demonstrates the fundamental syntax of SVG markup for geometric primitives and paths in a React-free HTML page.

DDeiby Cabrera

69% match

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of office supply sales, displaying the top 15 items with their unit counts. The visualization uses React to manage the component state and render the SVG elements, while D3 provides the data-loading and scaling utilities, including `csv`, `scaleBand`, and `scaleLinear`. The data is fetched from a GitHub Gist URL, and the bars are drawn as SVG `<rect>` elements with custom tick marks and labels for both axes.

SSaiipriiya

69% match

Loading thumbnail…

Shapes

This example displays a simple set of primitive shapes—a light blue rectangle, a blue circle, a green ellipse, a red line, and text—drawn in an SVG canvas, alongside HTML heading and paragraph elements. The page also includes a placeholder for a map and code that fetches salary data from a GitHub-hosted CSV file using `d3.csv()`, parsing the state and mean salary fields into console output. The visualization uses hardcoded shape coordinates within an inline SVG, with styling defined through CSS classes.

Jjyjuni

69% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, lines, and paths—rendered on a static 960×500 canvas. Overlapping red and green circles show layering, while path elements illustrate coordinate-based drawing commands. The code uses plain SVG markup within an HTML page, with D3 v7 loaded via a script tag but not actively driving any dynamic behavior. The visualization focuses on the raw vector graphics API, showing how basic geometric primitives combine to form static illustrations.

TTanguy RENAUDIE

69% match

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example visualizes office supply sales data as a horizontal bar chart showing units sold per sales representative. React component state manages the loaded data, while D3’s `scaleBand` and `scaleLinear` map sales values to bar widths. The code uses D3’s `csv` parser to fetch the dataset, then renders SVG rectangles and manual tick labels with gridlines, all within a React `svg` element. ReactDOM’s `render` method mounts the chart into the page’s root div.

SSaiipriiya

69% match