salvar2134

@salvar2134·6 public vizzes

Making a Bar Chart!

This horizontal bar chart uses D3 v5 to display the populations of the ten most populous countries, with the x-axis representing population and the y-axis listing countries. The visualization loads country and population data from a CSV file and renders the bars as SVG rectangles within an SVG container. It employs D3’s scaleLinear, scaleBand, axisBottom, and axisLeft to map data to pixel coordinates and format the axes. The bars are colored steelblue, and the chart is framed with fixed margins. Population values are scaled by 1,000 during data loading.

Oct 13, 2020

Loading thumbnail…

Let's make a face with D3.js Exercise!

A yellow smiley face, built entirely with SVG in an HTML page, features animated eyebrows that repeatedly move up and down to change its expression. The example demonstrates fundamental D3.js v5 DOM manipulation by using `d3.select` to grab the SVG element, `d3.append` with `attr` to construct circles and rectangles for the face, and an `arc()` generator for the mouth. A recursive `transition()` chain, with a 2-second duration each way, drives the eyebrow motion within a grouped `g` element.

Sep 28, 2020

Loading thumbnail…

Let's Make a Face

A yellow circle with two black eye circles and an arc-based mouth forms a simple face on an SVG canvas. The example uses d3.select to target the SVG element and d3.arc to generate the mouth path with specified inner and outer radii. The rendering is done through D3 v5's SVG manipulation, positioning each shape with absolute coordinates in a 960-by-500 viewport.

Sep 28, 2020

Loading thumbnail…

Shapes With SVG

This example demonstrates basic SVG shape rendering using static circle and rectangle elements defined directly in the HTML markup. It shows how coordinates, dimensions, and fill colors control each shape’s appearance, with a grouping element (`<g>`) applying a shared blue fill and vertical translation to a second row of shapes. The scene uses plain SVG attributes without external libraries, paired with a minimal CSS file that resets margins and hides overflow for a clean full-viewport canvas.

Sep 24, 2020

Loading thumbnail…

HTML Cars Report

This example demonstrates a simple HTML report of used car listings, presenting three vehicles with their model years and prices in a bulleted list. The page highlights the first car, a 2012 Nissan Leaf, in red to draw attention. The visualization relies on basic HTML structure and CSS styling, specifically using the `highlighted` class to apply the red color and a large monospace font via the `body` selector. No JavaScript libraries or data files are used; the information is hardcoded directly in the markup.

Sep 18, 2020

Loading thumbnail…

Cars Report

This example displays the text "Cars Report" centered on a plain HTML page, with the body styled to use a very large font size and text alignment. The code loads a minimal HTML document and includes an inline script that logs a "Hello JavaScript!" message to the browser console. It uses no external libraries or data sources, relying solely on vanilla HTML and JavaScript. The page serves as a bare-bones starting point for a React-based visualization, as noted in the README.

Sep 16, 2020