HombreLobotomia

@HombreLobotomia·9 public vizzes

le cose del tennis

This bar chart displays the total points won in response by four tennis players during an ongoing tournament, with player names on the vertical axis and the count on the horizontal. The visualization uses D3 v5, reading data from a CSV file and rendering as an SVG. It employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` with tick marks, while custom CSS styles the red bars and large monospace labels.

Jul 17, 2019

Loading thumbnail…

Customizing Axes

This bar chart shows the top 10 most populous countries as of the 2018 United Nations estimate, with country names on the y-axis and population in billions on the x-axis. It highlights customized D3 axes, including a tick format that converts gigapopulation to billions, removed axis lines, and added labels. Built with d3-scale and d3-axis, the SVG chart loads data from a local CSV and applies custom styles for tick text, axis labels, and the title.

Jul 17, 2019

Loading thumbnail…

Barchar

This example shows a horizontal bar chart comparing the population of ten countries, with values loaded from a CSV file and formatted in thousands. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts and country names, while `axisLeft` and `axisBottom` render the axes. Bars are drawn as SVG rectangles with a steelblue fill, and the chart is positioned within margins applied to a single SVG group. The data is transformed by multiplying each population value by one thousand before rendering.

Jul 17, 2019

Loading thumbnail…

Barchar

A bar chart displays population figures for ten countries, using horizontal bars scaled linearly by population and ordered by the dataset's country field. The visualization loads CSV data with d3.csv, converts population values to actual counts, and renders SVG rectangles via d3.scaleLinear and d3.scaleBand. Grey bars fill the full chart width, with margins applied through a translated group element. The chart updates dynamically from the data source, showing population comparisons at a glance with no axes or labels.

Jul 17, 2019

Loading thumbnail…

Faccia

A stylized face rendered as a purple SVG scene draws the viewer's eye with a yellow circular head, two black eyes, and a curved mouth. The left eyebrow animates up and down over two seconds using chained `transition` calls, while the right eyebrow remains static. Built with D3 v5, the example uses `select` to manipulate the SVG, `arc` to generate the mouth path, and simple shape attributes for circles and rectangles. The face is centered via a translated group element.

Jul 17, 2019

Loading thumbnail…

Cars Report

This example displays a static line of text, “cars[0].make”, in a large font on a blank page. It loads an array of five car objects from a hard-coded JSON string in the `cars` module and parses it with `JSON.parse`, yet the visualization does not render any of that data. Instead, the `index.js` script simply assigns the string literal `message` to the `textContent` of the `<pre>` element, demonstrating basic DOM manipulation without any charting library or data binding. The report shows only a placeholder message.

Jul 2, 2019

Loading thumbnail…

Cars Report

This example displays a single message—the make of the first car in a small dataset—on a webpage using a large `<pre>` element. The data is defined as an inline JSON array in `cars.js` and parsed with `JSON.parse`, then imported into `index.js` where the first object’s `make` property is accessed directly. The text is rendered by setting `textContent` on the element, using no external libraries or visualizations.

Jul 2, 2019

Loading thumbnail…

Cars Report

This example displays a report of car makes, showing the first make from a static JSON dataset in a large-text HTML element. The visualization imports car data defined in a `cars.js` module, parses it with `JSON.parse`, and writes the result to the DOM via `getElementById` and `textContent`. It uses plain JavaScript with ES modules, no external libraries, and relies on a simple `pre` element for styled text output.

Jul 2, 2019

Loading thumbnail…

Cars Report

This example renders a static “Hello World” message on a dark blue background using the Ubuntu font. The page is built with an HTML file that references a bundled script, which imports an ES6 module to set the text content via the DOM API. The styling comes from a CSS file that applies the Google Fonts import, and the visualization does not include any data or interactive charting libraries.

Jul 2, 2019