Ignacio Esquivel

@jiesquivele·6 public vizzes

Smiley Face COMPLETED!

A grid of smiley faces fills the screen, each face rendered as a yellow circle with two eyes and an arc-shaped mouth. The components are built with React and SVG, using d3.arc to generate the mouth path and d3.range to create a 6-by-3 array of faces. Random values for stroke width, eye position, eye radius, and mouth dimensions give each face a slightly different expression. The FaceContainer component positions each face via SVG group transforms.

Jun 3, 2020

Loading thumbnail…

Delitos por provincia entre 2016 y 2019

An interactive multi-line chart shows monthly crime counts across Costa Rican provinces from 2016 to 2019, with a dropdown menu to switch between provinces and a color legend distinguishing years. The visualization uses d3.v5 with scaleTime, scaleLinear, scaleOrdinal, axisBottom, axisLeft, and nest to group data by year, drawing smoothed paths using line and curveBasis. Data comes from Justicia Abierta Costa Rica, rendered as SVG with animated transitions when changing provinces, and includes a color legend created with d3.

May 30, 2020

Loading thumbnail…

Making a Bar Chart!

This example demonstrates the basic process of creating a bar chart with D3. It shows population values for several countries as horizontal bars, using an SVG canvas. The code loads data from a CSV file and scales the bar widths with `d3.scaleLinear`, while `d3.scaleBand` is intended for the y-axis positioning. It relies on D3 v5’s `select`, `csv`, and `max` functions to bind data to SVG `<rect>` elements.

May 30, 2020

Loading thumbnail…

Interactive pie and bar

This example shows an interactive dashboard linking a bar chart of export totals for 2019 with a pie chart of category breakdowns by state. Hovering over a bar filters the pie chart and legend to show the proportions of Agricola, Industrial, and Pecuario exports for that state, with mouseout resetting the display to the overall totals. Built with React and D3.js v3, it uses ordinal and linear scales, SVG rectangles and paths, and animated transitions to update the bar heights, text labels, and pie segments.

May 30, 2020

Loading thumbnail…

Ingresos de exportación por región durante el 2019

A horizontal bar chart displays 2019 export revenues by region, with bars ordered from highest (América del Norte) to lowest (Medio Oriente) and numeric values on a linear scale. The visualization uses D3 v5 with `scaleBand` and `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and SVG rendering. Data is loaded from a local CSV file via `d3.csv`. Interactive features include mouseover tooltips showing region and revenue values and click alerts, implemented through D3 event handlers on the bars.

May 30, 2020

Loading thumbnail…

Ingresos por exportacion por medio de transporte

This example shows export revenues by transportation mode, using horizontal bars to compare air, maritime, land, and unknown categories. The chart uses D3 v5’s `scaleLinear` for the value axis and `scaleBand` for the categorical axis, with `axisLeft` and `axisBottom` for ticks. Data is loaded from a CSV file and converted to numbers, and the bars are rendered as SVG rectangles with steelblue fill. The visualization explicitly groups bars by mode without sorting, reflecting the raw data order.

May 30, 2020