g_ivaska@coloradocollege.edu

Cat Data Final Demo

This visualization presents two linked views of cat breed data. A left-hand world map uses a threshold color scale to show the number of cat breeds per country, while a right-hand scatterplot plots breeds by their maximum life expectancy and weight. The map is rendered using `d3.geoPath` with an equal-earth projection, and both views support interactive selection of attributes via dropdown menus. The scatterplot uses `d3.scaleThreshold` for coloring points by origin country. The dataset originates from a Kaggle cat breeds collection.

May 13, 2024

Fork of Cat Data draft 4.6 dropdown experiments, Scat Tool Tip,embedding

This interactive visualization explores the origins and physical traits of cat breeds using a linked map and scatterplot. A zoomable, pannable world map, rendered with `d3.geoEqualEarth` and `d3.geoPath`, color-codes countries by the number of breeds originating there. The adjacent scatterplot, built with D3, plots each breed by its maximum life expectancy and weight, with dropdowns to switch the axes. The code also includes a tooltip implementation for hover details, along with planned jitter to reduce overplotting.

May 12, 2024

Cat Data draft 4.5 dropdown experiments, embedding

This visualization displays the origins of cat breeds by combining a zoomable and pannable choropleth map on the left with a scatter plot on the right. The map colors countries based on the number of cat breeds, while the scatter plot graphs each breed by maximum life expectancy and weight. The map is rendered using `d3.geoPath` and `d3.geoEqualEarth`, while the scatter plot uses D3 v6 with interactive axis selectors. Both views are intended to support exploration of breed origins and comparisons, though tooltip functionality is currently incomplete. Data comes from the Kaggle cat breeds dataset.

May 10, 2024

Fork of Cat Data draft 4 legend, zoom/pan, popuptooltip

This visualization combines a choropleth map and scatter plot to explore cat breed data from Kaggle. The map uses a `d3.geoEqualEarth` projection with a threshold color scale to show the number of breeds per country, while the scatter plot displays life expectancy against weight. Interactive features include zoom/pan on the map and a tooltip that appears on hover via D3 event listeners. Both SVG panels are rendered with D3 v6 in a React setup, with data loaded from CSV files. The visualization also includes a legend and animated transitions.

May 9, 2024

Fork of Scatter Plot with Color

This example visualizes the classic Iris Dataset as a scatter plot, showing sepal length on the x-axis and petal length on the y-axis. Each of the 150 data points is colored by species using a categorical color scale, with a legend indicating the meaning of each color. The visualization is built with D3 v7, using `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with `schemeCategory10` for colors, and `d3.selection.join` for dynamic element updates. The axes and color legend are implemented as reusable functions that render SVG circles and text elements.

May 8, 2024

Fork of GapMinder (CP341 Style)

This fork of GapMinder visualizes country-level income, life expectancy, and population across 1800–2008, with a scatterplot for a selected year and a second panel tracing each country’s life-expectancy trend over time. A slider and continent dropdown filter the data, while hovering highlights a country’s path and shows a tooltip with exact values. The visualization uses d3.v6 with SVG, scales like `d3.scaleLog` and `d3.scaleLinear`, and transitions via `transition().duration()`. It loads JSON data from a raw GitHub source, with historical annotations appearing at specific years.

May 8, 2024

Fork of Fork of Cat Data draft 3 linking the graphs

This visualization links a choropleth map of cat breed origins with a scatter plot of their physical traits. It displays the geographic distribution of cat breeds by country, alongside a plot of their maximum life expectancy against minimum weight. The code uses `d3.geoEqualEarth` and `d3.geoPath` to render the map, while `d3.scaleThreshold` maps the count of breeds to a color scale. The scatter plot uses `d3.extent` to determine axis domains, with the data sourced from the Kaggle cat breeds dataset.

May 7, 2024

Choropleth Update May 7

A linked choropleth map and scatter plot visualize country-level indicators like life expectancy, birth rate, and urban population. The map uses `d3.geoEqualEarth` and `d3.geoPath` to render country shapes, colored by a `d3.scaleLinear` based on urban rate. The scatter plot uses `d3.scaleLinear` and `d3.scaleOrdinal` to encode population and continent, with interactive drop-downs to change attributes and buttons to toggle between linear and logarithmic axis scales, updating both views with smooth `transition` animations.

May 7, 2024

Fork of Cat Data draft 2 get the map to work

This visualization combines a choropleth map with a scatter plot to explore cat breed data, showing both geographic distribution and trait comparisons. The map uses a `d3.geoEqualEarth` projection and `d3.geoPath` to render country boundaries, with a `d3.scaleThreshold` color scale encoding breed counts, while the scatter plot displays life expectancy against weight. The implementation uses D3 v6 within a React application, rendering to SVG with interactive tooltips. Data on cat breeds comes from a Kaggle dataset, processed into country-level aggregates for the map.

Fork of Circles

This example demonstrates three interactive D3.js controls that update SVG circle properties in real time: a numeric input resizes a circle’s radius, a dropdown menu transitions its fill color, and a range slider adjusts the radius of four circles simultaneously. Built with D3 v6 and loaded via UNPKG, the code uses `select`, `append`, `data`, `enter`, and `transition` to bind HTML elements and handle `input` and `change` events. The visualization runs entirely in the browser with SVG rendering and animation.

Fork of Fork of Fork of D3 world map example with TopoJSON to GeoJSON and circular indicators

This example visualizes a choropleth world map where each country’s fill color reflects its birth rate, using a linear blue scale. It also plots four city locations (Fairbanks, Boston, Philly, COS) as small circles, positioned via a Mercator projection with `d3.geoPath`. The map is built with D3 v4, loading GeoJSON country boundaries and CSV data via `d3.json` and `d3.csv`. The code uses `d3.geoMercator`, `d3.scaleLinear`, and `d3.extent` to drive the color mapping and projection.

Fork of Circles

The example "Fork of Circles" demonstrates interactive circle manipulation using D3.js v6. Three separate SVG visualizations respond to different UI controls: a numeric input resizes a single circle, a dropdown menu transitions circle color over one second, and a range slider uniformly scales multiple circles. The code imports `select` from the D3 module and uses `transition().duration()` for animated color changes, while all rendering uses standard SVG elements appended dynamically. The example relies entirely on D3's DOM selection and data-binding APIs to link user inputs to visual updates across the three independent components.

Cat Data draft 1

This visualization combines a choropleth map and a scatter plot to explore cat breed data. The map uses `d3.geoEqualEarth` and `d3.geoPath` to display the geographical distribution of breeds, with each country colored according to the number of breeds originating there. The adjacent scatter plot shows the relationship between a breed's maximum life expectancy and minimum weight, with point color assigned via a categorical scale and size derived from a custom function. Both SVG elements are rendered using d3.v6, and a tooltip appears on hover.

Fork of Fork of Chloropleth

This example displays a choropleth map of the world, coloring countries based on their "Birth Rate" from a 2023 world-data CSV. A blue-to-red linear color scale encodes the data range, with grey indicating missing countries. The visualization renders two separate SVG canvases side-by-side, each showing the same map. The code loads GeoJSON map data, country statistics, and continent data using `Promise.all` and `d3.json`, `d3.csv`, then draws the map with `d3.geoEqualEarth` and `d3.geoPath`.

May 4, 2024

Fork of Choropleth edit 1

This example combines a choropleth map and an interactive scatter plot in two side-by-side SVG panels. The map colors countries by urban population rate using a linear green-to-grey scale, while the scatter plot positions countries by life expectancy and GDP per capita, sized by population and colored by continent. The code uses `d3.geoEqualEarth` with `d3.geoPath` for map projection, alongside `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for visual encodings, with a tooltip for hover details.

May 4, 2024

Chloropleth in class

This example shows a pair of choropleth maps of the world using a linear blue-to-red color scale to encode each country's birth rate, with missing data rendered in grey. The maps are drawn side-by-side as two SVG elements, each using `d3.geoEqualEarth` projection and `d3.geoPath` to render GeoJSON features. Data comes from a CSV of world statistics loaded with `d3.csv`, and country geometries from a GeoJSON URL via `d3.json`. The code uses React and D3 v6, with a `Map` for lookups and `d3.scaleLinear` for color mapping.

May 2, 2024

Fork of Chloropleth

This fork of a choropleth combines a geographic map with a scatter plot, both rendered as SVG. The map colors countries by birth rate using a linear scale, while the scatter plot displays fertility rate against life expectancy, with circle size encoding population and color representing continent via an ordinal scale. The code uses `d3.geoEqualEarth`, `d3.geoPath`, and `d3.axisBottom`/`d3.axisRight`. Data comes from a GeoJSON file, a CSV of world statistics, and a JSON continent mapping, all loaded with `Promise.all` and `d3.json`/`d3.csv`.

May 2, 2024

Cars Scatter Plot follow

This scatter plot visualizes the relationship between horsepower and miles per gallon (MPG) for cars from the UCI Machine Learning Auto-mpg dataset. Each circle represents a vehicle, with its position determined by d3.scaleLinear scales mapping MPG and horsepower values. The visualization uses d3.csv to load and parse data, converting string values to numbers before rendering SVG circles with axes, tick marks, and labels. Circle opacity and color come from CSS styling.

Scatter Plot follow

This scatter plot shows the population of the top ten most populous countries, using circular marks positioned along a linear x-axis and a point-based y-axis. The visualization is built with D3 v5, employing `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`. Data is loaded from a CSV file with `csv()`, and population values are formatted using `format('.3s')` to display values in billions. The chart includes gridlines, axis labels, and a title, all rendered as SVG elements.

Axes Bar Chart follow

This bar chart displays the top ten most populous countries using 2018 estimates from the World Population Prospects 2017 dataset. A horizontal bar layout shows each country’s population, with bars scaled proportionally. The visualization uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and renders with SVG. Axes are customized by removing default domain lines and ticks, while d3.axisBottom applies a custom tick format that converts SI abbreviations from 'G' to 'B'.

Scatter plot follow

A scatter plot displays the population of the ten most populous countries, using 2018 estimates from the UN World Population Prospects. The chart encodes each country as a circle, with its horizontal position on a linear scale representing population and its vertical position on a band scale representing the country name. Built with D3 v5, the code loads data from a CSV file and renders the visualization as SVG, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart.

Bar Chart follow

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from World Population Prospects 2017, with values shown in thousands. It uses d3.scaleLinear for the horizontal population axis and d3.scaleBand for the vertical country categories, rendering SVG rectangles via a data join. Axes are drawn with d3.axisLeft and d3.axisBottom, and the chart applies margins to position the visualization within a 960×500 SVG canvas.

Responsive Bar chart following

This responsive bar chart visualizes the top 10 countries by total population, using 2024 UN population estimates. It shows each country’s population in thousands as horizontal bars, with labeled axes and a gray inner plot region. The visualization uses D3’s `scaleBand`, `scaleLinear`, and `axisLeft` to render marks, while `observeResize` from `@curran/responsive-axes` recalculates dimensions on container resizing, ensuring the chart adapts fluidly to varying viewport sizes.

Fork of Responsive Bar Chart

This example presents a responsive bar chart of the top 10 most populous countries, using population estimates from the UN. The visualization adapts its dimensions to the container's size through the `observeResize` function from `@curran/responsive-axes`, while the chart itself is rendered with D3's `scaleBand` and `scaleLinear` scales. The `viz` function draws an inner rectangle and bars, and axes are added via the `axes` helper, all sourced from the `@curran/un-population-estimates-2024` dataset.

Fork of HTML Starter

This example is a minimal demonstration of a static HTML page that uses CSS for styling and JavaScript for potential interactivity. It displays a large, centered message reading "Hello HTML!" through a CSS class definition. The page uses plain HTML elements and CSS properties, with no external libraries or complex rendering techniques. The code provides a foundational template for building more sophisticated data visualizations in the browser.

Scatterplot for global dataset in class

This scatterplot visualizes the relationship between GDP and gasoline prices across countries in a global 2023 world dataset. Each circle represents a country, positioned by its GDP on the x-axis and gasoline price on the y-axis using D3’s `scaleLinear` and `extent` for domain mapping. The SVG rendering is built with React and D3 v6, using `axisLeft`, `axisBottom`, and data-bound circle elements. Raw CSV data is loaded asynchronously via `d3.csv`, with tooltips and hover interactions handled through mouseover events.

Fork of Scatterplot for peng bird dataset, in class

This scatter plot visualizes penguin data, mapping flipper length to body mass with a point for each bird. The color of each dot encodes the penguin species, using distinct hex colors for Adelie, Chinstrap, and Gentoo penguins. The code loads the data using a Promise from `d3.csv`, parses numeric fields with a row function, and renders the visualization in SVG using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. A tooltip div is prepared but only logs events to the console on mouseover.

Fork of Fork of HTML Starter

This example shows a basic HTML page that uses D3.js to draw three circles and three rectangles in an SVG container. The rectangles are positioned using hardcoded data from a small array, while the circles have fixed coordinates. The code demonstrates direct SVG manipulation through both D3 selections and native DOM methods, logging elements to the console and adding onclick handlers to each rectangle. The page includes simple CSS styling for the message text and circle appearance.