lakalia@wpi.edu

Testing

Refactoring initial Gapminder Population Growth in React and D3

This example visualizes Gapminder population growth data, plotting total population against year for each country as circles with tooltips showing country names. Built with React and D3 v5, it uses `scaleLinear` for both axes, `scaleOrdinal` for color encoding, and `format` to abbreviate population labels. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components that generate ticks, while `Marks` generates circles with D3’s `interpolateRainbow` color scheme. The data is loaded asynchronously from a CSV via `useData` and D3’s `csv` parser.

test changes Gapminder Data in React and D3 - interactive regions

Gapminder country data from 1950 to 2015 is plotted as an interactive scatterplot, with a year slider when time is on the x-axis, and dropdowns to select different economic and demographic attributes. A world map background, rendered with `d3.geoNaturalEarth1` and `d3.geoPath`, colors countries by World Bank region, with click-to-select and hover highlighting that filters the plotted circles. Built with React and D3 v5, using `scaleLinear`, `scaleOrdinal`, and `scaleSqrt` for scales, and SVG elements for axes, legend, and marks.

Gapminder Data in React and D3 - interactive regions

This interactive Gapminder visualization, built with React and D3, maps country-level indicators like income per capita, life expectancy, and fertility rate over time (1950-2015). Users can switch axes, scrub through years with a slider, and hover or click the color legend to highlight or select world bank regions. The map background uses `geoNaturalEarth1` and `geoPath` from D3, while SVG circles are scaled with `scaleSqrt` and colored via `scaleOrdinal`. Data is fetched from a Gapminder summary CSV.

Gapminder Total Pop v Income per Cap Slider test

This interactive scatterplot displays total population versus income per capita for countries from 1950 to 2015, based on Gapminder data summarized from a CSV file. A slider filters the dataset by year, updating the displayed points. The visualization uses React with D3 v5 scales and SVG rendering for axes and circles, with tooltips showing country names via the SVG `title` element.

Gapminder Data in React and D3 - colored world map rebuilt with interactions

This interactive Gapminder visualization combines a world map with an animated scatterplot to explore country-level data from 1950 onward. Users select a y-axis attribute (income, population, life expectancy, or fertility) via a dropdown, while the map colors countries by World Bank region using a d3.scaleOrdinal. Hovering over the color legend filters both the map and scatterplot to highlight matching countries. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the map, d3.scaleLinear for axes, and React state to manage selections, with data loaded via d3.csv and topojson.

Gapminder Data in React and D3 - world map colored rebuild

This example presents Gapminder data from 1950 onward, displaying country-level metrics as colored circles over a world map. A dropdown menu selects the y-axis attribute, while the x-axis shows the year, with each circle’s color representing its World Bank region. The visualization uses React for state management and rendering, D3’s `scaleLinear`, `scaleOrdinal`, `geoNaturalEarth1`, and `geoPath` for projections, and `topojson` for country boundaries. The map is colored by country, and a color legend explains the region assignments.

Gapminder Data in React and D3 - worldmap colored

This visualization displays historical Gapminder country data—including income, population, life expectancy, and fertility—on a world map colored by World Bank region, with a scatterplot overlay showing data over time. The React app uses D3 v5 scales (scaleLinear, scaleOrdinal) and geoNaturalEarth1 projection with geoPath to render the atlas, while the dropdown menu switches the y-axis metric. Data is loaded via d3.csv from a Gapminder summary, and country colors are matched via a lookup table.

Gapminder Data in React and D3 - world map background

This visualization displays Gapminder country data—including income per capita, total population, life expectancy, and fertility rate—as colored circles plotted over a world map background. A dropdown menu allows switching the y-axis attribute, while circles are color-coded by World Bank global region. The map is rendered using `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world atlas data, while React manages component state and D3 scales handle axes and color encoding.

Gapminder Data in React and D3 - rotated menu, added color and legend

This interactive scatter plot visualizes Hans Rosling’s Gapminder data from 1950, showing countries as colored circles positioned by year (x-axis) and a user-selected metric (y-axis) via a rotated dropdown menu. Each circle encodes its World Bank region through color, with a legend clarifying the mapping and tooltips revealing country names. Built with React and D3 (v5), the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG rendering, with axes, color legend, and marks generated as reusable React components. The code loads data via D3’s `csv` method and filters out zero values before plotting.

Gapminder Data in React and D3 - rotated menu

This example displays Hans Rosling's Gapminder dataset as an animated scatterplot in SVG, plotting annual data from 1950 with country points colored teal. A rotated dropdown menu lets users select which attribute appears on the y-axis, including income per capita, total population, life expectancy, or fertility rate, while the x-axis represents years. Using React's `useState` hook and D3's `scaleLinear`, `extent`, and `csv` data loading, the visualization renders axes and marks via custom SVG components. The React dropdown library provides the interactive control, and the code filters out rows with zero values.

Gapminder Data in React and D3 - 1 menu

This scatterplot displays Gapminder country-level data from 1950 onward, plotting year on the x-axis and one of four selectable attributes (income per capita, total population, life expectancy, or fertility rate) on the y-axis. Each circle represents a country, with its color fixed and a native SVG `<title>` tooltip revealing the country name. Built with React and D3 v5, it uses `scaleLinear` axes, `csv` loading, and `format` for tick labels, while a `react-dropdown` menu updates the y-axis attribute via React state.

Gapminder Population Growth in React and D3

This visualization displays Gapminder population growth data, plotting each country as a circle on a scatterplot with year on the x-axis and total population on the y-axis. Values are formatted with a custom tick formatter that shortens large numbers (e.g., replacing 'G' with 'B'). The React app uses D3 v5 scales (`scaleLinear`, `scaleOrdinal`) and `d3.csv` for data loading. SVG rendering is used throughout, with React components for axes and marks. Tooltips show country names via SVG `<title>` elements.

Diabetes Dataset in Vega-lite

A grouped bar chart visualizes an early-stage diabetes risk prediction dataset from UCI, showing the number of patients across age groups, separated by gender and diabetes status. The data is loaded from a Gist-hosted CSV via d3.csv in getData.js, then rendered using the vega-lite-api with a bar mark, encoding age on the x-axis, patient count on the y-axis, and a combined Gender_Diabetes field for color. The visualization uses Vega-Lite’s opacity channel and custom axis styling from config.js, with tooltips displaying patient counts.

Diabetes Dataset (without risks) in Vega-lite

The visualization shows the distribution of diabetes patients by age group and gender, using semi-transparent bars to reveal overlapping counts across categories. It displays the number of patients per age group with color encoding for gender and tooltips presenting the diabetic category. The code uses Vega-Lite's API to construct the bar chart, D3’s `csv` loader to fetch data from a GitHub gist, and applies custom axis and label styling from `config.js`. Data originates from the UCI Early stage diabetes risk prediction dataset.

Gapminder Population Growth in Vega-lite

This example visualizes Gapminder population growth data by plotting each country as a circle on a scatterplot, with the year on the x-axis, total population on the y-axis, and circle size and color encoding population magnitude and country identity. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite, and loads the CSV data via d3.csv. It applies a custom configuration for axis styling and uses a tooltip handler to display country names on interaction.

StackOverflow summary data in Vega-lite

This visualization shows the total number of StackOverflow questions per month, broken down by category, using semi-transparent bar marks. The data comes from a CSV summary of 60k StackOverflow questions hosted as a GitHub gist and loaded with `d3.csv`. Built with the `vega-lite-api`, it registers Vega and Vega-Lite, uses a custom config for axis styling, and renders to SVG. Tooltips display question totals via `vega-tooltip`, while bar colors encode the question category.

Loading and Parsing diabetes risk CSV Data

This example loads a diabetes risk prediction dataset from UCI’s machine learning repository, sourced from Sylhet Hospital in Bangladesh, and displays its size in kilobytes, row count, and column count. The visualization uses d3.csv to fetch and parse the CSV file, then d3.csvFormat to calculate the file size, with the summary rendered in a large-text <pre> element. It also includes commented-out alternatives using fetch, async/await, and d3.csvParse, demonstrating different ways to handle asynchronous data loading.

Loading and Parsing stackoverflow CSV Data

This example demonstrates how to load and parse a CSV file of Stack Overflow questions using D3 v5’s `d3.csv` method, displaying the resulting dataset’s size in kilobytes, row count, and column count in a large `<pre>` element. The data comes from a Kaggle dataset of 60k Stack Overflow questions with quality ratings, hosted as a GitHub gist. The code also includes alternative commented-out approaches using `fetch` with `async`/`await` and `d3.csvParse`, as well as a nested-promise “pyramid of doom” pattern, illustrating different ways to handle asynchronous data loading.

Loading and Parsing Hans Rosling Population Growth Data

This example demonstrates loading and parsing the Gapminder total population CSV dataset used in Hans Rosling’s animated charts, displaying file size, row count, and column count as large text. It uses D3 v5’s `d3.csv` method to fetch and parse the remote data, then formats the resulting array with `d3.csvFormat` to measure its size. The code also includes commented alternatives using the Fetch API with `async`/`await` and a nested promise chain, showing multiple approaches to asynchronous data loading.

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and origin for vehicles from the Auto MPG dataset. It displays a scatter plot of mpg against horsepower, with point size encoding weight and color distinguishing vehicle origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite and Vega in a JavaScript interface, combined with d3.csv for data loading from a Gist-hosted CSV file. A custom tooltip from vega-tooltip displays the vehicle name, while the chart autosizes to fill the browser window.

LKalia Tweak a Face - Spock

A cartoon Spock face is drawn with vector shapes, including pointed ears, angular eyebrows, and a green-tinted head, all computed from hard-coded coordinate strings. The visualization uses React to render an SVG scene, defining elements like polygons for hair and facial features, and circles for eyes, while D3 v6 provides the `polygonHull` function, though it is not used elsewhere. The code sets up a full-window canvas with the face positioned at a quarter offset from the top-left corner, using fixed constants for proportions and no interactive or animated behavior.

Smiley Face Part II

This example renders a full-window smiley face using React and D3. It builds the face from SVG primitives: a yellow circle for the head, two black circles for eyes, and an arc path for the mouth. The mouth is generated with the `d3.arc()` API, configured with inner and outer radii plus start and end angles. React manages the component structure and JSX, while D3’s `arc` helper computes the path data. The visualization responds to the browser window size, centering the face and scaling the head radius based on viewport height.

LKalia Tweak a Face - Spock_saved

This interactive SVG visualization, built with React and ReactDOM, depicts a single large yellow-green polygon that forms a stylized head. The code renders the shape by defining its polygon points within an SVG canvas, using the window’s dimensions to position it on the screen. The example demonstrates basic vector graphics rendering through React’s declarative component model, where the shape is the sole visual element. The data source is hardcoded coordinates, and no interactive tweaking or facial features are actually present.

LKalia Tweak a Face Part I

This example shows a partially completed smiley face constructed from SVG shapes. A yellow-green ellipse forms the head, while two large empty circles are positioned as eyes, lacking pupils or any facial features. The code uses basic SVG elements—`ellipse` and `circle`—with hardcoded coordinates and stroke properties. The rendering relies on raw SVG markup within an HTML file, with no JavaScript libraries or data sources involved.

Let's Make a Face Part I

This example shows the initial stage of constructing a face with simple geometric shapes, featuring a large yellow circle for the head and two smaller circles for eyes, all rendered directly in SVG. The code uses plain HTML and SVG element declarations within an inline `<svg>` tag, setting explicit coordinates and radii for each circle. The face is centered on a 960×500 canvas, with the head’s stroke and fill colors specified inline. No JavaScript libraries or data sources are involved; the visualization relies solely on static, hard-coded SVG markup to create the basic facial structure.

HTML Starter

This example displays the text “Hello HTML” centered on a plain white page, with oversized font styling that fills the viewport. It demonstrates a minimal HTML structure with embedded CSS and JavaScript, logging “Hello JavaScript!” to the browser’s developer console. The page uses standard HTML elements and a script tag, with no external libraries or data sources.