Skip to main content
Log in
A

Alejandro Zamora Esquivel

@alitoxSB·5 public vizzes

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` curve to render the smooth path. Data is loaded via `csv` from a GitHub gist, with timestamps parsed as dates and temperatures as numbers. The SVG rendering includes styled axis labels, gridlines, and a title, all defined in an external stylesheet.

May 30, 2020
Loading thumbnail…

Top 4 delitos en Costa Rica. Periodo 2015-2018.

This stacked bar chart shows the top four crime categories in Costa Rica from 2015 to 2018: hurto, asalto, robo, and homicidios. The visualization highlights the relative frequency of each crime type per year, with segments stacked to reveal both individual and cumulative values. Built with D3 v3 and React, the code uses `d3.layout.stack()` to transpose the data, `d3.scale.ordinal()` for the x-axis, and `d3.svg.axis()` for rendering axes. An interactive tooltip, created with SVG elements, displays the exact count when the user hovers over a segment. The data originates from an embedded array within the HTML.

May 30, 2020
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries based on United Nations World Population Prospects 2019 data, using horizontal bars with a clean, minimal aesthetic. The visualization leverages React for component structure and d3.v5’s scaleBand, scaleLinear, and format APIs to render SVG rectangles via the Marks component, with axis labels and tick marks generated by custom AxisBottom and AxisLeft components. Population values are formatted using the SI format specifier, converting gigabytes to billions for readable tick labels, and tooltips appear on hover showing the exact formatted value.

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. Written in React and rendered as SVG with D3 v5, the visualization uses horizontal bars whose lengths are scaled by population, with axes and tick labels styled using the Poppins font. The code leverages D3's `scaleBand` and `scaleLinear` for positioning, while `AxisBottom`, `AxisLeft`, and `Marks` components handle the chart elements, and tooltips show formatted population values via the `title` element.

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. Written in React and rendered as SVG with D3 v5, the visualization uses horizontal bars whose lengths are scaled by population, with axes and tick labels styled using the Poppins font. The code leverages D3's `scaleBand` and `scaleLinear` for positioning, while `AxisBottom`, `AxisLeft`, and `Marks` components handle the chart elements, and tooltips show formatted population values via the `title` element.

May 30, 2020