dabrze3@gmail.com

@dabrze·7 public vizzes

DV Group 2

This example shows the diameters of the eight planets and Pluto as horizontal bars, sorted from largest to smallest, using an SVG bar chart. The chart is generated with D3 v6, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for the axes. Data is loaded from a CSV file and rendered as `rect` elements.

May 31, 2021

Loading thumbnail…

SVG Playground

This example presents an empty SVG playground built with D3 v6, offering a blank canvas for creating and experimenting with vector graphics. The page loads the D3 library and establishes a CSS-styled body, while the accompanying JavaScript logs "Hello" and the D3 object to the console. It demonstrates a minimal setup for SVG-based data visualization, relying on D3’s core API and CSS for layout, with no pre-defined marks or data bound to the scene.

May 31, 2021

Loading thumbnail…

DV Group 1

This chart shows the diameters of the planets in our solar system as a horizontal bar chart, using data loaded from a CSV file. The bars are drawn as SVG rectangles, with a linear scale for the diameter values and a band scale for the planet names, sorted in descending order. The visualization is built with D3 v6, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` for the axes. The chart is rendered into an SVG element within an HTML page.

May 31, 2021

Loading thumbnail…

D3 Barchart

This example visualizes the diameters of planets in our solar system using a horizontal bar chart built with D3.js. The bars are rendered as SVG rectangles, scaled using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, which lists planet names sorted in descending order by diameter. The chart imports data from `planets.csv`, converts the diameter strings to numbers, and displays axes generated with `d3.axisLeft` and `d3.axisBottom`. The SVG canvas is 960 by 500 pixels, with margins applied via a group transformation.

May 30, 2021

Loading thumbnail…

D3 Playground (Full)

A D3 Playground demonstrates fundamental D3.js APIs through interactive SVG manipulation. The example renders a red circle and two arc paths using the d3.arc generator, all positioned within a group element. Method chaining builds the SVG structure, while a two-second transition.attrTween rotates the group, showcasing dynamic animation. The code highlights basic D3 selection, attribute setting, and template literals for coordinate calculations in a simple HTML page.

May 30, 2021

Loading thumbnail…

D3 Playground

This example presents a minimal D3 playground that sets up an SVG canvas and initializes the D3 library. The main JavaScript file logs a message and the d3 object to the console, while the accompanying CSS defines a basic font size and styling for a line class. The HTML structure loads D3 v6 from a CDN and links to external styles and scripts, demonstrating a simple template for building SVG visualizations with D3 and CSS. The current code does not render any data or visual elements beyond the empty SVG container.

May 30, 2021

Loading thumbnail…

SVG Playground

This example shows three identical SVG figures arranged in a row, each displaying a yellow circle with a rectangular hat, but dressed in different colors. A separate group of green lines, one straight and one zigzag polyline, crosses below them. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path` within grouped `<g>` tags, applying transforms, fills, strokes, and CSS classes. D3 v6 is loaded for scripting, but the visualization relies entirely on static SVG markup without data binding or dynamic updates.

May 30, 2021