czy68

@czy68·7 public vizzes

Religions of Largest 20 Countries

This stacked bar chart displays the estimated 2010 religious breakdown of the 20 most populous countries, using data from the Pew Research Center's Global Religious Landscape. Each bar represents a country’s total population, segmented by religion, with a color-coded legend. The visualization presents the proportional composition of religions within each country, allowing for quick comparison across nations. The chart is built with D3.js, using a stacked layout generated via `d3.layout.stack`, and includes interactive tooltips and legend filtering. The code employs `d3.svg.axis` for axes, `d3.legend.color` for the legend, and `d3.tip` for hover details, all rendered as an SVG with animated transitions.

Apr 29, 2020

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart visualizes 2018 general project funding items categorized by academic discipline and institution type (schools, research institutes, and others). It uses D3.js v3 with `d3.layout.stack` for layering, ordinal and linear scales, and a color legend with hover interactions that dim non-selected bars. The `d3-tip` library provides tooltips showing exact counts, while the SVG rendering includes custom tick formatting. Data comes from a CSV file with department, category, and item count columns.

Apr 29, 2020

Loading thumbnail…

COVID-19 | April,2020

This interactive map visualizes the global spread of COVID-19 as of April 2020, using two ArcGIS FeatureLayers to display confirmed cases and deaths by country. The map uses an ArcGIS API for JavaScript 4.15 MapView with a gray basemap, and each country’s popup shows confirmed cases, deaths, recovered counts, and observation date. Data originates from the Kaggle COVID-19 dataset, loaded via remote feature services, with zoom constrained between levels 2 and 4.

Apr 29, 2020

Loading thumbnail…

Make an Interative World Map w/ D3.js

This interactive world map displays country boundaries on a natural Earth projection, with hover highlighting and zoom/pan functionality. The visualization loads geospatial data from the world-atlas TopoJSON and TSV files, rendering countries as SVG paths using d3.geoPath and d3.geoNaturalEarth1. The d3.zoom behavior enables interactive transformations, while country names are mapped from the TSV data and displayed as SVG title tooltips. The map uses d3 v5 and the topojson client library for feature extraction.

Apr 3, 2020

Loading thumbnail…

Covid-19

This visualization displays the global spread of Covid-19 cases from January 22 to March 30, 2020, using a world map. It plots reported cases as orange circles, with each circle’s radius scaled by the square-root of the case count for a selected date. The map is rendered as an SVG using D3 v5’s `geoPath` and `geoMercator` projections, while case data is loaded from a local CSV file. A slider input allows interactive date selection, though the displayed date label is currently static. Data is sourced from Humanitarian Data Exchange.

Apr 3, 2020

Loading thumbnail…

Melting Data for Multiple Lines

This visualization uses D3.js (v5) to animate the growth of confirmed COVID-19 cases across multiple countries, displaying them as a series of colored lines on a scatter plot. The lines are drawn using `d3.line` with `curveBasis` smoothing, and each country is distinguished by color from `d3.schemeCategory10`. The animation progresses through time by updating the data on a timer, redrawing the line paths with `transition().duration(1000)`, and the labels and circles animate to track the latest values. Data is processed from CSV files, where the code melts the data from a wide format into a long format for plotting.

Apr 2, 2020

Loading thumbnail…

Basic Bar Chart - Country Population

This bar chart displays population figures for ten countries, ranging from China at over 1.4 billion to Mexico at approximately 130 million. The chart uses horizontal bars, with country names on the y-axis and population values on the x-axis, rendered as SVG rectangles. The visualization is built with D3 v5, utilizing `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to load data, map values, and draw axes. Population values are multiplied by 1,000 to reflect actual counts.

Apr 2, 2020