KennethSF

@KennethSF·7 public vizzes

Cantones por Población

A horizontal bar chart displays the population of Costa Rica's cantons, sorted by name. The visualization uses D3 v5's scaleBand and axisLeft to position and label each canton, while a linear scale maps population values to bar widths. The data is loaded from a CSV file, and the SVG rendering includes grid lines via tickSize and a titled axis.

Aug 30, 2019

Loading thumbnail…

Cantones por Población Glifo

This dot plot displays the population of each canton in Costa Rica, with cantons sorted alphabetically on the y-axis and population on the x-axis. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis and `scalePoint` for the y-axis, with points rendered as circles. Data is loaded from a CSV file using the `csv` function, and axes are drawn with `axisBottom` and `axisLeft`.

Aug 28, 2019

Loading thumbnail…

Cantones por Población Glifo

This scatterplot displays the relationship between population, area, and density for Costa Rican cantons, using a bubble chart where each circle’s position and size encode three variables. The x-axis represents area, the y-axis density, and the circle radius maps to population, revealing clusters and outliers. Built with D3 v5, the visualization uses `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to generate the SVG. Data is loaded from a CSV file containing each canton’s name, population, area, and density, with circles styled in steelblue and rendered via SVG.

Aug 27, 2019

Loading thumbnail…

Cantones por Población Glifo

This visualization shows the population of cantons in Costa Rica as a dot plot, with each circle positioned along the x-axis by population magnitude and the y-axis by canton name. It uses d3.csv to load the data, d3.scaleLinear for the x-axis, and d3.scalePoint for the categorical y-axis. The SVG rendering includes axis labels, a title, and a grid created with d3.axisBottom and d3.axisLeft.

Aug 27, 2019

Loading thumbnail…

Shapes with SVG and HTML

A simple SVG scene demonstrates basic shape drawing and grouping in a 960x500 viewport. Circles, rectangles, a line, and a path are positioned with explicit coordinates, while a nested transform group applies a translation and fill/stroke styling. The page relies solely on raw SVG elements and CSS classes, with no JavaScript libraries, to show how inline SVG handles primitive shapes, attributes, and visual properties like stroke width and line joins.

Aug 20, 2019

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML-based list of used cars, each showing the model year, brand, and asking price. It demonstrates a static, unstyled report layout where one list item (the 2000 Honda Accord) is visually emphasized. The page uses a plain HTML list (`<ul>`) and a small CSS stylesheet (`style.css`). The styling is defined through the `font-size` and `font-family` properties on the `body` selector, while the highlighted entry applies a red text color via the `.highlighted` class rule. No JavaScript or interactive behavior is present.

Aug 20, 2019

Loading thumbnail…

Cars Report

This example demonstrates a text-based data report that lists cars from a JavaScript array filtered by a maximum price. It shows a loading message followed by the formatted list of vehicles under $3,000, including year, make, model, and price. The code uses the Promise-based `getCars` function with a simulated 2-second delay, the `filter` and `map` methods, and the ES6 module `formatCar` to generate the output. The HTML pre element displays the report with the Ubuntu font on a dark background.

Aug 20, 2019