Aloha1403

@Aloha1403·6 public vizzes

Making a bar chart

This bar chart displays population counts for North African countries using horizontal bars. The chart loads data from a CSV file, cleans the population values by removing spaces and multiplying by 1000, then renders SVG rectangles. It uses d3.csv for data loading, d3.scaleLinear for the x-axis population scale, and d3.scaleBand for the categorical y-axis positioning of countries. The bar widths correspond to population values, with each bar’s height set by the band scale’s bandwidth.

Feb 12, 2020

Loading thumbnail…

Making a bar chart

This example demonstrates the initial steps of building a bar chart, showing population data for North African countries as it is loaded and processed from a CSV file. The visualization currently only sets up the SVG canvas dimensions via `select` and `attr`, while the core chart rendering is not yet implemented. The code imports `select` and `csv` from D3 v5, reads the `data.csv` file, converts the population values from strings to numbers, and multiplies them by 1,000 to reflect actual population counts. The bar chart itself has yet to be drawn, as only the data preparation phase is visible.

Jan 16, 2020

Loading thumbnail…

let's make a face

A yellow circle with a black outline serves as a face, featuring two black eyes and a curved mouth created with the `arc` generator. The left eye animates horizontally via chained `transition().duration()` calls, shifting 50 pixels to the right and back over two seconds, while the right eye and mouth remain static. Using D3 v5 selections, the SVG elements are appended inside a centered group and the animation relies on D3’s built-in transition system. The face is rendered entirely with SVG shapes on a 500×500 canvas.

Jan 16, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—positioned and styled directly in HTML. It shows how CSS classes and inline attributes control fill colors, strokes, and grouping via SVG `<g>` elements. The code uses no external libraries, relying on native SVG elements and a linked `styles.css` file for styling. A global transform translates a grouped set of shapes, while the `.lines` class applies black strokes with a green, round-joined path, illustrating CSS’s role in SVG presentation.

Jan 14, 2020

Loading thumbnail…

HTML CARS REPORT

This example displays a basic car sales report listing three vehicles with their model years and prices. The page uses an unordered list to present the data, with one entry highlighted in blue through the `.highlighted` CSS class. It relies on plain HTML for structure and a separate stylesheet for formatting, setting the document to a monospace font at a large size. The visualization does not incorporate any JavaScript libraries or dynamic data handling, functioning purely as a static styled list.

Jan 14, 2020

Loading thumbnail…

Untitled

This visualization presents a report on cars using an HTML page. The page displays a title, "Cars Report," and uses standard HTML elements to structure the content. The rendering is simple, relying on basic HTML tags like `<h1>` for the heading and `<title>` for the browser tab, without any complex data libraries or JavaScript. The data source is not visible in the provided code, and the visualization is a static, non-interactive document that outlines the report’s header.

Jan 14, 2020