Skip to main content
Log in
R

Renan Barbosa

@barbosa-renan·14 public vizzes

Loading thumbnail…

Bubbles - Force bounding

This example demonstrates a force-directed bubble chart that packs 21 data values into a square boundary. Fixed "boundary" nodes, positioned along the top and left edges, constrain the visible data circles within the 500x500 pixel area. The visualization uses D3 v5’s `d3.forceSimulation`, combining `forceX`, `forceY`, `forceManyBody`, and `forceCollide` to repel and pack circles without overlap, while radii are scaled with `scaleSqrt`. Each bubble is rendered as an SVG circle with a white label. The simulation runs 120 ticks before rendering, and the final layout is drawn in a single frame.

Apr 12, 2020
Loading thumbnail…

Protótipo - Bubbles with Json Data

This visualization displays a set of four legal cases as bubbles, each sized by a numeric strength value and labeled with a person’s name and monetary amount. The bubbles are positioned using a force-directed simulation that applies horizontal and vertical forces based on the strength scale, along with collision detection to prevent overlap. The chart is rendered in SVG, leveraging D3 v5’s `d3.forceSimulation`, `d3.forceX`, `d3.forceY`, and `d3.forceCollide` APIs. The underlying data is structured in JSON with fields for strength, process ID, name, number, and value, and the visualization is built within a React framework.

Apr 12, 2020
Loading thumbnail…

Bubbles with Json Data

This example visualizes a JSON dataset of people and monetary values as a bubble chart. Each bubble's size corresponds to the `valor` field, with names and dollar amounts rendered inside. Built with React and D3 v5, it uses `d3.pack` and `d3.hierarchy` to compute circle layouts, then appends SVG circles and text nodes. The circles are clickable, triggering a process load function, and styled with orange fills and custom fonts.

Apr 9, 2020
Loading thumbnail…

Bubbles with Json Data

This example visualizes grant data as an interactive bubble chart, where each circle’s size reflects the grant amount and color encodes the grant group. The bubbles are initially grouped in the center, then the toolbar allows toggling between grouped and year-split views. Built with React and D3 v5, it uses `d3.forceSimulation` for layout, `d3.scalePow` for radius scaling, and SVG transitions for animation. JSON data drives the visualization, with hover tooltips and mouseover events for detail display.

Apr 8, 2020
Loading thumbnail…

Bubbles with Json Data

This example visualizes a small dataset of two categories, "Reclamantes" and "Fases Processuais," as colored bubbles whose sizes reflect their respective counts. Using the D3.js library (v5) within a React framework, the code applies `d3.pack` for circle packing and `d3.hierarchy` to structure the data. The resulting SVG is rendered into an HTML page, with each bubble labeled and interactive via click events.

Apr 5, 2020
Loading thumbnail…

Smile

This interactive bubble chart uses a force-directed layout to visualize a small dataset of six categories, such as "Reclamantes" and "Fases processuais," with each bubble's size proportional to its count. Built with D3.js, it employs `d3.forceSimulation` and `d3.forceCollide` to position the circles, while custom scales (`d3.scaleLinear`, `d3.scaleSqrt`) map counts to coordinates and radii. The SVG output labels each node with its truncated name and count, using a categorical color scheme.

Apr 3, 2020
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of auto-mpg data, mapping acceleration to the x-axis and horsepower to the y-axis, with tooltips showing car names. Built with the Vega-Lite API, it uses vl.markPoint(), vl.x(), vl.y(), and vl.tooltip() to define the encoding, while the getData.js module loads CSV data via d3.csv. The visualization is rendered as SVG through Vega, with appearance customized in config.js and an interactive tooltip provided by vega-tooltip.

Apr 3, 2020
Loading thumbnail…

Covid

This visualization plots cumulative confirmed COVID-19 cases from a Johns Hopkins time-series dataset as orange circles on a world map. Each circle’s radius encodes the case count for March 25, 2020, using a square-root scale. The map is drawn with `d3.geoMercator` projections and TopoJSON country features, while the data is loaded via `d3.csv` and rendered as SVG circles via `d3.scaleSqrt`.

Apr 3, 2020
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes hierarchical data from the Observable `@observablehq/flare` dataset. The visualization displays nested segments as arcs, with each ring representing a level in the hierarchy. Clicking any segment zooms into that part of the hierarchy, making it the new root. The code uses the `d3.arc()` generator (with start/end angles and inner/outer radii) to draw paths, and `d3.partition()` to compute the layout. Interactivity relies on `transition.attrTween` (interpolating between arc geometries over 750ms) and `d3.interpolate` to smoothly animate data positions. Color mapping uses `d3.scaleOrdinal()` with a quantized rainbow interpolator, while labels are rotated and positioned via `labelTransform()`. The SVG rendering is driven by D3 v5's selection and join APIs.

Mar 12, 2020
Loading thumbnail…

Let's make face with D3!

This visualization shows a bubble chart displaying legal case data, with categories such as Reclamantes, Fases processuais, and Pedidos represented as red circles sized by their count values. Built with React and D3 v4, the example uses d3.pack and d3.hierarchy to compute the circular layout, rendering nodes as SVG groups with appended circles and text labels. Clicking any bubble triggers a simple alert dialog, demonstrating basic interactivity within the packed layout.

Feb 21, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses a horizontal layout, with the population scale set as a `scaleLinear` and country names mapped to a `scaleBand`. The chart is rendered as SVG. The code leverages D3’s `axisLeft` and `axisBottom` to create the axes, and the `rect` elements are styled with a green fill via CSS. Data is loaded from a CSV file with the `csv` function.

Feb 17, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses a horizontal layout, with the population scale set as a `scaleLinear` and country names mapped to a `scaleBand`. The chart is rendered as SVG. The code leverages D3’s `axisLeft` and `axisBottom` to create the axes, and the `rect` elements are styled with a green fill via CSS. Data is loaded from a CSV file with the `csv` function.

Feb 17, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses a horizontal layout, with the population scale set as a `scaleLinear` and country names mapped to a `scaleBand`. The chart is rendered as SVG. The code leverages D3’s `axisLeft` and `axisBottom` to create the axes, and the `rect` elements are styled with a green fill via CSS. Data is loaded from a CSV file with the `csv` function.

Feb 17, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses a horizontal layout, with the population scale set as a `scaleLinear` and country names mapped to a `scaleBand`. The chart is rendered as SVG. The code leverages D3’s `axisLeft` and `axisBottom` to create the axes, and the `rect` elements are styled with a green fill via CSS. Data is loaded from a CSV file with the `csv` function.

Feb 17, 2020