AuliaAmirullah15

@AuliaAmirullah15·7 public vizzes

Customizing Axes

This bar chart displays population estimates for ten countries, revealing size comparisons from China’s largest figure down to Mexico’s smallest. The visualization customizes both axes: a left axis omits domain lines and tick marks for a cleaner look, while a bottom axis formats large numbers using D3’s `format` function to abbreviate values with suffixes like “B” for billions. The code uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for positions, and renders as static SVG rectangles.

Apr 15, 2023

Loading thumbnail…

Visualization

This bar chart displays the population of the top ten most populous countries, using a horizontal layout with population values on the x-axis and country names on the y-axis. The visualization is built with D3 v7, using `scaleLinear` and `scaleBand` for the axes, while `axisLeft` and `axisBottom` generate the tick marks. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles, with the population values converted from thousands to absolute numbers.

Apr 15, 2023

Loading thumbnail…

Customizing_Axes

This bar chart displays the populations of ten countries, sorted from largest to smallest, with China and India leading. The visualization uses D3 v7 with an SVG rendering approach. It employs `d3.scaleLinear` for the population axis, `d3.scaleBand` for country categories, and `d3.axisLeft` and `d3.axisBottom` to render the axes. Data loads from a CSV file via `d3.csv`, with population values converted from thousands to absolute numbers.

Apr 15, 2023

Loading thumbnail…

Making A Bar Chart

A horizontal bar chart displays population estimates for ten countries, from China's 1.4 billion to Mexico's 130 million, using D3 v7. The code loads CSV data via d3.csv, converts population values, and renders SVG rectangles scaled with d3.scaleLinear and d3.scaleBand axes. d3.axisLeft and d3.axisBottom generate the country and population tick marks.

Apr 15, 2023

Loading thumbnail…

Let's make a face ith D3.js!

This example builds a smiling face out of basic SVG shapes, then animates its eyebrows with a looping transition. D3 v7 selects the SVG and uses the `arc` generator to draw the mouth as a half-ring path, while circles and rectangles form the eyes and brows. The animation runs for two seconds per eyebrow movement, creating a repeated up-and-down motion. The code demonstrates D3 selections, transitions, and the `arc` API, all rendered directly to SVG.

Apr 13, 2023

Loading thumbnail…

HTML Cars Report

This example demonstrates a static SVG composition of geometric shapes—circles, rectangles, a thick line, and a polyline—arranged in a scaled and translated group. It shows how basic SVG elements can be combined with CSS styling and inline attributes to create a structured visual report. The code loads D3 via UNPKG, uses the `import` statement for both D3's `select` function and a local ES6 module, and renders the shapes directly in a 960x500 SVG canvas. No interactive behavior or data binding is present; the focus is on layout, grouping, and stroke customization.

Apr 12, 2023

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of cars, displaying a list of vehicles under a specified price threshold. It loads a hardcoded JSON array of car data and filters it to show only those priced below 2000 dollars. The report is rendered as plain text within a preformatted HTML element. The code uses a Promise to simulate a two-second data loading delay, then applies a custom filter and formatting logic. It imports local ES6 modules for data fetching and report generation, though it does not use any D3.js functions despite the file structure.

Apr 11, 2023