Fuertes503

@Fuertes503·5 public vizzes

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries based on 2019 estimates from World Population Prospects. It uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for ticks. Population data is loaded from a semicolon-delimited CSV file using D3's `dsv` function, then scaled by a factor of 1000 for display.

Jul 17, 2020

Loading thumbnail…

Let's make a face with D3,js

A cheerful, cartoon-style face is drawn in a yellow circle with black outlines. The face includes two eyes, animated eyebrows that shift up and down, a nose, and a smile, all positioned using calculated offsets. Built with D3.js v5, the SVG elements are created and manipulated programmatically. The code uses d3.select to access the SVG, d3.arc to generate the nose and mouth paths, and d3.transition to animate the eyebrows' vertical position over a series of timed movements.

Jul 15, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with inline attributes and CSS. Hardcoded shape properties like fill color and stroke are set directly in the markup, while the `.lines` class applies black strokes and ten-pixel widths, with the path receiving a teal stroke and rounded line joins. A scale transform enlarges the entire group, and a nested translation repositions the second set of shapes. No external libraries are used; the visualization relies solely on native SVG elements and a linked stylesheet.

Jul 14, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple three-item list of used cars with model years, makes, and prices. It demonstrates a basic HTML report styled with a CSS file, where the first list item is highlighted in red using a class selector. The page uses plain HTML structure with a linked stylesheet to set the font size and family, and it does not rely on JavaScript or external visualization libraries. The data is hardcoded directly in the markup.

Jul 14, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of five used cars, displaying each vehicle’s year, make, model, and price in a formatted list. The report filters out any car priced above a set maximum, showing results directly in the browser’s `<pre>` element. It uses JavaScript modules, including `getCars()` returning a Promise with a two-second delay to mimic an API, `formatCar` for string concatenation, and `generateReport` chaining `filter` and `map`. The data is defined inline as JSON parsed into objects, with the HTML and CSS providing large, centered text.

Jul 14, 2020