tanvirmahdad

@tanvirmahdad·7 public vizzes

Making a Bar Chart

This example shows a horizontal bar chart comparing the population of ten countries, from China down to Mexico, based on United Nations data. Using D3 v6, the visualization maps population values to bar widths with a linear scale and country names to vertical positions with a band scale. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, while `d3.csv` loads the dataset and `d3.max` calculates the domain. The bars are drawn as SVG rectangles with steelblue fill, and the population values are converted from thousands to raw numbers in the loading callback.

Jan 30, 2021

Loading thumbnail…

Let's make a face with D3.js !

A friendly face built from SVG primitives in React uses D3 v6 selectors to attach elements to an empty SVG container. The face is centered via a translated group, with circles for eyes and a path generated by the D3 `arc` generator for the mouth. Eyebrows, rendered as rectangles, animate upward and back down using chained `transition().duration()` calls. The drawing relies on D3's `select` and `arc` APIs, with hardcoded numeric coordinates for feature placement.

Jan 30, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. It shows how presentation attributes like `fill` and `stroke` can be set inline or via classes, and how transforms scale and translate groups of elements. The React-based code uses plain SVG markup in JSX, with a separate CSS file controlling stroke styles and line joins. The visualization is static, with no interaction or data binding, purely illustrating geometric primitives and styling mechanisms.

Jan 30, 2021

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML report listing used cars with their model years and prices. The data is hardcoded directly in the markup, not loaded from an external source. It uses basic HTML elements like `<h1>` and `<ul>` for structure, while CSS styles the page with a monospace font and highlights the first car in red. JavaScript is mentioned in the README but is not present in the actual files.

Jan 30, 2021

Loading thumbnail…

HTML_Playground

This example displays a vehicle report generated from a static JSON dataset. It demonstrates asynchronous data fetching and report generation within an HTML page. The code uses JavaScript's `Promise` and `setTimeout` to simulate a two-second loading delay. The `getCars` module parses the JSON, while `generateReport` filters and formats the car entries into text lines, which are then injected into the preformatted element of the page via `document.getElementById`. The visualization is purely text-based, showing the data without any graphical charts.

Jan 29, 2021

Loading thumbnail…

Cars Report

This visualization presents a report on cars, displaying a data-driven summary in a clean web interface. The page uses the React framework to structure its components and relies on an external bundle for logic. It does not employ d3 or other charting libraries, instead rendering through standard HTML and CSS within the provided structure. The report’s concrete visual output is not directly visible in the source files, as the main data and rendering logic reside in the separate `bundle.js` script, loaded via the HTML page.

Jan 29, 2021

Loading thumbnail…

Fork of HTML Cars Report

This example displays a simple list of used cars with prices, highlighting the 2012 Nissan Leaf in red. It demonstrates basic HTML structure with an unordered list and a separate CSS stylesheet for styling. The page uses standard HTML elements like `h1` and `ul`, with CSS rules for font size, monospace font, and the `.highlighted` class. The rendering approach relies entirely on static markup and CSS, with no JavaScript or external libraries.

Jan 29, 2021