Justin Roberts

USA MAP - ICE 8

This map of the United States visualizes state boundaries as tan-colored polygons on a black background, with a white hover effect to highlight individual states. The visualization is built with D3 v5 and TopoJSON, using the `geoAlbersUsa` projection and `geoPath` to transform geographic data from the us-atlas counties-10m JSON file into SVG paths. State names are retrieved from the TopoJSON feature properties and displayed as tooltips on hover.

Mar 26, 2023

World Map - ICE 8

This visualization displays a world map with tan-colored country polygons outlined in black, rendered on a gray background and capable of zooming through user interaction. Built with D3 v5 and TopoJSON, the map loads country boundary data from the world-atlas package and names from a corresponding TSV file, using a Natural Earth projection to generate SVG paths. Each country includes a title tooltip showing its name, with the zoom behavior applied to the entire map group via D3’s zoom() API.

Network Graph - ICE 8

This network graph visualizes friendships among eight people, with nodes connected by directed links and arrowhead markers. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes. Node and link styling is applied via SVG circles, lines, and text labels. Data is loaded from a JSON file containing node IDs and link relationships. Nodes can be dragged using d3.drag, and hovering highlights them by changing the stroke color.

USA Map - ICE 8

This example displays a full-screen USA map as a static background, with the text “Hello D3 version 7” centered in a massive 13em font. The page loads D3 v7 from a CDN and renders the message via `d3.select` and `text()`. The map itself is not generated or drawn; the code only sets body text and styling, leaving the visual to appear as a plain, oversized label without any interactive or geographic features.

USA MAP ICE 8 Final

This visualization displays a United States map with state boundaries rendered in tan and outlined in black, with a hover effect that turns each state white. It uses D3 v5 with the `geoAlbersUsa` projection and `geoPath` to draw SVG paths from TopoJSON county data loaded from the us-atlas package. The map is created by selecting all paths and binding them to state features, with a `title` element added for each state to show its name. The interaction is implemented via CSS `:hover` styling rather than JavaScript event handlers.

Fork of Swedish map

This example displays a choropleth map of Swedish counties, using a teal fill with gray borders, alongside a cyan network of interior boundaries. Built with React and D3 v5, the visualization uses `geoMercator` for projection and `geoPath` to render the geographic features. The source data is a TopoJSON file of simplified Swedish counties, processed with the `topojson` library’s `feature` and `mesh` functions to generate both the county shapes and their shared interior borders.

Fork of Fork of India Map: ICE-8

This visualization renders a choropleth map of Indian states, using a Mercator projection to display each administrative region with a distinct color from the `d3.scaleOrdinal` categorical scheme. The code loads GeoJSON state boundaries via the `d3.json` function and generates SVG paths with `d3.geoPath`, also placing state name labels at each polygon's centroid. The map is styled with a black stroke between states and is built using D3 v5.

Fork of Fork of ICE8 - Country Map

A choropleth map of Australian electoral regions renders each state and territory as an SVG path, colored by electoral division via a categorical color scale. The geoMercator projection is manually translated and scaled to frame the country. D3 v5’s `geoPath` generates the paths, while TopoJSON’s `feature` extracts region boundaries from the bundled `australia.json`. Each region includes a small text label at its centroid, computed with `pathGenerator.centroid`.

Fork of Fork of ICE8 - Country Map

Map of USA - ICE 8

This example demonstrates a minimal starting point for a D3 version 7 project, displaying the static text "Hello D3 version 7" centered on a blank page. The visualization itself is not a map; instead, it uses the `select` API from the D3 library to target the `body` element and set its text content. The page loads D3 from an unpkg CDN and applies a large font size for the message, showcasing a basic setup for future D3 development.

Fork of ICE 7 Area Chart

This visualization displays the average US net worth over time using a combined line and area chart, with the area filled in orange and the line drawn in black. It loads CSV data from a GitHub gist and parses the year values as dates. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area`, with `curveBasis` applied to smooth both the line and area paths. The SVG rendering includes gridlines, labeled axes, and a bold blue title.

Mar 12, 2023

Fork of Fork of Line Chart

This line chart displays the average US net worth over time, using a red stroke to emphasize the trend. The chart loads CSV data from a GitHub gist, parses the year and worth values, and renders an SVG with axes, labels, and a title. It uses D3 v5 methods including `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the visualization.

Mar 12, 2023

ICE 7 - Pie Chart

This pie chart visualizes speaker demographics, displaying the distribution of counts by sex. Each slice is colored via `d3.scaleOrdinal` and drawn with `d3.arc`. The legend on the right, built with SVG `rect` and `text` elements, shows each category, its percentage of the total, and the raw count in thousands. Data is loaded from a CSV file using `d3.csv`, with values aggregated and formatted using `d3.format` for display.

Mar 12, 2023

Fork of Reusable D3 Scatter Plot with Symbols

This scatter plot displays iris flower measurements, mapping petal width against sepal length and encoding species with distinct symbols. It uses a reusable D3 module pattern with `scaleLinear`, `scaleOrdinal`, and D3’s symbol generators to render SVG paths. Data is loaded from a CSV via `d3.csv`, parsed into numeric values, and plotted with axes generated by `axisLeft` and `axisBottom`. The chart fills the viewport and uses a margin-based layout for responsive positioning.

Fork of ICE7 - Reusable Scatter Plot pt 2

This animated scatter plot explores the Iris dataset by cycling through different measurement pairs on the x-axis while keeping sepal length on the y-axis. Built using D3.js v6 with SVG rendering, the visualization employs a reusable `scatterPlot` function with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to create axes. Data points are colored by species using `d3.csv` parsing. A `setInterval` timer updates the plot’s x-value accessor every few seconds, dynamically re-rendering the chart with smooth transitions. The interface includes a species legend and axis labels that update to reflect the currently displayed dimension.

Fork of Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying relationships between sepal and petal measurements across three flower species. The visualization cycles through different variable pairings every two seconds, dynamically updating the axes and data point positions. Built with the d3.js library, it uses the `csv` API to load data from a GitHub gist, `scaleLinear` for axis scaling, and custom scatterPlot logic to render SVG circles with species-specific colors, complete with animated transitions between views.

Fork of Reusable D3 Scatter Plot - Colored Scatter

This example animates the Iris dataset, cycling through different feature-pair combinations on the x-axis every two seconds to reveal how flower species cluster across dimensions. The SVG scatter plot renders colored markers, with a separate set of marks distinguishing species by color and shape. It builds on a reusable `scatterPlot` module that uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to set up the axes, while `d3.csv` loads the data from a Gist. The animation is driven by JavaScript’s `setInterval`, updating the x-value accessor without redrawing the entire chart.

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot animates through different dimensions of the Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length using `setInterval`. Points are colored by species via the `marker` function, with a legend showing green, yellow, and blue circles. The visualization uses D3 v6’s `csv` and `scaleLinear`, along with `axisLeft` and `axisBottom`, and renders interactive SVG circles whose radii are set to 5.

Fork of ICE7 - Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through different feature combinations on the x-axis while displaying sepal length on the y-axis. The visualization updates every few seconds using `setInterval`, transitioning between petal width, sepal width, petal length, and sepal length measurements. Circles are colored by species (setosa, versicolor, virginica) using distinct colors, with a legend showing species labels. The code uses D3 v6 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, `csv` for data loading, and `join` for circle creation, with SVG rendering and animation. The reusable chart pattern follows Mike Bostock's "Towards Reusable Charts" approach.

ICE-6: Rendering Marks and Channels Scatterplot

This scatterplot shows the relationship between flipper length and bill length for penguins, with each point colored by species. The visualization uses D3 v7 scales (`d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors) and renders circles as SVG marks. Data comes from the Penguins.csv file, loaded via `d3.csv`. The circle radius is also mapped to flipper length, while labeled axes for flipper and bill length are generated with `d3.axisBottom` and `d3.axisLeft`.

Untitled

This example visualizes the Palmer Penguins dataset, plotting flipper length on the x-axis against bill length on the y-axis. Each circle represents a penguin, colored by species and sized proportionally to flipper length. The visualization uses d3.csv for data loading, d3.scaleLinear for positioning, d3.scaleOrdinal for categorical coloring, and d3.axisBottom and d3.axisLeft for axes, with an SVG viewBox for rendering.

ICE-6: Rendering Marks and Channels

This example displays a horizontal bar chart comparing the counts of female and male participants, with the female bar shorter than the male bar. The SVG visualization uses D3 v7’s scaleLinear, scaleBand, axisLeft, and axisBottom to map counts to bar widths and sex labels to bar positions, rendering the marks as SVG rect elements. Data is loaded from a local data.csv file via the d3.csv function, and the chart is drawn with specific margins and a formatted x-axis using the d3.format utility.

Bar Chart

This example shows a blank page with a large, empty display area, as the title suggests a bar chart but no data or visual elements are rendered. The code sets up a basic HTML document with a centered body and loads D3 version 7 from a CDN. It defines an empty index.js file, so no chart is actually created. The example appears to be a starter template or a demonstration of how to begin using D3, rather than a working visualization, and includes an embedded YouTube video as instructional content.

Fork of Bar Chart

This example displays a horizontal bar chart comparing two categories, female and male, by count, using data loaded from a CSV file. The visualization uses D3 v7 with SVG rendering, where `d3.scaleLinear` maps count values to bar widths and `d3.scaleBand` positions the categorical y-axis. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, with the x-axis formatted using `d3.format` to abbreviate large numbers. The chart is styled with steelblue rectangles and demonstrates a simple, clean layout with custom margins.

Mar 8, 2023

Fork of HTML Starter

This example visualizes the population of two groups, female and male, as horizontal SVG bars from a loaded CSV file. The code uses `d3.csv` to parse the data, then applies `d3.scaleLinear` for bar widths and `d3.scaleBand` for vertical positioning. It appends `<rect>` elements to the SVG canvas, with heights set by the band scale. The chart updates dynamically when the asynchronous CSV data arrives.

Mar 8, 2023

Untitled

This example visualizes the counts of female and male entries from a small CSV dataset using a bar chart. It reads the data with D3’s `d3.csv` and renders proportional bars, highlighting the numerical difference between the two categories. The React-based interface uses `react-dom` to mount a component that calculates bar dimensions from the data, while CSS handles layout and basic styling. The chart is minimal, focusing on a clear, static comparison without interactive elements or animation.

Mar 6, 2023

Fork of HTML Starter - JRoberts

This example displays a textual summary of the “Speakers Data Summary” dataset, which contains speech samples from 2140 speakers across 177 countries with 214 native languages. The page shows the dataset’s size in kilobytes, row count, and column count. It loads a CSV file using `d3.csv` and computes these metrics with `d3.csvFormat`, then renders the results into an HTML `<pre>` element. The background uses a custom SVG image via CSS, and the page is styled with inline and external stylesheets.

Mar 2, 2023

Fork of Fork of Let's make a face with D3.js!

This example creates a stylized, cartoon-like face using D3.js v5, drawing features like hair, eyes, ears, nose, and teeth as SVG shapes. The primary animation shows the eyebrows moving upward and then back down over two seconds each way, using chained `transition` calls on the group containing them. The code directly manipulates SVG elements via `d3.select` and `append`, positioning features with explicit `attr` values, and uses the `arc` generator to form the mouth path. The visualization demonstrates fundamental DOM manipulation and animation within a 960 by 500 pixel SVG canvas from `index.html`.

Feb 22, 2023