Pragati Porwal

@pragatiporwal·6 public vizzes

Making bar chart

This bar chart displays the population of the ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017. The code uses d3.csv to load the data, then applies d3.scaleLinear and d3.scaleBand to map population and country names to the SVG canvas. Axes are rendered with d3.axisLeft and d3.axisBottom, while rectangular bars are appended and styled with a steelblue fill.

Jul 21, 2021

Loading thumbnail…

Customizing axes

This example displays a horizontal bar chart of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate. The chart’s axes are customized: the y-axis labels appear in red with tick lines removed, while the x-axis uses a tick format that converts values to billions with a ’B’ suffix. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, and includes green tick lines and a purple title.

Jul 14, 2021

Loading thumbnail…

D3 smily

This example renders a yellow circle as a smiling face over an SVG canvas using D3 and React. The code constructs the face with circles for eyes and a donut-shaped arc path for the mouth, then animates the eyebrows via chained `transition().duration()` calls on a group element. Using D3’s `arc` generator and SVG attributes, the visualization demonstrates basic shape composition and timed transforms without external data.

Jul 12, 2021

Loading thumbnail…

Implement SVG in HTML

This example demonstrates basic SVG shapes embedded directly in an HTML document without any JavaScript libraries. It shows circles, rectangles, and a line rendered as SVG elements, with some shapes using default black fills while others specify explicit fill colors like red and green. A `<g>` group element applies a shared fill color, stroke color, and stroke width to multiple shapes, and the `transform` attribute translates the group’s position. The page also includes a simple CSS rule that removes the body margin and hides overflow, while an unused `.lines` class suggests styling for potential path elements.

Jul 12, 2021

Loading thumbnail…

HTML car report

This example demonstrates a simple HTML and CSS car report, displaying a title and a two-item list of car models with prices. The page uses semantic HTML elements like `h1` and `ul` for structure, while a separate stylesheet (`style.css`) controls the presentation. The CSS sets a large monospace font size for the body and applies a red highlight to the first list item via the `.highlight` class. The report is static, with no JavaScript or data-binding libraries; all styling and layout are handled directly through CSS.

Jul 11, 2021

Loading thumbnail…

Cars Report

The Cars Report demonstrates dynamic data formatting by loading a JSON array of car objects, filtering them by price, and rendering a text-based report onto a web page. It shows how JavaScript modules, array methods like `filter` and `map`, and template literals work together to transform raw data into readable output. The code uses the `JSON.parse` API via an embedded JSON string, the DOM `document.getElementById`, and `textContent` to update the page. The report lists each car's year, make, and price in the HTML `<pre>` element, displaying all entries under the specified price threshold.

Jul 11, 2021