porrasgp

@porrasgp·7 public vizzes

Costa Rica

This radial tree visualization displays a hierarchical World→Asia→subregion→country structure using an SVG rendering with d3.cluster layout. The view supports panning and zooming through d3.zoom, allowing exploration of the dense country hierarchy. Node labels at third depth levels orient tangentially around the circle, while shallower levels remain horizontal, with font sizes scaled by depth via d3.scaleSqrt. The data originates from data.json, mirroring Curran Kelleher’s World Countries Hierarchy block, with teal links drawn as cubic Bézier curves connecting parent-child nodes.

Jun 26, 2021

Loading thumbnail…

Target Population

This radial tree visualization displays a hierarchical structure of geographic locations, from continents down to cities, with the root node labeled “Target Population.” The layout places the root at the center with descendant nodes radiating outward in concentric rings by depth. Users can pan and zoom the SVG canvas via the d3.zoom interaction, which applies a transformation to the entire graph. The visualization uses D3 v4’s cluster layout algorithm to position nodes, and the data is loaded from a local JSON file with d3.json. Link paths are drawn with cubic Bézier curves between parent and child nodes, and node labels are rotated and anchored based on their angular position.

Jun 11, 2021

Loading thumbnail…

Face II

A smiling face rendered as a simple data visualization uses React and ReactDOM to create an SVG graphic. The code computes the viewport dimensions to center a yellow circle with a black outline, adds two solid black eyes, and omits a mouth. The face is drawn using SVG circle elements within a transformed group, with coordinates and radii set as constants. The example demonstrates static SVG rendering through React's declarative component structure, where the entire graphic is defined in JSX and mounted to the DOM.

Feb 11, 2021

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart of export values per state with a linked pie chart showing the breakdown by sector (Agricola, Industrial, Pecuario). Hovering over a bar filters the pie chart and legend to display that state’s sector frequencies, while mouseout resets to the total. Built with React and D3.js v3, it uses `d3.svg.axis`, ordinal and linear scales, and SVG transitions (`transition().duration(500)`) to animate bar heights, colors, and labels.

Jan 19, 2021

Loading thumbnail…

Temperature in multiple cities

This visualization displays population trends over time for multiple regions, with each region represented by a colored line. A vertical black line marks a selected year, allowing users to compare population values across regions at that specific moment. The visualization uses d3.nest to group data by region, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for the paths. A mouse-interceptor rect captures pointer movement and updates the selected year via d3.mouse, triggering a re-render. The data comes from UN population estimates and medium-variant projections, loaded with d3.csv and processed through a melt function to format years.

May 30, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. It uses React to render SVG elements, with d3.scaleBand for the categorical y-axis, d3.scaleLinear for the population x-axis, and d3.format to abbreviate tick labels from gigabytes to billions. The chart includes styled ticks, a Poppins font, and a tooltip showing each bar’s exact value via an SVG `<title>` element.

May 30, 2020

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the Iris Dataset by mapping petal length against sepal width, with each flower represented as a circular mark. The React-based implementation uses D3 v5’s scaleLinear for coordinate mapping and extent to set domains, while custom AxisBottom and AxisLeft components render ticks and labels. Data is loaded asynchronously via d3.csv, and the SVG output applies a Poppins font and teal coloring to the points.

May 28, 2020