ste.jendritz@gmail.com

Cost of living map with Radar Chart Pop-up Final

An interactive world map visualizes the cost of living index per country using a color scale from dark green to dark red. Clicking a country opens a modal pop-up containing a radar chart that breaks down the cost of living into five attributes: rent, cost of living plus rent, groceries, restaurant prices, and purchasing power. The visualization uses d3.geoPath for the map projection and d3.radialLine for the radar chart, with data loaded from a CSV file and topojson for country boundaries.

Cost of living map with Radar Chart Pop-up REV1

This interactive visualization presents a world map where each country is color-coded according to its cost of living index, ranging from blue for high costs to red for low costs. Clicking on a country opens a modal pop-up containing a radar chart that compares that country’s rent, groceries, restaurant prices, and purchasing power indices. Built with D3.js and topojson-client, the map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering, while the radar chart is constructed using d3.radialLine. Animated transitions and custom CSS styling enhance the user experience.

Cost of living map with Radar Chart Pop-up

A world map uses a color gradient to display the cost-of-living index per country, with blues indicating higher costs and reds indicating lower costs. Clicking a country opens a modal pop-up containing a radar chart that breaks down that nation's rent, groceries, restaurant prices, and purchasing power. Built with D3.js, the visualization uses `geoNaturalEarth1` and `geoPath` for the map projection and rendering, while the radar chart is drawn with `radialLine`. Data comes from the included CSV file.

Fork radar chart example

This fork of Nadieh Bremer’s radar chart design visualizes the World Economic Freedom Index for China and the United States across twelve economic indicators. The D3 v5 code draws a multi-axis, animated SVG grid, scaling each axis linearly to a maximum value of 100, with filled, rounded polygons and colored dots to represent each country’s scores. The chart highlights how the US generally ranks higher in economic freedom, except on Fiscal Health and Government Spending.

Fork radar chart example

This fork radar chart visualizes the economic freedom of the United States and China across twelve categories, such as Property Rights and Trade Freedom, using the Heritage Foundation’s index data. Two colored polygons represent each country’s scores, with the US generally outperforming China except in Fiscal Health and Government Spending. Built with D3 v5, the chart renders as SVG and includes a subtle animation, using a custom `RadarChart` function with an ordinal color scale and a linear radial scale.

Fork radar chart example

This fork radar chart visualizes the economic freedom of the United States and China across twelve categories, such as Property Rights and Trade Freedom, using the Heritage Foundation’s index data. Two colored polygons represent each country’s scores, with the US generally outperforming China except in Fiscal Health and Government Spending. Built with D3 v5, the chart renders as SVG and includes a subtle animation, using a custom `RadarChart` function with an ordinal color scale and a linear radial scale.

Fork radar chart example

This fork radar chart visualizes the economic freedom of the United States and China across twelve categories, such as Property Rights and Trade Freedom, using the Heritage Foundation’s index data. Two colored polygons represent each country’s scores, with the US generally outperforming China except in Fiscal Health and Government Spending. Built with D3 v5, the chart renders as SVG and includes a subtle animation, using a custom `RadarChart` function with an ordinal color scale and a linear radial scale.

Fork radar chart

This fork radar chart compares the economic freedom of China and the United States across 12 indices, using data manually entered from the World Economic Freedom Index dataset, with animated SVG rendering. The chart displays two colored polygon blobs overlaid on a circular grid of five concentric levels, allowing immediate visual comparison of strengths and weaknesses between the countries. The code adapts Nadieh Bremer’s original radar chart implementation, using d3.scaleOrdinal for colors, d3.scaleLinear for the radial axis, and d3.format for percentage labels, while supporting flexible axis counts and rounded strokes.

Fork radar chart

This fork radar chart compares the economic freedom of China and the United States across 12 indices, using data manually entered from the World Economic Freedom Index dataset, with animated SVG rendering. The chart displays two colored polygon blobs overlaid on a circular grid of five concentric levels, allowing immediate visual comparison of strengths and weaknesses between the countries. The code adapts Nadieh Bremer’s original radar chart implementation, using d3.scaleOrdinal for colors, d3.scaleLinear for the radial axis, and d3.format for percentage labels, while supporting flexible axis counts and rounded strokes.

Fork of Economic Freedom Index Radar Chart-China vs US

This fork of Nadieh Bremer’s radar chart compares economic freedom in China and the US across twelve indices, including Fiscal Health and Government Spending. It renders as an SVG with animated, rounded polygon layers and labels, using D3.js (v5) to compute angular slices and radial scaling. The data is manually embedded in the code, and the chart highlights that the US is generally more free economically, except for the two specified dimensions. Static styling comes from CSS, and the visualization is interactive only through the color-coded series.

Cost of living map with colorscale and country pop-up

This interactive SVG world map visualizes the cost of living index per country, using a color gradient from red (low cost) to blue (high cost). It employs D3's `geoNaturalEarth1` projection and `geoPath` to render countries, with data from a CSV file. Users can hover to see country names and click to display a modal with the country's name and index value. The map fetches world atlas data from a URL and processes it with `topojson`.

Fork of Smoothed D3.js Radar Chart

A smoothed radar chart compares three smartphone brands—iPhone, Samsung, and Nokia—across eight attributes such as Battery Life, Brand, and Contract Cost, with values encoded as percentages. The visualization uses D3.js to render SVG circles, radiating axes, and colored polygonal areas with rounded strokes, overlaid with an interactive legend and tooltip. It includes seven concentric grid levels with percentage labels and a glow filter for visual emphasis. The chart animates area transitions on hover, leveraging D3’s ordinal color scale and linear radius scaling to distinguish each phone model.

Fork of NBA Player Skill Spider Chart

This interactive spider chart visualizes NBA player performance metrics—points, rebounds, assists, steals, blocks, and turnovers per game—from the 2020-2021 season. Users select a team and then an individual player through dropdown menus, causing the chart to animate and update the polygonal shape. Built with React and D3 v5, the visualization uses `scaleLinear` for each attribute axis, trigonometric positioning for the six axes, and SVG paths to render the player skill overlay.

Fork of Radar Chart

This radar chart displays monthly average temperature anomalies for Massachusetts from 1895 to 2022, with a slider to select the year. A radial time scale maps months around the circle, while a linear scale maps anomaly values to radii, using color to encode temperature differences. The visualization is built with React and D3 v7, using `d3.scaleTime`, `d3.scaleLinear`, `d3.lineRadial`, and `d3.scaleSequential` with an interpolating color scheme. Data is loaded from a CSV file and rendered as SVG paths and points.

Fork of Cost of Living World Map With Country Selection and Color Scale

This world map visualizes the cost of living index per country using a red-to-blue color gradient, with blue representing higher costs and red lower costs. The view includes a graticule and outline, and hovering over a country displays its name in green text. Built with D3.js and topojson-client, the map uses `geoNaturalEarth1` projection, `geoPath`, and `scaleSequential` with `interpolateRgbBasisClosed` to map data from a CSV file to country features. The legend and interactive selection are partially implemented in the code.

Cost of Living World Map With Country Selection and Color Scale

This interactive choropleth maps the global cost of living index, encoding each country’s relative expense with a red-to-blue color gradient derived from a sequential scale. Hovering over a country displays its name, while clicking attempts to open a modal window, which is only partially implemented. The visualization uses D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the world map, along with a custom `colorLegend` component. Data comes from a local CSV file, with geographic boundaries loaded from a TopoJSON world atlas.

Cost of Living World Map With Country Selection

This interactive world map visualizes the cost of living index by country, using a red-to-blue color gradient where blue indicates higher costs. Hovering over a country reveals its name in green text. The visualization uses D3.js with `geoNaturalEarth1` projection and `geoPath` to render map features from TopoJSON data, while a sequential color scale maps the index values. The cost of living data is loaded from a local CSV file.

Fork of Cost of Living World Map

A world map visualizes the cost of living index by country, using a color gradient where blue indicates higher costs and red indicates lower costs. The visualization loads geographic data as TopoJSON from a URL, converts it to features with `topojson-client`, and renders it using `d3.geoPath` and the Natural Earth projection, with country colors mapped from a CSV data file.

Cost of Living by Country, Top 10 REV1

This bar chart displays the top 10 countries by Cost of Living Index from the Kaggle "Cost of Living Index by Country 2024" dataset, with an index of 100 representing New York City's costs. The visualization uses D3.js, specifically `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The data is filtered from the dataset to show only the first 10 ranked countries, with each bar's height corresponding to the country's cost-of-living index. The chart includes rotated x-axis labels for readability and appropriate axis titles.

Line Chart: Country Median Salary

This example shows a line chart depicting country median salary trends, with a hand-drawn appearance achieved through thick, rounded SVG path strokes. The visualization uses D3.js’s `line` generator to create a path from hardcoded data points mapping x-y coordinates. Vanilla SVG attributes—`fill`, `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin`—are set on a `path` element to produce the bold, simple design. Data originates from the `cost-of-living-by-country-top-10-rev1` dataset, though the specific values are manually arrayed in the code.

Cost of Living World Map

This map visualizes the cost of living index across countries, using a blue-to-red color gradient where blue indicates higher costs and red indicates lower costs. Built with D3.js, it applies the `geoNaturalEarth1` projection and `geoPath` to render country outlines from TopoJSON data, while a `scaleSequential` color scale encodes the numeric index from the CSV dataset. The map also includes graticule lines and an outline for geographic context.

Fork of World Map Pop

A choropleth world map visualizes population per country, with a deeper red fill indicating a higher population using a sequential red color scale in a [minimum, maximum] population domain. It plots country paths and a graticule using the d3.geoNaturalEarth1 projection and d3.geoPath API. The code joins population data from world_population.csv, reading the '2022Population' column, to the topojson feature collection of world countries, and fetches the atlas via topojson-client.

Cost of Living by Country, Top 10

This bar chart visualizes the cost of living index for the top 10 countries, with an index of 100 representing the cost of living in New York City. Data comes from the Cost of Living Index by Country 2024 Dataset on Kaggle. The chart uses D3's `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `axisBottom` and `axisLeft` for tick marks, rendering bars with a blue fill.

Scatter Plot: Rent Index vs Rank

This scatter plot visualizes the relationship between Rent Index and Country Rank using the Cost of Living Index by Country 2024 dataset from Kaggle. Each circle represents a country, with its horizontal position encoding the rent index and vertical position encoding rank. The visualization uses D3’s `scaleLinear` for both axes, `axisLeft` for the y-axis, and the `@curran/axis-labels` library for labeled axes. An inner rectangle highlights the plotting area, while semi-transparent circles (opacity 0.629) reveal overlapping data points.

Fork of Marks and Channels

This example illustrates the fundamental concept of marks and channels in data visualization by generating six separate SVG plots, each encoding the same array of five integers using a different visual channel: x position, y position, circle size, bar length, shape, and hue. The code leverages D3 v7 modules including `selection.join()`, `d3.symbol()` for generating shape paths, and the `schemeCategory10` color scheme. It demonstrates modular JavaScript by importing distinct functions like `xPosition` and `size` from separate files, with each function applying a unique scaling factor to the data. The rendered output shows how identical data can be represented through varied visual attributes.

Salary by Job Title and Country Dataset

This example visualizes the first record of a salary dataset from Kaggle, displaying a single employee's attributes—age, gender, education level, job title, experience, salary, country, race, and seniority—as a JSON object in a large monospaced `<pre>` block. The code loads the CSV file with a default import from `./data.csv`, converts numeric fields using unary `+` operators, and then uses `JSON.stringify` to format the data for display. The visualization relies entirely on DOM manipulation through `container.innerHTML`, with no additional charting libraries.

2023 Global Country Development & Prosperity Index Dataset

This example visualizes the 2023 Legatum Prosperity Index dataset, mapping geographical distributions of average prosperity and personal freedom scores while exploring correlations between variables like education, health, and living conditions. The code loads CSV data and converts string values to numbers for analysis. It displays the first data entry as a formatted JSON preview using a template literal, providing an initial glimpse into the dataset structure. The implementation uses plain JavaScript DOM manipulation to render the output, with data sourced from a Kaggle-hosted CSV file.

Cost of Living Index by Country 2024 Dataset

The data page displays the first row of the Cost of Living Index by Country 2024 dataset as a formatted JSON object. It loads the CSV file and converts each numerical column to a number type. The view presents the structured data at a large font size, providing a clear, raw preview of a single country's index values. The example uses JavaScript's `JSON.stringify` method to render the data.

Top 5 Best Selling Video Games

Five animated circles and labels rank the top five best-selling video games by copies sold. Larger circles represent higher sales, with Tetris, Minecraft, and Grand Theft Auto V shown in descending order. The visualization uses D3’s `transition` and `easeLinear` to sequentially expand circles and fade in text labels. Data comes from IGN’s list of best-selling games, rendered in a black SVG canvas using `select`, `join`, and attribute tweening.

Fork of Circles with D3