P

Pedro Ernesto Tramontina

@ptramontina·26 public vizzes

Loading thumbnail…

Stock movement

This visualization tracks stock quantities across multiple warehouse categories over time. It displays each movement as a horizontal bar, where green bars show net increases and gray dashed bars show decreases, with remaining totals labeled above. The chart uses D3 v5 with an SVG rendering approach, scaling linear amounts within a point-based time scale and a band scale for stock categories. Data is loaded from a JSON file and parsed with Moment.js for date formatting on the x-axis.

Loading thumbnail…

Custom color scale

A sequence of 100 rectangles demonstrates a custom color scale, transitioning from green to grey. The scale is created with `scaleLinear` and uses `interpolateHcl` for color interpolation, mapping the domain from 1 to 20. Each rectangle is positioned horizontally and filled with a color from this scale, providing a visual representation of the HCL color space's smooth gradient. The visualization is rendered as SVG elements using D3 v5.

Loading thumbnail…

ME - Com Bandscale (no lines)

This visualization displays stock movement data over time, showing quantities transferred between different storage locations like "Salão," "Elevador," and "SD-10." Each bar represents a transaction, with its width proportional to the absolute quantity and its position determined by timestamp on the x-axis and storage location on the y-axis. The chart uses d3.scalePoint, d3.scaleBand, and d3.scaleLinear for positioning and sizing, with bars rendered as SVG rectangles. Text labels display the signed quantity values, while d3.axisBottom and d3.axisLeft provide time-formatted and categorical axes.

Loading thumbnail…

Total usage

A stacked bar chart displays total usage per operation, with each rectangular segment sized proportionally to its contribution and labeled with absolute values, percentages, and operation codes. The chart uses D3 v5’s `scaleLinear` for positioning and percent calculations, `scaleOrdinal` with `schemeCategory10` for segment colors, and `sum` to compute the overall total. Data is loaded from a local JSON file via `json()`, and the visualization is rendered as SVG, with text elements placed above and within each bar segment.

Loading thumbnail…

ME - Com Timescale (Zoom)

This visualization shows the flow of inventory movements between stock locations over time, with each bar representing the quantity transferred and its position on the timeline indicating when the movement occurred. The chart uses an SVG rendering with D3 v5, employing `scaleTime` and `scaleBand` to map timestamps and stock names, while `drag` events enable horizontal panning of the timeline. Rectangles sized by `scaleLinear` display quantities, and the data comes from a static JSON file with fields for stock, quantity, and timestamp. The axis labels use the `timeFormat` function to display dates with seconds precision.

Loading thumbnail…

ME - Com Bandscale

This example visualizes stock movements over time using a band scale for time and a color-coded bar chart for quantities. It plots quantities across different storage locations, with horizontal links showing transfer origins between elevators and destinations. The visualization uses D3 v5 with SVG rendering, employing `scalePoint` for time, `scaleBand` for locations, `scaleLinear` for quantities, and `linkHorizontal` for the flow paths. Data comes from a JSON file containing timestamps, quantities, and location references.

Loading thumbnail…

ME - Com Timescale

This example visualizes stock movements over time, showing quantities transferred between storage locations as horizontal bars linked by curved paths. The visualization uses a timeline on the x-axis and inventory locations on the y-axis, with each bar’s width proportional to the quantity moved. It implements zooming via d3.zoom on the x-axis and employs d3.scaleTime, d3.scaleBand, and d3.scaleLinear to map the data. The code uses d3.linkHorizontal to draw connecting curves between source and destination points, with data loaded from a local JSON file.

Loading thumbnail…

World Countries Tree

This interactive tree diagram maps the hierarchical organization of world countries, grouped by continent and subregion. The visualization uses a horizontal dendrogram layout, with countries nested under their respective regions. Built with D3.js (d3.v5), the example employs the `tree` and `hierarchy` methods to compute node positions and generates SVG paths via `linkHorizontal`. Text labels are styled with a serif font, and zooming is enabled through the `zoom` function, allowing users to explore the dataset from Afghanistan to Yemen.

Loading thumbnail…

Bar Chart Mine

This visualization shows batch consumption data over time as a bar chart, with each bar representing a single data point's measured value. Bars are color-coded by error state using a d3.scaleThreshold, mapping values to "erro", "aceito", or "conforme" classes. The chart uses d3.scaleTime and d3.scaleBand for the x-axis positioning, d3.scaleLinear for the y-axis, and renders SVG rectangles. Each bar includes rotated text labels for operation/batch identifiers and measured values in kilograms. The data is loaded asynchronously from a JSON file using d3.json.

Loading thumbnail…

Monthly Deaths in Syria

This visualization displays monthly deaths in Syria from 2011 to June 2019 as a bar chart, with each bar colored red and hover interactions showing exact counts via a tooltip. The data comes from the Violations Documentation Center and is aggregated by month. It uses D3 v4 with d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and the d3-tip library for tooltips. The SVG chart is responsive and updates its size on window resize.

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with each country represented as a circle positioned along a linear population scale and a point scale for country names. The visualization uses D3 v5 with SVG rendering, loading data from a CSV file via `d3.csv` and converting population values to numbers. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, including grid lines and a custom tick format that abbreviates large numbers, while the title and axis label are added as text elements.

Loading thumbnail…

New Draw - Adding lines

This example visualizes stock movement over time in a D3.js SVG rendering. It shows quantities as horizontal bars positioned by timestamp on the x-axis and stock location on the y-axis, with lines connecting source and destination entries. The visualization uses d3.scalePoint and d3.scaleBand for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line with d3.curveBundle.beta(1) to draw curved flow lines from origin to destination. Data is loaded from a JSON file containing timestamps, quantities, and origin references.

Loading thumbnail…

New Draw - Adding group

This example visualizes stock movements over time as a horizontal bar chart. Each bar represents a quantity value, grouped by stock location (Salão, Elevador, SD-10) along the y-axis, with timestamps on the x-axis. Using D3 v5, the code loads JSON data and employs `scalePoint` for time, `scaleBand` for stock locations, and `scaleLinear` for bar widths. It renders SVG rectangles with rounded corners and labels the quantity inside each bar, with axes formatted via `axisLeft` and `axisBottom`.

Loading thumbnail…

Blank

This example produces a nearly empty SVG canvas filled with a single rounded rectangle. The rectangle spans the full width and height of the browser window, with its corners curved by an rx attribute of 40 pixels. The visualization uses D3 v5 to select the SVG element and set its dimensions dynamically based on the viewport size. Rectangular geometry is appended directly through D3’s selection API, while styles are handled externally via a linked CSS file.

Loading thumbnail…

Tricks for interaction

This example demonstrates interactive pan and zoom on a natural Earth projection map. The visualization renders world country boundaries using TopoJSON data, with hover highlighting that changes country fill colors. The implementation uses d3.zoom to apply transform events to the SVG group, updating its translation and scaling. d3.geoPath with geoNaturalEarth1 handles geographic projections, while CSS :hover rules manage the country color transitions. The sphere background is filled with a distinct blue tone to contrast with the green countries.

Loading thumbnail…

Making a map

This example shows a natural Earth projection map of the world, with countries rendered as light green filled paths and a blue sphere background. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` generator to draw the map from TopoJSON data loaded from the world-atlas dataset, processed via `topojson.feature`. Country and sphere outlines are appended as SVG paths with distinct CSS classes.

Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit circles sit in a row, styled as apples and lemons with red and yellow fills via `d3.scaleOrdinal`. Hovering highlights a fruit with a black stroke, calling `setSelectedFruit` on `mouseover` and clearing it on `mouseout`. Removal, replacement, and type changes are animated with `transition().duration(1000)` on `r` and `cx`, using data joins in `d3.selection`. The SVG is rendered with D3 v5, with fruit size determined by a second ordinal scale.

Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit is drawn as a set of circles, one per fruit, positioned horizontally and sized by type (apples are larger, lemons smaller). Clicking a fruit selects it, highlighting it with a black stroke. The visualization uses d3.v5 with a scaleOrdinal color scale for red apples and yellow lemons, and a transition system that animates circle radius and position changes over one second as fruits are removed or altered.

Loading thumbnail…

Bowl of fruit

A bowl of fruit uses D3 v5 to render a row of apples and lemons inside a rounded rectangle, updating as fruits are added, removed, or replaced over time. The visualization relies on ordinal color and size scales to map fruit types to red and yellow circles of varying radii, while SVG groups and circles are joined to data using selection.enter and merge patterns. Shape transitions are driven by timed intervals that pop, filter, and mutate the fruit array.

Loading thumbnail…

New Draw

This chart shows the movement of inventory quantities over time across different stock locations. Each horizontal band represents a storage area, and the length of each green rectangle encodes the quantity moved at a specific timestamp. The visualization uses D3’s `scaleBand` for the y-axis categories and `scalePoint` for the time axis, with rectangles sized by a linear scale. The data comes from a local JSON file, and the SVG output includes a rotated time axis and a custom title.

Loading thumbnail…

Bowl of fruit

Five circles represent fruit in a bowl, with apples as red and lemons as yellow, animating their radius and horizontal position over one second. The demo uses d3 v5 with `scaleOrdinal` for color and size mapping, while `selection.enter`, `merge`, and `exit` handle data joins. A timed sequence eats apples by removing elements and swaps one apple for a lemon, showing transitions with `transition.duration`.

Loading thumbnail…

Customize Axis

This example displays a horizontal bar chart of the populations of the top ten most populous countries, with a customized axis. D3’s `axisBottom` and `axisLeft` are used to generate the scales, with the x-axis formatted via `tickFormat` to abbreviate numbers and replace 'G' with 'B'. Grid lines are extended using `tickSize`, while axis domains are removed. The chart renders as an SVG and reads data from a CSV file.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars in the auto-mpg dataset. Red semi-transparent circles are positioned using d3.scaleLinear for both axes, with gridlines and labeled axes. The SVG rendering uses d3.axisLeft, d3.axisBottom, and d3.extent to map data ranges, while numeric parsing converts string values from the CSV into numbers before rendering.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each red point representing an individual vehicle. The visualization loads CSV data from a remote URL and converts numeric fields before rendering. Using D3 v5, the chart employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles with opacity to show data density. Axis labels and a title are added via SVG text elements, with gridlines generated through tick size adjustments.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population by country, using a CSV dataset ordered from China to Mexico. D3 v5 functions `csv`, `scaleLinear`, and `scaleBand` map population values to bar widths and country names to row heights, while `axisLeft` and `axisBottom` render the axes. The SVG renders steel-blue rectangles with D3’s `selectAll` and data joins, with a fixed 960×500 viewport and margins defining the inner plot area.

Loading thumbnail…

Testing

A yellow circle with two eyes and a mouth is drawn in SVG, its eyebrows bobbing up and down in an animated loop. The code builds the face from basic shapes using D3 v5, applying chained `transition` calls to animate the eyebrow group's vertical transform. Rendering is done entirely in SVG, with the mouth formed by D3's `arc` shape generator.