Tebid Quinsy

@lagom-QB·7 public vizzes

ScatterPlot

A scatterplot displays the populations of the top 18 most populated countries in 2020, using UN estimates from the World Population Prospects. It uses D3.js v5 with SVG rendering, mapping population to a linear scale on the x-axis and country names to a point scale on the y-axis. The code employs `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` for tick labels, with red circles sized at a fixed radius. The background is styled with a light blue color, and axis labels and a title are included.

Jan 3, 2021

Loading thumbnail…

Face with D3.js

A stylized face drawn with D3.js animates its features on a dark background. The SVG canvas shows a yellow circle for the face, two black ellipses for eyes that transition between positions, and a rectangular mouth that widens and moves downward via D3 transitions. Using `d3.select` to fetch the SVG element and the `transition().duration()` API, the code orchestrates sequential transformations on the ellipse and rect attributes. All shapes are appended directly to the SVG, with eye motion repeating through chained transitions, while the face remains static.

Jan 2, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how fundamental SVG shapes—circle, rect, line, and path—can be styled and composed using CSS and SVG attributes. It shows grouped elements with transformed positions, inherited fill and stroke properties, and class-based styling for lines and paths. The code uses raw SVG markup with inline presentation attributes like `fill`, `stroke`, and `stroke-width`, combined with CSS rules targeting classes such as `.lines`. The rendering is purely SVG, with no external libraries, and the page layout is simplified through CSS margin resets.

Jan 1, 2021

Loading thumbnail…

Cars ScatterPlot

This scatterplot visualizes the relationship between vehicle weight and miles per gallon (mpg) for a dataset of cars from the auto-mpg CSV file. Using D3.js v5, the chart employs `scaleLinear` functions to map quantitative attributes to SVG coordinates, with `axisBottom` and `axisLeft` to render labeled axes on a blue background. Each car is represented as a semi-transparent red circle, positioned via the `cx` and `cy` attributes. The code loads data with `csv`, converts numeric fields, and applies margins and ticks to structure the plot.

Dec 24, 2020

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the 18 most populated countries in 2020, using UN population estimates. The chart customizes both axes: the y-axis removes tick lines and domain, while the x-axis formats population values in billions using D3's `format('.3s')` and adds a custom label. Bars are red rectangles on a blue background, with a title above. The visualization uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG elements.

Dec 24, 2020

Loading thumbnail…

BarChart with D3.js

This bar chart displays the populations of the 19 most populated countries, using data from UN 2020 estimates. The horizontal bars are sorted by country name, with each bar’s length proportional to its population. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` to map values, and `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file and rendered as SVG rectangles with a green fill.

Dec 23, 2020

Loading thumbnail…

Cars Report

This visualization displays a text-based report of cars priced under $2,000, listing each vehicle's year, make, model, and price after a simulated two-second asynchronous loading delay. The example demonstrates modular JavaScript programming using ES6 imports and exports, Promises for asynchronous data retrieval, and array filtering and mapping operations. The page initially shows a "Loading" message that is replaced with the formatted car list once the data resolves. The code uses `JSON.parse` to handle inline car data and relies on standard DOM manipulation via `document.getElementById` to update the display.

Dec 21, 2020