Skip to main content
Log in
A

anvesh12

@anvesh12·6 public vizzes

Loading thumbnail…

Bar Chart

This bar chart displays the population of ten countries, using horizontal bars ordered from most to least populous. The visualization relies on D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to vertical positions. Data is loaded from a CSV file, with population values multiplied by 1000. The chart renders in SVG, with steel-blue bars and axes positioned via margins, and includes a left y-axis for country labels and a bottom x-axis for population values.

Oct 2, 2019
Loading thumbnail…

Image Test

A smiling yellow face with black eyes, eyebrows, and a mouth is drawn in the center of an SVG canvas using D3 v5. The eyes are circles, the eyebrows are rectangles, and the mouth is an arc path created with the `arc` generator. The eyebrows animate vertically via chained `transition.attr` calls, moving downward and then returning to their original position over two seconds each way. The svg is selected and manipulated directly with D3 selections, and the face is centered using a translated group element.

Oct 2, 2019
Loading thumbnail…

HTML Cars Report

This example demonstrates a basic HTML-based report of used cars, displaying a list of three vehicles with their model, year, and price in a monospace font. It shows how simple styling can emphasize specific data points, with the Honda Accord highlighted in red using a CSS class. The page uses plain HTML markup with an unordered list and inline CSS styling to present the information. The underlying structure relies on standard HTML elements and CSS rules, rendering the report directly in the browser without any JavaScript libraries or data-fetching APIs.

Sep 29, 2019
Loading thumbnail…

Face with D3.js

This example demonstrates how to build a simple face-like composition using basic SVG shapes and D3.js. It shows circles, rectangles, and lines arranged with SVG grouping and transform attributes to create a structured layout. The code utilizes SVG elements directly within an HTML file, applying styling through classes and inline attributes, including colored fills, stroke widths, and line joins. A pink group with green strokes and a green-bordered path illustrate how different SVG properties combine visually. The rendering approach is purely SVG-based, with no data binding or dynamic data sources involved.

Sep 29, 2019
Loading thumbnail…

HTML Cars Report

This example demonstrates a basic HTML-based report of used cars, displaying a list of three vehicles with their model, year, and price in a monospace font. It shows how simple styling can emphasize specific data points, with the Honda Accord highlighted in red using a CSS class. The page uses plain HTML markup with an unordered list and inline CSS styling to present the information. The underlying structure relies on standard HTML elements and CSS rules, rendering the report directly in the browser without any JavaScript libraries or data-fetching APIs.

Sep 29, 2019
Loading thumbnail…

Cars Report

The Cars Report visualization shows a loading state followed by a text-based report of cars newer than 2009, displaying each vehicle’s make, model, year, and price. It uses asynchronous JavaScript with a Promise from the custom `getcars` function, which parses an embedded JSON array after a 2-second delay, then filters and formats the data via `gen_report_cars` and `formatCar`. The interface relies on plain DOM manipulation to update a `<pre>` element’s textContent, styled with an Ubuntu font on a teal background.

Sep 29, 2019