Ramandsb

@Ramandsb·5 public vizzes

Making a bar chart

A smiling face built from SVG shapes demonstrates D3’s arc generator and chained transition methods. The code draws a yellow circle for the face, two arc paths for closed, winking eyes, and a lower arc for the mouth, all centered within a 960×500 viewport. Using d3.arc with explicit inner and outer radii and start/end angles, the example shows how to construct curved paths without external data. The React starter wraps D3 v5 selections, while commented-out code hints at possible animated eye transitions via .transition().duration().

Aug 23, 2020

Loading thumbnail…

Making a bar chart

This example demonstrates the initial stage of building a bar chart, where raw CSV data is loaded and logged to the console. The code uses `d3.csv` to fetch population data from `data.csv`, converts the population strings to numbers with `+d.population`, and selects the SVG element via `d3.select`. The chart itself does not yet render bars; instead, it prepares the data pipeline within a React framework, relying on d3.v5 for parsing and the SVG container defined in `index.html`. The visualization shows only the data-loading and transformation step.

Aug 23, 2020

Loading thumbnail…

Shapes with Svgs

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and an open path—directly within an SVG canvas. The rendering approach uses raw SVG markup with React, where the `index.js` file sets up a minimal React component that outputs a greeting message, though the primary visualization is hardcoded in `index.html`. Styling is applied via an external CSS file, which defines classes for the line group and its path element, setting stroke colors, widths, and line-join properties. The shapes are organized in a group with a light blue fill and black stroke, positioned through SVG transforms.

Aug 21, 2020

Loading thumbnail…

Html cars reports

This example presents a minimal React-based web page titled “Cars Reports,” displaying a static, unstyled list of three items where the first item is highlighted in red via a CSS class. The interface renders a large monospace font for all text. The application uses React and ReactDOM to mount a trivial “Hello React” message, while the actual report content is hardcoded in `index.html`. The styling is defined in `styles.css`, and the README indicates it serves as a React starter template.

Aug 21, 2020

Loading thumbnail…

Cars

The visualization displays a static "Cars" title in large centered text. The React application renders a single message element using ReactDOM. This starter example uses React 16.13.1 from unpkg, with the main component defined as a simple functional component that returns a styled div. The rendering approach relies on React's virtual DOM to mount the element into the root container. No interactive features or data sources are present in this minimal setup.

Aug 21, 2020