Kaitlyn Trudeau

@kwebercc·11 public vizzes

Fork of D3 Starter

This example demonstrates a minimal D3 version 7 starter template. It selects an SVG element with `d3.select`, fetches JSON metadata from an S3-hosted URL using `d3.json`, and renders a list of paragraphs (`<p>`) inside the SVG, each containing a `url` field from the data. The code highlights the basic data-joining workflow with `selectAll` and `.join`, serving as a simple introduction to D3’s modern API.

Aug 4, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational building block of SVG visualization: drawing a single circle directly within an HTML document. It uses inline SVG markup inside the HTML, with the circle’s position and size controlled by the `cx`, `cy`, and `r` attributes. The code renders a basic vector graphic without external JavaScript libraries, relying solely on browser-native SVG support to display the shape. It serves as a minimal starting point for understanding how SVG elements compose more complex data-driven charts and diagrams.

Aug 4, 2022

Loading thumbnail…

D3: Setting paragraphs' style conditionally, based on data

This example demonstrates how D3.js can conditionally style paragraphs based on parsed CSV data. Using `d3.csv`, it loads California temperature records and binds each row to a paragraph whose text states “I can count up to [year].” The `.style()` method applies a color function that turns the text red when the temperature value exceeds 55, otherwise black. The visualization highlights threshold-based styling with D3’s data join, showing how data-driven decisions directly influence visual output. The code relies on D3 v6 and fetches data from a remote GitHub-hosted CSV file.

Oct 3, 2020

Loading thumbnail…

CA Temperatures

Five circles represent the total number of COVID-19 deaths in different countries, with each circle’s radius proportional to the death count. The visualization uses D3.js v6’s `data()` binding to link each circle to a dataset containing country names and death figures. Data originates from the CoronavirusDailyData source on data.world. The chart encodes quantitative death values through circle area, allowing immediate visual comparison of mortality across locations.

Sep 20, 2020

Loading thumbnail…

D3 Tutorial

This example demonstrates the fundamental capability of D3.js to compute aggregate statistics on arrays, displaying the result of `d3.min()` on a hardcoded dataset. The page renders a large blank area with minimal styling, while the script defines two arrays, `numbers` and `data`, and invokes `d3.min(numbers)` to retrieve the smallest value. The visualization uses the D3 v6 library loaded via CDN, with no graphical output beyond the empty body element. It serves as a basic tutorial for understanding D3's data-handling methods in a React-free, plain HTML context.

Sep 20, 2020

Loading thumbnail…

Untitled

Three horizontal bars represent the total counts for three U.S. states, with Michigan leading at 113, Texas at 108, and California at 81. The SVG chart uses d3.select and d3.selectAll with .data().enter().append("rect") to create rectangles whose heights are proportional to the values. Each bar is positioned using a transform attribute that translates the rect horizontally based on its index, while the y attribute is set as the SVG height minus the data value, though the missing .datum reference causes the bars to render incorrectly as undefined heights. The chart has a background class of "bar-chart" with the color #C7D9D9.

Sep 20, 2020

Loading thumbnail…

Untitled

This example shows the annual variation of a single numeric value from 1895 to 2019, plotted as a time series using D3.js v6. The visualization calculates an SVG line chart from a CSV file with two columns, mapping the year to the x-axis and the value to the y-axis. The code loads the data with `d3.csv`, appends an SVG canvas with a fixed width and height, and prepares to render the dataset, though the drawing logic is incomplete. The chart relies on D3’s data-joining methods to bind the parsed rows to visual elements.

Sep 19, 2020

Loading thumbnail…

D3 Tutorial

This tutorial demonstrates a simple line chart of yearly values from a CSV file, showing the trend of data points from 1970 to 2019. The visualization uses D3.js v6 to load the `data.csv` file and render an SVG chart. The code sets up a fixed-position chart container and relies on D3's selection and data-joining methods to plot the series. While the JavaScript implementation is incomplete, the example highlights D3’s fundamental workflow for binding external data to visual elements.

Sep 19, 2020

Loading thumbnail…

D3 Tutorial

This example demonstrates a time series line chart of yearly values from 1970 to 2019, loaded from a CSV file. The visualization uses D3 v6 to bind the data, create a line generator, and render an SVG path within the page. The code references `d3.csv` for data loading and `d3.line` for the path generation, though the chart’s axes and scales are not explicitly implemented.

Sep 19, 2020

Loading thumbnail…

Craft Breweries in California

This visualization displays a simple bar chart of aggregated annual death counts in Syria from 2011 to 2018, using data sourced from the Violations Documentation Center. The page renders an SVG rectangle as a placeholder, while D3 v4 selects an `h3` heading to change its color and font size, and creates an unordered list of fruits. The code demonstrates basic D3 data binding with `selectAll`, `data`, and `enter`, though the actual bar chart for the CSV data is not implemented.

Sep 17, 2020

Loading thumbnail…

Let's make an interactive US Map with D3.js!

This interactive US map uses d3.geoAlbersUsa and d3.geoPath to render state boundaries from TopoJSON data, with each state displaying its name via SVG title elements. The visualization supports zooming and panning through d3.zoom, applying transforms to the SVG group containing the state paths. States are colored light green and highlight on hover, while the surrounding ocean appears as a light blue sphere backdrop. The map loads geographic data from a CDN-hosted US atlas file and renders everything client-side using D3 v5.

Sep 17, 2020