eco2nomy

@eco2nomy·5 public vizzes

Table

This example displays tabular data on heating systems, showing values for floor area, energy consumption, and CO2 emissions across seven fuel categories. It builds an HTML table using D3.js v3’s `d3.csv` to load the data and `d3.select` with `.append` to create the table, headers, and rows. The table features zebra striping and responsive design for mobile devices. Column headers are created from the dataset’s keys, and each cell shows its corresponding value with a `data-th` attribute for labeling on smaller screens.

May 25, 2022

Loading thumbnail…

Fork of Grid Idea 1

This dashboard mockup presents a NASCAR statistics interface as a CSS Grid layout using HTML and inline styles. The view establishes a structural hierarchy with a full-width header and five placeholder plot regions, plus a legend, arranged across a three-column grid. The code employs the `display: grid` property with `grid-template-rows` and `grid-template-columns` to create a responsive frame, while the header uses a `grid-column: span 3` rule to stretch across all columns. The rendering approach is purely structural, relying on the Quackit grid example as a basis, though the plots themselves are unimplemented placeholders indicating the design is a work-in-progress.

May 24, 2022

Loading thumbnail…

Smiley Face

A grid of 18 randomly generated smiley faces is rendered as React components, each with slightly varied eye positions, mouth size, and stroke width. The faces are drawn using SVG circles and an arc path, with the mouth path computed via d3’s `arc` generator. The `FaceContainer` translates the SVG group to the center of each 160x160 viewport, and the code uses React 18 and d3.v7 to map over a range of indices, producing the array of faces.

May 12, 2022

Loading thumbnail…

Shapes with SVG and CSS

A collection of SVG shapes demonstrates basic geometric styling and grouping. Circles, rectangles, lines, and a path are rendered with varied fills, strokes, and transforms. The example uses native SVG elements directly in HTML, with CSS classes like `.lines` controlling stroke properties and attributes such as `stroke-linejoin` for path corners. No external libraries are used; rendering relies entirely on SVG markup and CSS styling.

May 5, 2022

Loading thumbnail…

HTML Cars Report

This example shows a static HTML report listing three cars with their model years and weights, highlighting one entry in red. It uses plain HTML markup with an inline `<style>` block for the message layout, a linked `styles.css` for body typography and the `.highlighted` class, and no JavaScript. The data is hardcoded in the list items, and the rendering relies entirely on CSS for styling rather than any visualization library or framework.

May 5, 2022