Rebecca Moore

@rmoore2738·12 public vizzes

ICE-8: Social Network

This example visualizes a social network as an interactive force-directed graph, showing connections among ten individuals grouped into four clusters. The SVG rendering uses D3 v4’s `d3.layout.force` (a predecessor to `d3.forceSimulation`) to simulate physical forces—gravity, charge, and link distance—that arrange nodes and edges dynamically. Node positions update on each “tick” event, while link stroke widths scale with the `weight` value from the `network.json` data. Users can drag and drop nodes via the force drag handler, with text labels and colored circles distinguishing each person.

Apr 10, 2023

Loading thumbnail…

ICE-8: Family Tree

This interactive family tree visualization shows a hierarchical genealogy through animated node-and-link diagrams. Users can click nodes to expand or collapse branches, revealing relationships between family members across generations. Built with React and D3.js, the visualization uses the `d3.layout.tree` for positioning and `d3.svg.diagonal` for curved links. Node colors derive from the `level` property in the inline data, while SVG transitions animate layout changes with 750-millisecond durations. The tree handles dynamic node addition and removal through D3's data join pattern, with text labels and circles styled via CSS.

Apr 10, 2023

Loading thumbnail…

ICE-8:US Map

This example displays a choropleth-style map of the United States with light green states outlined in orange on a light blue background. It uses d3.geoPath with a d3.geoAlbersUsa projection to render the map, and topojson.feature to extract state boundaries from the US Atlas states-10m.json dataset. The visualization is drawn as an SVG with a fixed width and height, with each state path filled and stroked directly.

Apr 10, 2023

Loading thumbnail…

ICE-8: World

This example shows a world map with countries drawn as light green shapes outlined in orange on a light blue background. It uses D3.js to fetch geographic data from the `world-atlas` countries-110m.json file and the TopoJSON `feature` function to process it. The map is rendered into an SVG using the `d3.geoPath` and `d3.geoNaturalEarth1` projection, with country boundaries generated from the dataset's geometric features.

Apr 5, 2023

Loading thumbnail…

Fork of ICE 7 Q3

This visualization displays shampoo sales over 15 years as an area and line chart, with time on the x-axis and sales values on the y-axis. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` to create smooth, filled curves. Data is loaded from a CSV file via `csv()`, and axes are rendered using `axisBottom` and `axisLeft`. The SVG chart includes labeled tick marks and axis titles, with the sales data parsed as numbers and dates converted to JavaScript `Date` objects.

Mar 25, 2023

Loading thumbnail…

ICE 7 Q3

This line chart visualizes shampoo sales over a 15-year period, with the year on the x-axis and sales units on the y-axis. The chart is rendered as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for the axes and `line` to generate the path. Data is loaded from a CSV via GitHub Gist, and axis labels are added using `axisLeft` and `axisBottom`.

Mar 25, 2023

Loading thumbnail…

ICE-4

This example shows a stylized smiley face constructed with a colorful striped backdrop, hair tufts, a blue head, eyes, eyebrows, a nose, a mouth with teeth, and animated eyebrow movement. The visualization demonstrates fundamental DOM manipulation using D3.js v5, building the scene entirely with SVG elements such as `circle`, `rect`, and `path` generated via the `arc` generator. All elements are manually positioned with hardcoded coordinates, and the eyebrows are designed to move, illustrating basic selection and attribute updates without data binding.

Mar 25, 2023

Loading thumbnail…

Piechart ICE 7

This example shows a pie chart visualizing CO2 emissions by country, sourced from a GitHub-hosted CSV file. The chart displays each country’s emission value as a labeled slice, with a legend identifying countries by color. Built with D3.v5, the code uses `d3.pie`, `d3.arc`, and `scaleOrdinal` to generate the slices, and renders the visualization as SVG within an HTML page.

Mar 25, 2023

Loading thumbnail…

ICE 7

This reusable D3.js scatter plot animates through different axis configurations of the Iris dataset, cycling petal and sepal measurements every two seconds. Implemented with the D3 API, it uses `scaleLinear`, `axisLeft`, `axisBottom`, `symbols`, and `scaleOrdinal` to map species to distinct colors and shapes. The SVG rendering includes a dynamic legend and title, with the plot’s margins and radius configurable, demonstrating a chart pattern for interactive data exploration.

Mar 25, 2023

Loading thumbnail…

ICE-6 Q2

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with each point colored by species. The SVG visualization uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a CSV file, map values to coordinates, and render axes. The code binds circles to data rows and applies custom styles for axis labels and tick fonts.

Mar 8, 2023

Loading thumbnail…

ICE-6 Q1

A horizontal bar chart ranks countries by their 2017 fossil CO2 emissions, sorted in descending order with purple bars on a gold-ruled grid. Built with React and d3.v5, the visualization uses `csv()` to load the dataset, `scaleBand()` for the country axis, and `scaleLinear()` for the emissions axis. SVG rendering is handled through ReactDOM, with gridlines and labels generated via `xScale.ticks()` and map iterations.

Mar 8, 2023

Loading thumbnail…

ICE-5

This visualization displays metadata about a water treatment plant valve dataset, showing file size, row count, and column count via D3’s `d3.csv` and `d3.csvFormat` APIs. The page presents the information in a large, white preformatted text block over an animated gradient background and a landscape SVG image. It includes a clickable link to the raw CSV data hosted in a GitHub gist, styled with custom CSS for typography and layout.

Mar 3, 2023