Pedro Medina

@pedroomedicina·7 public vizzes

Fork of Geo Albers with Territories Demo

This demo visualizes US state boundaries using a modified Albers projection that includes territories, rendered as SVG paths via React. It loads US Atlas TopoJSON data with `useData`, converts it to GeoJSON using `topojson.feature` and `topojson.mesh`, and draws land masses and interior borders with `d3.geoPath`. The map applies the `geoAlbersUsaTerritories` projection from the stamen library, with land filled in teal and interiors stroked in a lighter shade.

Apr 8, 2021

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree diagram. The data is sourced from a JSON file representing countries by geographic region. Using d3.js v5, the layout is computed with `d3.tree` and `d3.hierarchy`, with links drawn via `d3.linkHorizontal`. Each country name appears as text, with font size scaling by depth. The SVG rendering supports zoom and pan through a `d3.zoom` interaction, allowing exploration of the full tree. Text styling uses the Playfair Display font, with white shadows for legibility.

Feb 12, 2020

Loading thumbnail…

Temperature in San Francisco Scatter Plot Area

This example visualizes temperature readings over a week in San Francisco using a time-series area chart. The SVG rendering relies on D3 v5’s `scaleTime`, `scaleLinear`, and `area` generator with `curveBasis` to create a smooth maroon filled region, while the axes are drawn with `axisBottom` and `axisLeft`. The code loads CSV data from a VizHub dataset, parses timestamps and temperatures, and applies margins, tick styling, and axis labels. Circle elements are styled in CSS but are not explicitly appended, so only the area path and gridlines appear.

Oct 1, 2019

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This visualization presents a week of temperature data in San Francisco as a scatter plot, with a connecting line overlaid on the points to emphasize trends over time. It uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, rendering the data as SVG circles and a path generated with d3.line. The chart includes labeled axes and a title, with data loaded from a CSV file using d3.csv. Axis ticks are styled with grid lines, and the visualization is built with D3 v5.

Sep 15, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, sourced from the UCI Machine Learning repository. Each red, semi-transparent circle represents a car, positioned by its horsepower and weight values. The visualization uses D3 v5 with a scalable vector graphics (SVG) rendering approach, employing `scaleLinear` for axis scaling and `axisLeft`/`axisBottom` to generate the chart's axes. The code reads CSV data from an external URL and binds it to circle elements using D3's selection and data handling methods.

Sep 15, 2019

Loading thumbnail…

Making a Bar Chartt

A bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the UN World Population Prospects. The chart uses an SVG rendered with D3 v5, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Axes are generated with `axisLeft` and `axisBottom`, and the code parses data from a CSV file with the `csv` function.

Sep 14, 2019

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the top 10 most populous countries in 2018, using UN World Population Prospects data. It displays each country’s population as a circle positioned along a linear x-axis, with country names on a point-scale y-axis. The chart is rendered as an SVG using D3 v5, with axes and ticks styled via CSS. The code applies a custom tick format to abbreviate large numbers, converting millions to billions where applicable.

Sep 14, 2019