prat1507

@prat1507·6 public vizzes

Making a Bar Chart

This example shows a horizontal bar chart ranking countries by population, using a CSV dataset of ten nations. The bars are rendered as SVG rectangles, with each country’s population scaled linearly across the chart width and country names positioned along a band scale. The code loads data with `d3.csv`, converts population values to thousands, and builds the chart using `d3.scaleLinear`, `d3.scaleBand`, and `d3.max` for domain calculation.

Aug 28, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face with black eyes, eyebrows, and a mouth is rendered in SVG. The eyebrows animate upward and then back down over four seconds using chained D3 transitions. The code uses D3 v5 selections and the `d3.arc` generator to draw the mouth, while circles and rectangles create the other features. All elements are centered via a translated group.

Aug 28, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic shapes using SVG and style them with CSS. It shows circles and rectangles with default black fills, colored variants with explicit fill attributes, and a group with a light blue fill and black stroke. The code also illustrates line and path elements within a translated group, styled via CSS classes. The visualization relies on vanilla SVG elements—circle, rect, line, path—and CSS rules, with scaling and translation transforms applied to groups.

Aug 28, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how D3.js can render a simple text message to the screen. It displays the phrase "Hello VizHub!" in large, styled text using the `select` API to target a div element and set its content. The code imports the message from a separate ES6 module and applies custom CSS with the Ubuntu font and a dark background. It serves as a minimal introduction to D3’s DOM manipulation and module-based project structure.

Aug 28, 2019

Loading thumbnail…

HTML Cars Report

This example displays a simple, static HTML report of three used cars with their model years and prices. It shows a plain-text list where the first item, a 2012 Nissan Leaf, is highlighted in red to draw attention. Built with basic HTML and styled by a linked CSS file, the page uses a `<ul>` unordered list and a `.highlighted` class to apply the color change. The monospace body font and large text size give the report a clean, technical appearance without any JavaScript or external libraries.

Aug 28, 2019

Loading thumbnail…

Cars Report

This example demonstrates a data-driven report that filters a list of cars by price and displays the results as text. It uses `setTimeout` to simulate asynchronous data loading with a two-second delay, showing a “Loading…” message first. The code employs standard JavaScript promises (`new Promise`) and string interpolation in `formatCar` to construct each car’s description. The report is generated by chaining `filter`, `map`, and `join` in `generateReport`, and the page updates via `textContent`. Styling uses CSS with a custom font and dark background.

Aug 28, 2019