dancingCars

@dancingCars·3 public vizzes

Let's make a page with D3.js

This example demonstrates how to build a simple SVG page using D3.js, with an empty 960×500 SVG canvas ready for dynamic content. The code loads D3 from a CDN and applies minimal styling—removing body margins and hiding overflow—while leaving the canvas blank for user additions. It shows the foundational setup for creating SVG-based visualizations with D3, including the HTML structure, linked stylesheet, and script inclusion. The page relies on the standard D3 v3 library and SVG rendering, with no additional data sources or interactive behavior implemented in the visible files.

Jan 31, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—a circle, rectangle, line, and path—styled with CSS classes and inline attributes, rendered with React. The SVG canvas uses a 960x500 viewport, with shapes grouped and transformed. CSS rules in `style.css` control stroke color, width, and fill, including a highlighted class. The code references plain SVG elements and CSS selectors, with React’s `index.js` handling a text message, though the visualization itself relies solely on static SVG markup and stylesheets.

Jan 31, 2020

Loading thumbnail…

Cars Report

This example displays a simple "Hello React!" message as a static report page. The visualization uses React to render a single div element with the class "message" into the root node. The code relies on the `ReactDOM.render` API to mount the React component, while the HTML file loads a pre-built `bundle.js`. No data source or charting library is used; the page serves as a minimal starter template for building React-based visualizations.

Jan 31, 2020