Gabe Nascimento

@gabenasci·12 public vizzes

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern with a simple scatter-like visualization. It renders five circles representing fruit objects arranged within an SVG canvas, using a light blue background. The code employs D3 v7 selectors to grab the SVG element and range to generate a data array. Following D3’s declarative data-join workflow, it first selects all existing circles, binds the fruit dataset, and then uses the enter stage to append new circle elements with red fills and initial coordinates. The implementation uses expressive chaining to structure the data-to-visual encoding, though no update or exit phases are shown.

Oct 19, 2021

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth from 1960 to 2015, with the x-axis mapping years and the y-axis showing population in billions. The chart uses a maroon filled area generated with D3’s `area()` and `curveBasis` smoothing, while axes are created via `axisBottom` and `axisLeft`. Data comes from a CSV file loaded with `csv()`, and scales use `scaleTime` and `scaleLinear` with a `nice()` domain.

Oct 19, 2021

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart displays one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The filled path uses a basis curve to smooth the line between data points. The visualization is rendered as SVG using D3 v7, employing `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` for the axes. Data is loaded from a CSV file via `csv`, with timestamps parsed as dates and temperatures converted to numbers. Grid lines extend across the plot from tick marks on both axes.

Oct 19, 2021

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in degrees Celsius for San Francisco, using a smooth curved line over time. The visualization loads CSV data from a VizHub-hosted dataset, parsing timestamps and temperature values before rendering. It uses d3.scaleTime and d3.scaleLinear to map data to screen coordinates, d3.line with the curveBasis interpolation for the path, and d3.axisBottom and d3.axisLeft with tick marks and labels. The SVG output includes a title and axis labels, with gridlines styled via the tickSize properties.

Oct 19, 2021

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes one week of temperature data in San Francisco, displaying temperature in °C over time. The visualization uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with circles representing individual measurements. Axes are rendered using d3.axisBottom and d3.axisLeft, and the data is loaded from an external CSV file. The chart includes custom axis labels and a title, with the SVG rendering approach using D3 v7 selections to append and style elements.

Oct 19, 2021

Loading thumbnail…

Scatter Plot w/ D3

This scatter plot displays the top 10 most populous countries in 2018 using data from World Population Prospects, with each point’s x-position representing population and y-position representing country. The visualization uses D3 v7 with `scaleLinear` for population and `scalePoint` for country categories, rendering circles as SVG elements. The code applies `axisBottom` and `axisLeft` with custom tick formatting via `format('.3s')` to abbreviate population values. Axis lines are removed, and gridlines extend across the plot. Population data is loaded from a CSV file and multiplied by 1000 to reflect actual values.

Oct 19, 2021

Loading thumbnail…

Cars Scatter Plot w/ D3

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Each red, semi-transparent circle represents a car, with positions determined by d3.scaleLinear domains and ranges. The visualization uses D3 v7 to load CSV data, render SVG circles, and generate axes with grid lines via d3.axisLeft and d3.axisBottom, complete with custom axis labels and a title.

Oct 14, 2021

Loading thumbnail…

Customizing Axes of Bar Chart w/ D3

This bar chart visualizes the population of the top 10 most populous countries, using 2018 estimates from the UN’s World Population Prospects. The chart uses a linear scale for the population axis and a band scale for country names, with custom tick formatting that converts SI units (e.g., G to B). Population values are scaled by 1000. The D3 code removes default domain lines and tick marks, adds axis labels, and renders the bars in SVG.

Oct 14, 2021

Loading thumbnail…

Fork of Making a bar chart in D3.js

This example shows the population of the top 10 most populous countries, based on 2018 estimates from the UN World Population Prospects. A light blue SVG canvas renders horizontal bars, with country names on the left axis and population values on the bottom axis. The code uses d3.csv to load the data, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom for tick labels. Bars are appended as SVG rect elements with steelblue fill via d3 selection and data joins.

Oct 14, 2021

Loading thumbnail…

Making a bar chart in D3.js

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the UN World Population Prospects. The chart renders as SVG with a light blue background, showing each country on the y-axis and its population on the x-axis. The code uses D3 v7 modules including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data, scale the values, and draw the axes. Bars are appended as rectangles with steelblue fills, and population values are multiplied by 1000 from the CSV source.

Oct 14, 2021

Loading thumbnail…

Let's make a face with D3.js

A smiling yellow face is drawn in an SVG canvas using D3.js, with eyes, eyebrows, and a mouth positioned relative to a centered group. Eyebrows animate upward and back down via chained `transition().duration()` calls, moving the group's transform attribute. The code uses `d3.select`, `d3.arc` for the mouth's shape, and explicit SVG `circle`, `rect`, and `path` elements. The face is styled with a light blue background and black strokes, all rendered dynamically from the viewport height and width.

Oct 13, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

A static SVG scene demonstrates fundamental shape rendering and CSS styling without JavaScript interaction. The graphic pairs circles and rectangles in varied fill colors, including a group with cyan fills and black outlines, alongside a polyline path using move-to and line-to commands. Styling comes entirely from an external stylesheet, which sets stroke properties on line elements and applies rounded line joins and caps to paths. The example showcases hand-written SVG markup with nested transforms for scaling and translation, illustrating how CSS selectors target SVG child elements for visual customization.

Oct 11, 2021