Skip to main content
Log in
T

thalissonns

@thalissonns·10 public vizzes

Loading thumbnail…

Making a Bar Chart

This example shows the populations of South American countries as horizontal bars, sorted by country name, with population values formatted in abbreviated units. The bar chart uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with SVG rendering. Axes are generated via `axisLeft` and `axisBottom`, and data is loaded from a CSV file using `d3.csv`. The code removes default axis domain lines and adds custom axis labels and a title.

Nov 26, 2019
Loading thumbnail…

Making a Bar Chart

This example presents a horizontal bar chart of the population of South American countries, with Argentina through Venezuela listed from top to bottom. It uses D3 v5 to load population data from a CSV file, converts the population values to thousands, and renders the chart as SVG. The code employs `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.axisLeft` and `d3.axisBottom` to generate axes. Tick lines extend across the plot area, and a formatted axis label indicates the unit.

Nov 26, 2019
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population estimates for South American countries, ranked from smallest to largest. The bars, rendered as SVG rectangles, are sized proportionally to each country's population, with the data loaded from a CSV file. The visualization uses `d3.csv` to parse the data, `d3.scaleLinear` for the x-axis population scale, and `d3.scaleBand` for the y-axis country categories.

Nov 26, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of South American countries, ordered vertically with horizontal bars scaled linearly by population count. The visualization uses D3 v5’s `csv` loader to parse the data, `scaleLinear` and `scaleBand` for positioning, and `axisLeft`/`axisBottom` for labeled axes. Gridlines are rendered via `tickSize` on the bottom axis, while population values are formatted with `format('.3s')`. The SVG rendering applies a steelblue fill to rectangles, and the chart includes a title labeled “Population” above the x-axis.

Nov 26, 2019
Loading thumbnail…

Let's make face with D3.js

A D3.js v5 example renders a simple smiling face as an SVG, centering a yellow circle with black stroke for the head, two dark eyes, and a curved mouth built from an arc path. The face is constructed using D3's selection and arc APIs within a transformed group, while animated eyebrows—two rectangles—loop through a two-second transition that raises and lowers them repeatedly, creating a playful, expressive motion. The visualization relies entirely on declarative SVG attributes and D3's transition system for the timed animation.

Nov 26, 2019
Loading thumbnail…

Let's make face with D3.js

A D3.js v5 example renders a simple smiling face as an SVG, centering a yellow circle with black stroke for the head, two dark eyes, and a curved mouth built from an arc path. The face is constructed using D3's selection and arc APIs within a transformed group, while animated eyebrows—two rectangles—loop through a two-second transition that raises and lowers them repeatedly, creating a playful, expressive motion. The visualization relies entirely on declarative SVG attributes and D3's transition system for the timed animation.

Nov 26, 2019
Loading thumbnail…

Shape with SVG and CSS

This example shows a collection of flat geometric shapes—circles, rectangles, a line, and a polyline—arranged on an SVG canvas. The illustration demonstrates both default black shapes and styled variants, including a red circle, a green rectangle, and a group filled with light blue and outlined in black. It also highlights CSS class-based styling applied through a `styles.css` file, where the `.lines` class sets stroke properties. The SVG is scaled up by a factor of 1.5, and the entire composition is rendered directly in the browser without a dataset.

Nov 25, 2019
Loading thumbnail…

HTML Cars Report

This example uses plain HTML and CSS to display a simple car report, listing three vehicles with their model years and prices. The page structure is defined in `index.html`, with a heading and an unordered list of car entries, while `styles.css` formats the body with a large monospace font and highlights the first list item in red using the `.hilighted` class. No JavaScript libraries or data sources are utilized; the content is static and hardcoded directly in the markup.

Nov 25, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates an asynchronous data-loading and report-generation workflow in a minimal web dashboard. It displays a list of used cars with their make, model, year, and price. The code uses a simulated `getCars()` promise that resolves a hardcoded JSON dataset after a two-second delay, then processes it with `filter` and `map` via the `generateReport` function. D3 v5 is loaded via CDN but is not actively used; the page updates a `<pre>` element’s text content using vanilla DOM manipulation.

Nov 25, 2019
Loading thumbnail…

Cars Report

This example demonstrates a text-based data report for a collection of cars. It displays a list of vehicles under a specified price threshold, showing their year, make, model, and price. The interface initially shows a "loading..." message while fetching data from a simulated asynchronous source via a JavaScript Promise and `setTimeout`. Once loaded, the `generateReport` function filters and formats the car entries using template literals, converting the data into a readable text output displayed in the HTML page.

Nov 25, 2019