Gabriel Meireles

@GabrielUTR·8 public vizzes

Let's make a face with D3.js!

This example uses D3.js v5 to build a horizontal bar chart from population data for ten countries, with each bar's width proportional to the country's population in thousands. The chart is rendered as SVG, with a linear scale for the x-axis and a band scale for the y-axis, which positions each bar and calculates its height. The code fetches data from a CSV file, multiplies each population value by 1000, and then maps the values to the SVG canvas dimensions.

Aug 14, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw and animate a stylized face, rendered as vector graphics in an SVG element. It constructs the face from an initial yellow circle for the head, adding two eyes and rectangular eyebrows. The code uses the `d3.select` and `d3.arc` APIs, along with the `transition` object and `attr` methods, to move the eyebrows up and down over a two-second duration, creating a subtle blinking or surprised expression.

Aug 14, 2019

Loading thumbnail…

Customizing Axes

This example demonstrates how to customize axis elements in a bar chart, showing population figures for ten countries from a CSV file. The chart uses SVG rendering via D3 v5, with `d3.select` to attach the visualization to an SVG container. The axes are styled and positioned using D3’s scale and axis functions, while the data is loaded asynchronously with `d3.csv`. The minimal CSS keeps the page clean, and the chart focuses on readable, annotated axes.

Aug 14, 2019

Loading thumbnail…

Making a Bar Chart!

This example shows a horizontal bar chart of the top 10 most populous countries in South America, using population figures from a CSV file. The code loads data with `d3.csv` and renders bars as SVG rectangles, scaled with `d3.scaleLinear` and `d3.scaleBand`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with tick labels formatted via `format('.3s')`. A title and axis label are added as SVG text elements, and the chart includes grid lines through the x-axis tick size setting.

Aug 14, 2019

Loading thumbnail…

Making a face in D3.js

This example draws a stylized human face using D3.js and SVG. The face’s features are constructed from layered, rounded paths with a dark teal stroke, set against a plain background. The visualization loads population data for South American countries from a CSV file via D3’s `csv` function, but the rendering focuses purely on the geometric face. The SVG canvas is 960 by 500 pixels, and the code uses D3’s selection and attribute methods to position the elements.

Aug 13, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled directly with CSS and inline attributes. The visual shows shape color, stroke, and coordinate transformations, including scaling and translation. The code uses plain SVG elements within an HTML document, with a linked stylesheet defining stroke properties for line and path groups. The rendering approach relies entirely on SVG markup and CSS rules, with no JavaScript libraries involved.

Aug 13, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example displays two brown circles and a taller rectangle arranged as a simple abstract composition on an SVG canvas. The shapes use fixed coordinates and hexadecimal fill colors, with the page layout controlled by CSS. It demonstrates static vector graphics created directly through SVG elements within the HTML structure, without JavaScript or external libraries.

Aug 13, 2019

Loading thumbnail…

Hello VizHub

This example displays the text "Hello VizHub!" in large, bold lettering against a dark blue background, styled with the Ubuntu font. It demonstrates a minimal setup for a D3.js project within the VizHub platform, using an ES6 module to export the message string. The code imports the `select` function from D3 v5 to target a div element and set its text content, while separate CSS handles the visual presentation.

Aug 13, 2019