rmaldonadosnz

@rmaldonadosnz·6 public vizzes

Making a bar chart.js

A bar chart template renders a static SVG with no bars drawn, as the code only selects the `<svg>` element and reads its height and width attributes using D3 v6’s `select`. The chart area is currently empty, awaiting data and scales to be defined in the missing `bundle.js`. The example demonstrates the initial setup for a D3-based visualization, using SVG for rendering and relying on external D3 modules.

Feb 20, 2021

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v6 to build a simple, abstract face by styling an SVG element. It begins by selecting the `<svg>` element with `d3.select` and setting its background to red through the `.style` method. Additional CSS classes define stroke properties for path elements, using a dark teal color and rounded line joins and caps. The visualization demonstrates basic SVG manipulation and D3’s selection and styling capabilities, though it does not draw facial features beyond the prepared styling. A red canvas with stroke-ready lines is the initial output.

Feb 14, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes in an SVG canvas, displaying circles and a rectangle with default black fills except for one red circle. The scene is rendered entirely through SVG markup, with external styling handled by a CSS stylesheet. The code uses the D3.js `select` function to update a message element’s text content, while also showcasing an ES6 module import from a local file. The page layout is set with CSS to remove margins and hide overflow.

Feb 14, 2021

Loading thumbnail…

Fork of HTML Cars report svg

This example displays a minimal HTML-based car report with a title, a list of car models, and a highlighted entry for the 2012 Range. The page uses plain HTML and CSS inline styling, with the `.highlighted` class turning the first list item red. JavaScript initializes a D3 selection to set the text content of a `message` div from an imported ES6 module. The visualization demonstrates basic DOM manipulation and styling with d3.select and CSS, though it does not include any data-driven charts or complex rendering.

Feb 14, 2021

Loading thumbnail…

Untitled

This example shows a network of nodes connected by curved links, with the layout driven by a force-directed simulation. The visualization uses `d3.forceSimulation` to position the nodes and `d3.forceLink` to manage the edges, while `d3.forceCollide` prevents overlaps. Each node is rendered as a circle using SVG, and links are drawn with `d3.line` or a path generator to create curved connections. The code initializes random data for nodes and links, then updates the simulation on each tick. The interface is bare-bones, with no additional UI or interactions beyond the animated force layout.

Feb 14, 2021

Loading thumbnail…

Fork of Hello World

This example demonstrates how to display a simple text message in a web page using VizHub. It shows a large, styled greeting centered on a dark blue background. The implementation imports the `select` function from D3.js to target a specific DOM element by ID and update its text content with a message imported from a local ES6 module. Styling is applied through an external CSS file that imports the Ubuntu font from Google Fonts, sets the background color, text color, and font size.

Feb 14, 2021