idlevalor

@idlevalor·3 public vizzes

Making a Bar Chart

This example demonstrates how to build a bar chart using D3.js v7, displaying either population data by country or monthly credit totals. The visualization renders as SVG, with bar orientation switchable between horizontal and vertical layouts through a scaleBand and scaleLinear pairing. The code loads data from CSV or JSON files via d3.csv and d3.json, then processes transactions to aggregate monthly credits. A class-based structure manages the chart dimensions, scales, and data mapping.

Sep 14, 2021

Loading thumbnail…

D3 (Data Driven Documents)

This example uses the D3.js library to draw a stylized smiley face entirely with SVG primitives. The code sets up a canvas, then builds facial features—a yellow circle, two eyes, eyebrows, a nose, and a mouth—using `circle`, `rect`, and `path` elements. Key D3 APIs include the `select` function to target the SVG root and the `arc` generator to construct the curved paths for the nose and mouth. A `.transition().duration(2000)` animation moves the right eyebrow downward over two seconds, while the left eyebrow remains static. All rendering is handled through SVG.

Jul 25, 2021

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report generator that filters a list of used cars by price and formats the results. It uses static JSON data defined in the source code, containing five car objects with make, model, year, and price properties. The application filters for cars priced under $2,000, formats each entry using a custom `CarFormatter` utility, and displays the output in a large `<pre>` element. The code leverages ES6 modules and imports, along with JavaScript’s native `JSON.parse`, `filter`, and `map` methods, but does not use D3 or other visualization libraries.

Jul 23, 2021