Jorge Emilio Zapata Godoy

@NapsterZ4·7 public vizzes

COVID-19 Viz

This visualization displays COVID-19 death counts across U.S. states over time, showing that most states remain below 5,000 deaths while Florida, California, and Texas experience dramatic summer increases. It uses a multi-line chart with monotone interpolation, color-encoded by cluster, and tooltips for detailed inspection. Built with vega-lite-api, vega-lite, and d3.csv for data loading, it reads from a gist-hosted COVID-19 dataset. The visualization renders as an SVG via vega-tooltip, with custom axis and label styling from a config file.

Sep 24, 2020

Loading thumbnail…

Bike Rental DataViz Humidity vs Temperature

This visualization uses the Bike Rental dataset to explore how humidity and temperature influence daily rental counts. It plots humidity against temperature, with circle size proportional to total rentals and colors distinguishing different weather cluster types. The chart reveals that rentals remain high even at temperatures near 0.9, while high humidity correlates with significantly fewer rides, suggesting temperature tolerance is greater than humidity tolerance. Built with the vega-lite-api library, it encodes the data using fieldQ scales and an opacity of 0.3 for circles, with customization via a config.js file and data loaded through d3.csv.

Sep 24, 2020

Loading thumbnail…

Population time-series

This interactive visualization displays population trends for global regions from 1950 to 2100, using animated line charts that show each region’s growth over time. The data comes from UN population estimates, processed and merged from two CSV files. The visualization is built with React and D3.v5, using d3.line for path generation, d3.scaleTime for the x-axis, and d3.scaleOrdinal with color legends to distinguish regions. The SVG rendering includes axis labels, a chart title, and interactive color legend, with animations applied to legend transitions.

Sep 24, 2020

Loading thumbnail…

ILINet Flu Surveillance Data

This visualization displays ILINet flu surveillance data, plotting weekly influenza scores over time and coloring each line by its cluster signature to reveal grouped trends across the dataset. The chart uses a line mark with tooltips that show the standard deviation for each point. Built with the vega-lite-api library, it loads CSV data via d3.csv, configures axes and styling through a custom config object, and renders the final result as an SVG using vega and vega-lite.

Sep 24, 2020

Loading thumbnail…

NYPD Complaints - Age of Officer

This stacked bar chart shows the number of civilian complaints against NYPD officers by officer age at the time of incident, with colors distinguishing complaint types. The visualization uses the vega-lite-api library, with D3’s `csv` loader to fetch data from a gist containing over 12,000 records originally sourced from ProPublica and New York City’s Civilian Complaint Review Board. The chart encodes age on the x-axis, complaint count on the y-axis, and complaint type via color. The code implements automatic sizing and tooltips through vega-tooltip, with a custom config adjusting axis ticks and label styling.

Sep 24, 2020

Loading thumbnail…

Covid-19 total number of death in each Country

This bar chart displays the total number of COVID-19 deaths for each country, using bars whose height encodes the count and whose color distinguishes locations. The visualization aggregates the data by counting records for each country, then plots those sums against a categorical x-axis. Built with Vega-Lite and the d3 library, it pulls data from a CSV file provided by a GitHub gist, with tooltips showing the location and exact death total for each bar. The chart is rendered dynamically, filling the entire browser window.

Sep 24, 2020

Loading thumbnail…

Circles on a map

This visualization displays total COVID-19 cases per country as of 16/05/2020, with semi-transparent red circles sized by case count using a square-root scale, overlaid on a natural Earth projection map. Countries lacking data appear in light red, while those with data are light gray. The map supports zooming via d3.zoom, and hovering reveals country names and exact case numbers. It uses topojson for world geography, d3.geoPath for rendering, and d3.scaleSqrt for circle sizing, with unemployment data sourced from a CSV. A custom size legend and color legend provide context.

May 28, 2020