kaijavanzante@gmail.com

@KaijaVZ·9 public vizzes

World Happiness Graph

A linked choropleth map and scatter plot visualize global happiness data, highlighting country scores, GDP per capita, and continent groupings. Interactive tooltips reveal detailed country information on hover. The map uses `d3.geoPath` with a `d3.geoEqualEarth` projection and `d3.scaleLinear` for color encoding. The scatter plot, built with `d3.axisBottom` and `d3.axisRight`, shows a log-scaled GDP axis against happiness scores, colored by continent using `d3.scaleOrdinal`. Data is rendered as SVG from loaded map and country datasets.

May 13, 2024

Loading thumbnail…

Wine/Happy Graph Take 2

This example presents two side-by-side scatter plots that compare wine production and consumption quantities against a selected variable—such as happiness, GDP, or social support—across countries. A dropdown menu allows viewers to switch the y-axis variable, updating both charts simultaneously for comparison. Built with React and D3.js v6, the visualization uses `d3.select`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render axes and circles with animated transitions. Hovering over a point triggers a tooltip displaying the exact quantity and selected variable value.

May 13, 2024

Loading thumbnail…

Fork of GapMinder (CP341 Style)

This visualization presents a fork of the classic GapMinder chart, displaying country-level GDP per capita against average lifespan across time. The left panel shows a scatterplot of circles scaled by population, while the right panel traces each country’s lifespan trajectory over years. Users control the year via a slider and filter by continent through a dropdown. Built with React and D3 v6, the code uses `d3.scaleLog`, `d3.axisBottom`, and `lineGenerator` for SVG rendering. Data comes from a JSON file, with hover tooltips and historical annotations displayed via custom event handlers.

May 13, 2024

Loading thumbnail…

Wine/Happy Combined

This visualization compares wine consumption and national happiness by combining a scatter plot with a dynamic line chart. The left panel displays points representing quantities of wine consumed per country against healthy life expectancy, with the ability to select a data point, which updates a temporal line graph on the right showing temperature and "rtb" values for that specific day. The interactive tooltip, built with D3 v6, enables this cross-filtering. The visualization uses SVG rendering and transitions to highlight selected data points, with data parsed from external CSV files.

May 12, 2024

Loading thumbnail…

ex2

This example presents a dual-view visualization of global country data, combining an interactive choropleth map with a scatter plot. The map encodes urban population rate through a green-to-grey color scale, while the scatter plot displays life expectancy against GDP per capita, with point size representing population and color indicating continent. The visualization uses `d3.geoEqualEarth` projection, `d3.geoPath` for rendering map paths, `d3.scaleLinear` and `d3.scaleOrdinal` for scales, and employs SVG elements, tooltips, and animations within a React framework.

May 7, 2024

Loading thumbnail…

Fork of Choropleth

A linked choropleth map and scatter plot visualize country-level demographic and economic indicators. The map uses `d3.geoEqualEarth` and `d3.geoPath` to render world countries colored by urban population rate, while the scatter plot encodes life expectancy, birth rate, and population using `d3.scaleLinear` and `d3.scaleOrdinal`. Users can switch axes between attributes and toggle linear/log scales, triggering transitions that redraw axes and reposition points. Data is parsed from CSV and GeoJSON, with missing values handled during preprocessing.

May 7, 2024

Loading thumbnail…

Fork of Fork of Scatterplot for peng bird dataset

This example displays a scatterplot of the world-data-2023 dataset, plotting each country’s birth rate against its calling code, with the radius of each circle representing infant mortality. The visualization uses D3 v4’s `d3.csv` to load the remote data, then builds scales with `d3.scaleLinear` and renders circles and axes using SVG selection methods like `append` and `call`. The data is sourced from a GitHub-hosted CSV file, and the chart is rendered as static SVG with a fixed color fill.

Apr 30, 2024

Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatter plot visualizes penguin data, mapping flipper length against body mass, with each point colored by species. The visualization also encodes culmen length and depth as the horizontal and vertical radii of each circle, creating elliptical marks. Built with React and D3 v6, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scales and axes, while `csv` loads the dataset from a GitHub gist. All rendering occurs as SVG elements, with hover events logged to the console.

Apr 30, 2024

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a basic SVG visualization using D3.js, drawing two circles and two rectangles on a canvas. The circles are positioned at different coordinates with a fixed radius, while the rectangles are placed at the same x and y positions but vary in height, with one using a value from the `myData` array. The code imports `select` from D3 to append elements, and additionally uses native `querySelectorAll` to log the rectangle elements to the console. Styling is applied via CSS, with red circles and minimal body margins.

Apr 29, 2024