Skip to main content
Log in
G

gabrielribeirob

@gabrielribeirob·33 public vizzes

Loading thumbnail…

Fork of Stylized Line Chart

This visualization shows the gross profit of Dib's from November 2020 to September 2021 as a stylized line chart. A black background circle frames the gradient-stroked path, with data points rendered as semi-transparent circles that display tooltips on hover. The React-based implementation uses D3 v5 scales (scaleTime, scaleLinear), d3.line, and d3.csv for data loading, with SVG rendering for the axes and marks.

Nov 30, 2021
Loading thumbnail…

LineChart

This line chart displays monthly gross profit across a date range, with data imported from a CSV file. The visualization uses D3 v7 to construct scales, axes, and a line generator, rendering the chart as inline SVG. The y-axis is labeled "Lucro bruto," and the chart includes a title and axis labels. The code applies `d3.scaleTime` and `d3.scaleLinear` for positioning, `d3.line` for the path, and `d3.axisLeft` and `d3.axisBottom` for ticks, with dates formatted using `d3.timeFormat`.

Nov 23, 2021
Loading thumbnail…

Making a BarChart

This example shows a horizontal bar chart of population by country, using a CSV dataset for 10 nations. It builds an SVG chart with D3 v7, mapping population to bar width via `scaleLinear` and country names to vertical bands with `scaleBand`. The code uses `axisLeft` and `axisBottom` for labeled axes, and appends `rect` elements for each row. Styling applies a steelblue fill to the bars.

Nov 22, 2021
Loading thumbnail…

Testando tooltips 2.0

A time-series line chart displays monthly gross profit from November 2020 to September 2021, based on Dib's database records. An animated gradient stroke transitions smoothly using D3's `transition` with `easeSin`, while hoverable circles reveal tooltips. Built with React, the visualization uses `scaleTime`, `scaleLinear`, and SVG paths, with data loaded via D3's `csv` parser from a GitHub repository.

Nov 22, 2021
Loading thumbnail…

Testando tooltips

This example demonstrates a JavaScript tutorial on using objects, arrays, and modules. It loads car data from a hardcoded JSON array and generates a text report of cars priced under $2000, which appears on a webpage after a simulated two-second delay. The code uses a `getCars` promise and a `generateReport` module that filters and formats car details. The static HTML includes a link with a tooltip, which is initialized using the jQuery plugin Tipsy within a `$(function() { ... })` block.

Nov 22, 2021
Loading thumbnail…

Line Area Chart

This visualization shows a week of temperature fluctuations in San Francisco using a filled area chart, with time on the x-axis and temperature on the y-axis. The chart displays a smooth, curved area in maroon, with labeled axes and a clear title. Built with D3 v7, the code uses `d3.area`, `d3.curveBasis`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisLeft`/`d3.axisBottom` to render the SVG. Data is loaded as CSV from a VizHub dataset, with timestamps parsed as dates and temperatures converted to numbers.

Nov 17, 2021
Loading thumbnail…

Lets Make a Face

A yellow smiley face animates on an SVG canvas as its eyes and eyebrows move independently and its mouth is drawn with an arc path. The example demonstrates D3 v7 transitions, using `d3.select`, `d3.arc`, and chained `.transition().duration()` calls to shift eye positions and raise eyebrows over different time intervals. SVG elements—circles for eyes, rectangles for eyebrows, and a path for the mouth—are appended to a centered group, showing how D3 manipulates attributes and transitions to create simple character animation.

Nov 17, 2021
Loading thumbnail…

Cheap Tricks for Interaction

A world map rendered in SVG shows country borders in light green on a blue sphere, with hover highlighting in red and zoom-and-pan interaction via `d3.zoom`. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic data from TopoJSON, with country names from a TSV file. Hover tooltips appear through SVG `title` elements. The code loads data from the world-atlas dataset and applies a `g` transform on zoom events.

Nov 16, 2021
Loading thumbnail…

Untitled

This time series displays data points over a date range, using a blue-to-red vertical gradient to encode value magnitude along the line. The visualization reads a comma-separated dataset from an external URL and parses dates with `d3.timeParse`. It constructs an SVG line chart, computing scales with `d3.scaleTime` and `d3.scaleLinear`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. A `linearGradient` element is defined and applied as the stroke, with the path generated by `d3.line`.

Nov 12, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

A React component renders a yellow circle with a black outline as the first step toward building a smiley face. The SVG uses fixed dimensions of 960 by 500 pixels, centering the circle at the midpoint. The code calculates the radius from the center Y position minus half the stroke width, allowing the circle to fit within the viewport. ReactDOM mounts the component to the root div, demonstrating basic SVG shape creation with React 16.9 in a simple, static visualization.

Nov 11, 2021
Loading thumbnail…

Interactions with React.js

This example demonstrates a minimal interactive visualization built with React and ReactDOM, rendering a single SVG circle centered in the browser window. The circle’s position and radius are computed from the window’s dimensions using `window.innerWidth` and `window.innerHeight`. The code uses the React 16.9.0 UMD production builds loaded via `unpkg.com`, and the SVG circle is drawn directly through React’s JSX syntax. The example serves as a basic template for combining React’s declarative UI model with static SVG vector graphics.

Nov 11, 2021
Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes the relationship between time and gross profit (labeled "Temperature") using a dataset from Data Canvas Sense Your City. The visualization is built with React and D3 v5, leveraging `d3.scaleTime` and `d3.scaleLinear` for the axes and `d3.csv` to load the data. Axes are rendered as custom components (AxisBottom, AxisLeft), while individual data points appear as SVG circles with tooltips formatted via `d3.timeFormat`. The chart uses the Poppins font and a clean design, with axis labels and tick marks styled distinctly.

Nov 10, 2021
Loading thumbnail…

Working with Time

This example shows monthly gross profit and units sold over time, with two line charts sharing a time axis. It uses D3 v5 and React, loading data from a CSV file via `d3.csv`. The code employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, while `line` draws the paths. The visualization compares two metrics across the same 2020–2021 period, with points and lines styled from the data.

Nov 10, 2021
Loading thumbnail…

Fork of LineChart

This example shows gross profit per month from a CSV dataset, plotting each month’s value as a smoothed line over a time-based x-axis. The chart uses D3 v7 with SVG rendering, employing `d3.csv` for data loading, `scaleLinear` for both axes, `line` with `curveBasis` for the path, and `axisLeft`/`axisBottom` for labeled ticks. The code also includes a rotated y-axis label and a title, with margins defined for layout.

Nov 8, 2021
Loading thumbnail…

Untitled

An interactive time-series line chart displays daily, weekly, and monthly aggregations of value and quantity data from a CSV file. Buttons allow switching between these temporal resolutions, with the line path redrawing accordingly. Tooltips appear on mouseover, and the chart uses D3 v3 APIs including `d3.csv`, `d3.time.scale`, `d3.bisector`, and `d3.svg.axis`, with an SVG canvas and smooth animation during transitions.

Nov 8, 2021
Loading thumbnail…

vendas_por_grupo_bar_chart

This bar chart displays the quantity sold for each product group, with horizontal bars ordered by category name. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map sales values and group labels, while `axisLeft` and `axisBottom` render the axes. Data is loaded from a CSV file using `d3.csv`, and each bar includes a hover tooltip via appended `title` elements. The SVG output is styled with a gradient background and custom fill colors for the bars.

Nov 5, 2021
Loading thumbnail…

Teste

This example visualizes daily e-commerce sales data, showing gross profit and quantity sold over time from January to May 2021. A line chart displays the gross profit trend, while circles represent individual data points, revealing patterns in sales performance. The visualization uses D3 version 7, loading data from a CSV file and rendering the chart as an SVG. The code leverages D3’s `csv` import function for data parsing and is styled with custom CSS for circles and line paths.

Nov 5, 2021
Loading thumbnail…

Color and Size Legends

Two fruits, an apple and a lemon, are drawn inside a rounded rectangle bowl using D3 v7 and SVG. The example maps fruit type to both a categorical color scale and a categorical radius scale, using `scaleOrdinal` with explicit domains and ranges. Circle elements receive fill and radius attributes from these scales, while text labels appear below each fruit. The positions are computed from the array index, and the bowl itself is a styled rectangle behind the fruit groups.

Sep 22, 2021
Loading thumbnail…

World Countries Tree

This interactive visualization displays the hierarchical structure of world countries, organized by continent and subregion. Built with D3.js v5, it renders a horizontal tree diagram using SVG, where each node represents a geographical region or country. The visualization uses D3's tree layout algorithm with hierarchical data, and implements zoom functionality through the `d3.zoom` API. Text labels are styled with the Playfair Display font, and links are colored with a distinct teal stroke. The data originates from a JSON file containing nested country and region classifications.

Sep 22, 2021
Loading thumbnail…

Lets Make a Map

This example displays a world map rendered as an SVG using D3’s `geoNaturalEarth1` projection and `geoPath` generator. Country boundaries come from the World Atlas TopoJSON dataset, converted to GeoJSON via `topojson.feature`. The visualization shows a dark blue ocean sphere with light green landmasses, each country plotted as a separate path.

Sep 21, 2021
Loading thumbnail…

Bowl of Fruit Click to Select

Five apples appear in a bowl, rendered as circles using the D3.js v7 library. A click on any fruit selects it, shown with a black stroke, and triggers a transition. Over time, the example programmatically removes apples and changes one apple into a lemon, with `transition().duration(1000)` animating the changes in radius and position using ordinal scales for color and size. The code uses D3 data joins with `enter`, `merge`, and `exit` selections.

Sep 20, 2021
Loading thumbnail…

General Update Pattern --

This example demonstrates the general update pattern in D3 by animating a fruit bowl over time. Apples and lemons are drawn as scaled circles, with colors and radii mapped via `scaleOrdinal`. A sequence of timeouts triggers state changes—removing fruits, replacing an apple with a lemon—and re-renders the SVG. The code uses `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` to handle the incremental updates.

Sep 20, 2021
Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of five apples demonstrates the general update pattern for data joins. Circles enter, update, and exit as fruits are eaten or replaced with lemons, using animated transitions for position and radius. The code uses d3.scaleOrdinal for color and size mappings, and d3-transition to animate circle attributes over one second. Data is generated with d3.range and random IDs, rendered as SVG circles within a fixed bowl rectangle.

Sep 20, 2021
Loading thumbnail…

Transition exercise

A sequence of five apples renders in an SVG. Over three seconds, scheduled changes transform the data: one apple is eaten, a second apple becomes a lemon, and another apple is removed. Each update re-renders the scene, with D3's `select`, `merge`, and `exit` APIs animating the SVG elements to their new positions and styles. The fruitbowl module uses `scaleOrdinal` for color and radius scales, and the example demonstrates D3’s declarative transition system for entering, updating, and exiting marks.

Sep 20, 2021
Loading thumbnail…

Word Population Area Chart

This area chart shows world population growth over time, with a maroon filled path representing data points from a CSV file loaded via `d3.csv`. The visualization uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with axes rendered using `d3.axisBottom` and `d3.axisLeft`. The area shape is generated with the `d3.area` API and smoothed using `curveBasis`, while gridlines and labels are styled through SVG elements within a 960x500 viewport.

Sep 2, 2021
Loading thumbnail…

Temperature in SF

This visualization displays a week of temperature measurements in San Francisco as a scatter plot, with time on the x-axis and temperature on the y-axis. The D3 v7 code loads CSV data, parses timestamps and numeric temperatures, and renders circles using scaleTime and scaleLinear. It includes custom axes with rotated labels and a title, leveraging d3.axisBottom, d3.axisLeft, and d3.extent for domain scaling. The SVG output is styled via an external stylesheet, with a fixed canvas size of 960 by 500 pixels.

Sep 2, 2021
Loading thumbnail…

Cars ScatterPlot

This visualization displays a scatterplot of cars, mapping horsepower on the x-axis against weight on the y-axis, with each vehicle represented by a semi-transparent red circle. The chart includes labeled axes, tick marks, and a title, providing a clear view of the correlation between these two attributes. The code uses D3 v7, leveraging `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the scales and axes, while `csv` loads the auto-mpg dataset from a remote URL. SVG circles are appended and positioned using the scaled x and y values, with styling applied via external CSS.

Sep 2, 2021
Loading thumbnail…

Creating a ScatterChart

A scatter chart displays the populations of the ten most populous countries, with each country positioned along a categorical y-axis and population plotted on a linear x-axis. The visualization uses D3 v7 to load CSV data, apply `scaleLinear` and `scalePoint` for the axes, and render SVG circles. `axisBottom` and `axisLeft` generate ticks with custom formatting, while margin-based transforms position the chart elements.

Sep 1, 2021
Loading thumbnail…

Going deep into 'axes'

This horizontal bar chart displays the population of the top 10 most populous countries, using data from a CSV file. The visualization demonstrates customizing D3 axes, including removing domain lines, adding tick marks that extend across the chart, and formatting tick labels with the `format` API to abbreviate values. The chart uses `d3.scaleLinear`, `d3.scaleBand`, `axisLeft`, and `axisBottom` to construct the layout, with an SVG rendering and custom styling for the title, axis labels, and rectangular bars.

Sep 1, 2021
Loading thumbnail…

Lets Make a Face

This example constructs a cartoon face using D3.js v7 and SVG elements. The face consists of a yellow circular head, two black eyes positioned symmetrically, and a mouth drawn with an arc path using the `arc()` function from D3’s shape module. The SVG canvas is 960 by 500 pixels, with elements centered via a translation. Positions for the eyes and head are calculated from the SVG’s width and height attributes, and the mouth uses specified inner and outer radii with start and end angles. The code imports `select` and `arc` from D3.

Aug 31, 2021
Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a custom path—arranged in a grid and scaled up. It demonstrates how inline SVG attributes set fill and stroke colors, while a CSS class applies a thick black stroke to the lines and a light blue color with rounded joins to the path. The rendering relies solely on the SVG markup in the HTML file, with no additional JavaScript libraries or data sources.

Aug 30, 2021
Loading thumbnail…

Fork of HTML CARS REPORT

This example displays a simple list of used cars with their year, model, and price, using plain HTML list items and a stylesheet. The page renders three vehicles, visually distinguishing the first entry, a 2012 Nissan Leaf, in red via the `.highlighted` CSS class. The design uses a monospace font and a large base font size defined in `styles.css`. No JavaScript libraries or data-fetching APIs are used; the hardcoded data appears directly in the `index.html` markup.

Aug 30, 2021
Loading thumbnail…

Fork of Cars Report

This example shows a text-based car report that filters a static JSON dataset of five used cars to display only those priced under $2,000. The interface initially shows a loading message before a two-second delay simulates an asynchronous fetch using `getCars()`, which returns a promise. The `generateReport` function uses JavaScript’s `filter` and `map` methods to format each qualifying car into a single line using the `formatCar` module. Output is rendered directly into an HTML `<pre>` element via `document.getElementById`.

Aug 30, 2021