aidanoconnor1

Cars Scatter Plot

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between car attributes by selecting the x-axis variable via a dropdown menu. The y-axis remains fixed to weight. Built with D3 v5, the visualization uses `d3.scaleLinear` for scales, `d3.axisBottom`, `d3.axisLeft`, and SVG rendering to display circles with a fixed radius of 10 pixels. The dropdown is implemented through a reusable `downDownMenu` function, while the plot itself is rendered by a `skatterPlot` function that appends axes, grid lines, and labels.

Dec 3, 2019

Choropleth Map with interactive filtering

This choropleth map uses D3’s geoNaturalEarth1 projection and geoPath to render world countries, colored by an ordinal spectral scale based on economic data from the World Atlas datasets. A color legend with clickable circles filters the map, dimming non-selected countries and the sphere. The visualization supports zooming via D3’s zoom handler, applying transformations to the map group.

Dec 3, 2019

Choropleth Map with interactive filtering

This choropleth map visualizes global economies using a categorical color scale, with countries colored by their economic classification. The map supports interactive filtering through a clickable color legend, which selects a specific economy category. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for map projection, d3.zoom for pan-and-zoom navigation, and a d3.scaleOrdinal with the d3.schemeSpectral palette. Data is loaded via d3.tsv and topojson from the World Atlas dataset, and the map is rendered as SVG elements.

Dec 3, 2019

chloropleth map

This choropleth map colors countries according to economic data, with a color legend and hover highlighting. The visualization uses D3 v5 with `d3.geoPath` and `d3.geoNaturalEarth1` for geographic projection, while loading world data from the world-atlas TopoJSON and TSV files. The color scale uses `d3.scaleOrdinal` with the Spectral scheme to map economic classifications. Users can pan and zoom via `d3.zoom`, and country names appear as tooltips on hover.

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates two special cases of D3’s general update pattern: color and size legends rendered as SVG groups. The color legend maps categorical fruit names to distinct colors, while the size legend uses a square-root scale with tick marks to represent numeric values. The code explicitly uses `merge`, `enter`, and `exit` selections to handle dynamic updates, with `scaleOrdinal` for colors and `scaleSqrt` for sizing. Both legends are drawn with circles and text, with positioning controlled by transform attributes and spacing props.

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates two custom legend components for categorical and quantitative scales, applied to a fruit-themed visualization. The color legend maps fruit types (apple, lemon, lime, orange) to distinct colors, while the size legend uses a square-root scale for proportional circle sizing. Built with D3 v5, it uses selection joins (`enter`, `merge`, `exit`) to handle updates dynamically, rendering SVG elements with `d3.scaleOrdinal` and `d3.scaleSqrt`. The code defines reusable functions for both legends, which are called on separate SVG groups with explicit spacing and text offsets.

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates a "bowl of fruit" visualization using the general update pattern with special cases for legends. It renders separate color and size legends that display ordinal fruit categories and quantitative size scales. The code uses d3.scaleOrdinal and d3.scaleSqrt for color and size mappings, with enter/merge/exit selections to handle dynamic data updates. SVG elements (circles and text) are appended and updated through D3's selection API, with legends positioned using transforms.

Blank Canvas

A hierarchical tree visualization displays the geographic regions and countries of the world as a branching structure. The page implements a zoomable, horizontally-oriented tree using `d3.tree` and `d3.hierarchy` on the loaded hierarchical JSON data, with `d3.linkHorizontal` generating curved paths and `d3.zoom` enabling pan and zoom interactions. Node labels are rendered as SVG text elements, with font size decreasing per depth level.

Blank Canvas

An interactive tree diagram displays hierarchical country data, organized by continent and region from root World node down to individual nations. The visualization uses D3 v5's tree layout with horizontal link paths to connect parent and child nodes, while the SVG canvas spans the full viewport. The blank white background emphasizes the structural relationships between geographic classifications without additional styling or node labels.

Blank!

This example shows a blank SVG canvas with a yellow rectangle. It demonstrates fundamental DOM manipulation using D3.js by appending a `rect` element and setting its width attribute. The code imports the `select` function from the d3 library, then uses it to target the SVG element. The page renders using SVG, and the implementation is based on D3 v5, with styling defined in an external stylesheet.

Dec 1, 2019

Let's make a map with D3.js!

This example renders an orthographic globe using D3.js and TopoJSON, drawing country boundaries as green SVG paths with white strokes over a sphere background. It loads world geography from the world-atlas dataset, converts TopoJSON features via `topojson.feature`, and projects them with `d3.geoOrthographic` and `d3.geoPath`. The map is static, with no rotation or interaction, and displays all countries at a 110m resolution.

Dec 1, 2019

Bowl of Fruit - hover to select

Five pieces of fruit sit in a row, each drawn as an SVG circle; hovering over one selects it with a black outline. The bowl updates over time, as apples are removed and one apple changes into a lemon via d3 transitions. The code uses d3.scaleOrdinal for color and radius, data joins with enter/merge/exit, and mouseover/mouseout events to trigger selection.

Nov 30, 2019

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for animated transitions in D3.js. As the data changes over time, the visualization shows a row of fruit shapes that are added, removed, or altered—apples appear, one is eaten, another becomes a lemon, and an apple is removed from the middle. The code uses D3’s selection `.enter()`, `.merge()`, and `.exit()` methods to handle the incremental updates to SVG circles and text labels. It applies ordinal color and radius scales to style apples and lemons distinctly.

Nov 27, 2019

Bowl of Fruit - General Update Pattern

A bowl of fruit grows from five apples, which then shrink and vanish as they are eaten, while one apple morphs into a lemon during a sequence of updates. The visualization demonstrates D3’s general update pattern for animated transitions between data states. The code uses D3 v5’s `select`, `range`, and `scaleOrdinal` APIs, applying `transition().duration(1000)` to circles entering, merging, and exiting the SVG, with `attr('r')` and `attr('fill')` controlled by ordinal scales.

Nov 27, 2019

Temperature Ca

This visualization displays the world population by year from 2015 data, presenting the trend as a smooth area chart. The chart uses a time-scaled x-axis and a linear y-axis to show population growth over time, with a pink filled area and steel blue stroke. The visualization is rendered using D3 v5, employing `scaleTime` and `scaleLinear` for axes, `area` and `curveBasis` for the area path, and `axisLeft`/`axisBottom` for the axes. The data is loaded from a CSV file and processed before rendering.

Temperature Ca

This visualization shows daily temperature readings in San Francisco as red semi-transparent circles plotted over time. The x-axis represents timestamps using d3.scaleTime, while the y-axis uses d3.scaleLinear for temperature values. The chart includes labeled axes and a title, with data loaded from a CSV file via d3.csv. The SVG rendering uses d3.axisBottom and d3.axisLeft with grid lines, and circles are appended with d3’s enter selection.

Temperature Ca

This scatterplot displays the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. Each circle represents a car, with its position determined by d3.scaleLinear functions mapping weight and horsepower to SVG coordinates. The visualization includes labeled axes with tick marks, a title, and semi-transparent steelblue circles. The code uses d3.csv to load external data, d3.extent for domain calculation, and d3.axisLeft and d3.axisBottom to generate the chart’s axes with custom formatting based on d3.format.

cars skatter plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. Each circle represents a car, positioned by its weight on the x-axis and horsepower on the y-axis, with axis labels and gridlines. The visualization is built with D3 v5, using `scaleLinear` for both axes and `extent` to determine domains, while `axisLeft` and `axisBottom` render the labeled axes. Data is loaded via `csv()` from a remote URL, and the SVG rendering applies a semi-transparent steelblue fill to the circles.

skatter plot

This interactive scatter plot visualizes the populations of the top ten countries, with each circle positioned along a categorical y-axis and a linear x-axis scaled to population values. Built with D3 v5, the chart uses `scaleLinear` and `scalePoint` to map data, while `axisBottom` and `axisLeft` render grid lines and tick labels. Population values are formatted using D3's `format` to abbreviate large numbers, and circles are styled with a steelblue fill via CSS. The data comes from an embedded CSV file, loaded asynchronously with `csv`.

customizing Axis

This example presents a horizontal bar chart ranking the world’s most populous countries, with population values on the x-axis and country names on the y-axis. The code uses `d3.csv` to load the data and `scaleLinear` and `scaleBand` for positioning. Axis customization is central: the x-axis uses a custom tick formatter to abbreviate large numbers, while the y-axis removes its domain and tick lines. The chart is rendered as SVG, with grid lines drawn via `tickSize` and formatted using `d3.format`.