Ian Coolidge

@IanCoolidge0·13 public vizzes

Final Project - Ian Coolidge

This interactive map visualizes U.S. presidential election results from 1976 to 2020, allowing users to explore state-level winners, vote counts, and electoral college totals via a dropdown menu and hover tooltips. A custom mode lets users cycle state control by clicking, and right-clicking opens a multi-line chart tracking Democratic and Republican votes over time for that state. The visualization uses D3.js with `d3.geoPath` and TopoJSON for the map, alongside data from the MIT Election Lab dataset.

Apr 25, 2024

Loading thumbnail…

Week 7 New Technique

This visualization is a choropleth map of the 2020 U.S. presidential election results, coloring states by the proportion of votes cast for the Democratic versus Republican candidates. The map uses a red-white-blue color scale—red for states that voted more Republican, blue for those voting more Democratic, and white for true swing states—with color intensity reflecting the margin of victory. It is built with D3 and TopoJSON, loading US state boundaries from a public TopoJSON atlas and aggregating county-level election returns to compute statewide Democratic vote shares. A key technique is the use of `d3.geoIdentity` for map projection and `d3.interpolateRgbBasis` with a diverging color palette to smoothly transition across the political spectrum. The visualization dynamically updates once the geographic and election data are fetched and merged, providing an at-a-glance view of partisan voting patterns across the United States in the 2020 presidential election.

Feb 29, 2024

Loading thumbnail…

Week 6 New Technique

This scatter plot explores the relationship between sweetness and ripeness scores in a subset of the Apple Quality dataset, coloring each point green or red based on whether the apple is rated good or bad. The visualization uses d3.scaleLinear for both axes and d3.selectAll to render the circles, with a custom legend object passed into the viz function to display colored squares and labels for each quality category in the lower-left corner. The example demonstrates a reusable viz function that accepts configurable options for margins, axis labels, and legend data.

Feb 22, 2024

Loading thumbnail…

Week 5 Interactivity

This bar chart shows the top 10 cereals with the highest sodium content from the 80 Cereals dataset, sorted in descending order and using a fixed y-axis range of 0 to 320. The visualization encodes each cereal name on the x-axis and sodium per serving in milligrams on the y-axis, with light gray highlighting on hover. The code uses D3’s `scaleBand`, `scaleLinear`, `axisLeft`, and the `viz` function from `@curran/axis-labels` to render axes and labels. The chart is implemented with D3’s `selectAll` and `.join()` for SVG element creation, and mouseover events change bar fill colors.

Feb 15, 2024

Loading thumbnail…

Week 5 Responsive Axes

This scatter plot visualizes the 80 Cereals dataset, plotting calories per serving against average rating. Each point is colored on a green-to-red interpolated scale based on sodium content, with greener points indicating less sodium and redder points indicating more. Hovering over any point reveals the cereal’s name in a tooltip. The chart uses D3 scales and axes to map the data, with responsive sizing handled through a ResizeObserver.

Feb 15, 2024

Loading thumbnail…

Week 4 Iteration

This scatter plot visualizes the relationship between calories and average rating for 80 different cereals. Each point's color encodes sodium content using d3.interpolateLab, transitioning from green (low sodium) to red (high sodium), revealing that high-sodium cereals tend to cluster around average calorie values rather than showing a linear trend. Users can hover over individual points to see the cereal's name through a tooltip div. The visualization uses D3.js with a linear scale for both axes and data from a CSV file.

Feb 8, 2024

Loading thumbnail…

Week 4 Simple Bar Chart

This bar chart displays the top 10 cereals with the highest sodium content per serving, sourced from the 80 Cereals Kaggle dataset. The chart uses a light gray background to delineate the plotting area, with bars rendered as rectangles. The visualization is built using D3.js version 7.8.5, employing `scaleBand` and `scaleLinear` for the axes, and the `join` API for efficient SVG element creation. The code sorts the data by sodium values and slices the top 10 entries before rendering.

Feb 8, 2024

Loading thumbnail…

Week 3 First Visual

A scatter plot visualizes the relationship between calories per serving and average consumer rating for 80 cereals. The plot reveals a general trend where lower-calorie cereals receive higher ratings, with All-Bran with Extra Fiber (50 calories) rated highest. Built with D3, the visualization uses `scaleLinear` for both axes, `axisLeft`, and `xAxis`/`yAxis` from `@curran/axis-labels` to render scales and labels. Circles are drawn with D3’s data join, using `selectAll('circle')` and attributes for positioning, radius, and opacity.

Jan 31, 2024

Loading thumbnail…

Week 2 Gradients

This animated visualization displays the solar system’s planets with sizes to scale but not distances, using D3 v7 transitions to sequentially reveal each body. Data from Wikipedia’s list of gravitationally rounded objects drives circle radii, positions, and labels, while `d3.select`, `transition`, and `easeLinear` handle the staggered entrance and updates. Three planets (Jupiter, Saturn, Uranus) use SVG linear gradients defined via `linearGradient` elements, with horizontal or vertical stops that simulate banding or atmospheric tints. The Sun and smaller planets use flat fill colors, and the black background highlights each object’s appearance.

Jan 24, 2024

Loading thumbnail…

Week 2 Dataset 2

This example displays the first record of the Dogs of Zurich dataset as formatted JSON. The code loads a CSV file, converts several string fields to numbers, and renders the resulting object in a `<pre>` element with a fixed font size. It uses the Vue framework and the `data` export to provide the parsed data for other components. The output demonstrates the structure of the original dataset.

Jan 24, 2024

Loading thumbnail…

Week 2 Dataset 1

This example displays the first row of the 80 Cereals dataset as a formatted JSON object. The code uses the `d3.csv` parsing method to load and convert the data, applying numeric type coercion to each column. The visualization simply renders this data in a `<pre>` element with a fixed font size, demonstrating a minimal static view of the dataset structure. No interactive or dynamic elements are present.

Jan 24, 2024

Loading thumbnail…

Week 2 Dataset 3

This example displays the first row of the Kaggle Animal Bites dataset as formatted JSON in a monospace preformatted element. The dataset contains records of animal bites with fields for species, breed, color, vaccination dates, and location details. The code imports the CSV data, converts the vaccination years and victim zip code fields to numbers, and then renders the first data entry. It uses the native `JSON.stringify` method to format the row with indentation for readability, with the font size set to 12 pixels.

Jan 24, 2024

Loading thumbnail…

CirclesWithD3-IanCoolidge

Three Christmas trees built from overlapping green circles stand on brown rectangular bases across a light blue background. The example uses D3.js version 7’s `select` and data joins to bind circle and rect elements to arrays of tree layer and base objects, with a `makeTree` function duplicating the initial centered tree into three positions. The rendering approach sets SVG attributes like `cx`, `cy`, `r`, and `fill` directly from the data, demonstrating a straightforward declarative pattern for generating repeated geometric shapes.

Jan 15, 2024