Upamanyu-ml

@Upamanyu-ml·6 public vizzes

Fork of Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates customized D3 axes, featuring a horizontal bar chart rendered with SVG. The code uses D3 v5 utilities such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the plot, with custom tick formatting that converts billions into a readable format. The chart includes styled gridlines, axis labels, and a title, with data loaded from a CSV file.

Feb 6, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from United Nations World Population Prospects, loaded via `d3.csv`. It shows each country as a horizontal bar with a linear population scale and a banded country scale, demonstrating axis customization through `d3.axisLeft` and `d3.axisBottom` with tick formatting that abbreviates large numbers. The chart uses `d3.scaleLinear` and `d3.scaleBand` for scales, removes unnecessary axis domains and lines, and adds styled labels and a title via SVG text elements. The population values are multiplied by 1000 after parsing.

Feb 6, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization customizes D3 axes by removing default domain lines and tick marks, and reformatting population labels using `d3.format` to abbreviate large numbers. It uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with annotations for the title and axis label placed via D3 selections. The bars are rendered as SVG rectangles, with data loaded from a CSV file.

Feb 4, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

A sad smiley face drawn entirely with SVG shapes demonstrates basic D3.js DOM manipulation and animation. The code uses `select` to target the SVG element and `append` to create a yellow circle, eyes, and rectangular eyebrows. A `transition().duration()` sequence moves the eyebrow group down and back, creating a repeated frowning motion. The mouth is generated using the `arc()` generator from D3's shape module with specified inner and outer radii and angle values.

Feb 2, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS can be combined to create a simple vector composition. It shows a series of circles, rectangles, lines, and a path, scaled and translated through nested `<g>` elements with inline transform attributes. The code uses the `scale()` and `translate()` SVG transformations, along with CSS classes to define stroke properties like `stroke-linejoin` and `stroke-linecap` for the path. HTML and CSS handle page layout, while the SVG elements, with attributes like `fill` and `stroke-width`, determine the visual styling. The scene is rendered directly in the browser as an SVG graphic.

Jan 30, 2021

Loading thumbnail…

Cars Report

This example displays a text-based car report listing vehicles under $2,000, formatted as “year make model: price.” It shows a loading message while `getCars` simulates a two-second asynchronous delay via `setTimeout` before resolving a hardcoded JSON array of five cars. The `generateReport` function filters the data by price and maps each car through `formatCar` to produce the final output, which is written into the DOM using `textContent` on the `#message-element` pre element.

Jan 29, 2021