ape-ape-ape

Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays the hierarchical structure of world countries, organized by continent and subregion. It uses a circular layout where leaf nodes representing individual countries are positioned at the outer ring, with intermediate labels for continents and regions shown with larger fonts. The visualization supports interactive panning and zooming through the `d3.zoom` API, which updates an SVG group’s transform based on user gestures. The tree layout is computed using `d3.hierarchy` and `d3.cluster`, with links drawn via cubic Bézier curves and text labels rotated to follow the radial orientation. Data comes from a local JSON file (`data.json`) containing the full country hierarchy.

Jan 7, 2022

Fork of Salem Map

This visualization displays a choropleth map of Salem city boundaries, colored in teal against a light background. The map is rendered as SVG paths using a Mercator projection constructed with d3.geoMercator and d3.geoPath. Geographic data is loaded via d3.json from a TopoJSON file hosted on GitHub, converted to GeoJSON using the feature function from topojson. React manages the component state and rendering, with the Marks component generating each path for the map features.

May 19, 2021

Fork of Exercise 1: SVG Fundamentals

Two gears made of interlocking cogs rotate continuously in opposite directions, driven by a small JavaScript animation embedded in the SVG. The code uses `animateTransform` with a `rotate` type to spin each gear group around its computed center, with speeds of 16 and 10 seconds per revolution. The gears are drawn as path elements with a brown fill and stroke, scaled and translated into place. The example demonstrates fundamental SVG manipulation and animation without external libraries.

Apr 17, 2021

Vertical slider

This example demonstrates a vertical slider widget built with D3 v5 and the d3-simple-slider library. It displays a percentage value (formatted to two decimal places) that users can adjust by dragging the slider handle along a vertical track. The slider is rendered as an SVG element inside a Bootstrap container, with tick marks and labels generated using d3.format and custom tick specifications. The code initializes the slider using d3.sliderLeft(), sets its min/max range from a predefined data array, and updates a paragraph element on each change event.

Apr 13, 2021

Fork of Sunburst

This visualization displays the keyboard shortcuts of VLC media player as an interactive sunburst diagram. The hierarchical data from flare.json is partitioned into radial rings, with each arc segment representing a shortcut category, action, and specific key combination. The code uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, while a rainbow color scale distinguishes top-level groups. Text labels are rotated and placed only on sufficiently large segments, and hovering reveals the full path via SVG titles. The SVG output is rendered through React.

Apr 12, 2021

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualizes hierarchical data from the Observable `@observablehq/flare` dataset, showing the flare library’s package structure with color-coded arcs and labels. Clicking a node zooms into that subtree with a smooth 750ms transition, adjusting arc positions and label rotations via `d3.transition` and `tween` interpolation. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and a sequential `d3.scaleOrdinal` with interpolated rainbow colors. The SVG renders all nodes, hiding non-visible arcs and labels through opacity filters.

Apr 12, 2021

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical structure of the Flare data, with each ring representing a level and the arc angles proportional to leaf values. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.scaleOrdinal` for layout and coloring, plus `transition.attrTween` for animated zooming and panning. The clickable arcs and labels update via interpolated transitions on the SVG paths and text elements, showing node names and values from the flare dataset on hover.

Apr 12, 2021

Fork of Exercise 1: SVG Fundamentals

An animated SVG sunrise and sunset scene uses a radial gradient for a gradually shifting sky and linear gradients for undulating terrain. The sunset is depicted with a static circle representing the sun, which animates its vertical position, moving downward and then back upward. The code defines these gradients within SVG `<defs>` elements and uses `<animate>` tags for color transitions and sun movement, with paths forming two landscape layers.

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from the auto-mpg.csv dataset. It plots miles per gallon on the x-axis against horsepower on the y-axis, with points colored by country of origin and sized with a fixed 300-pixel radius at 50% opacity. The visualization is generated declaratively using `vl.markCircle`, `vl.x().fieldQ`, `vl.y().fieldQ`, and `vl.color().fieldN` to encode the quantitative and nominal fields, with tooltips showing car names. Data is loaded asynchronously via `d3.csv` before the chart is rendered into the DOM.

Fork of Stylized Line Chart

This example visualizes temperature and temperature-squared (T²) measurements over time as two overlaid line charts. The primary line uses a natural curve while a second path applies a cardinal curve, both rendered in red within an SVG. The visualization uses React with D3 v5, employing `scaleTime`, `scaleLinear`, `extent`, and `line` from the D3 API. Data comes from a CSV file loaded via `d3.csv` from the Data Canvas Sense Your City dataset, with axes generated through custom React components.

Fork of Let's Make a Face

This visualization presents a cheerful cartoon face composed of simple geometric shapes: a yellow circular head, black eyes, rectangular eyebrows, and an arc-shaped mouth. The right eyebrow animates by smoothly moving downward and then back to its original position through chained transitions. Built with D3 v5, the example uses D3's selection methods to append SVG elements and the `arc()` helper to generate the mouth's path, with the animation driven by D3's `transition().duration()`.

Hello World

This example shows a simple yellow smiley face drawn as a circle with two black eyes, all rendered as SVG elements inside a React application. The code uses ReactDOM to mount a functional App component to a root div, and constructs the visual directly with SVG circle elements. It relies on the React library loaded from unpkg CDN and demonstrates basic JSX syntax for static graphics. React 17.0.2 and react-dom are the core dependencies, with the SVG output rendered directly in the browser.

Fork of Loading and Parsing CSV Data

This example demonstrates the basics of loading and parsing CSV data using D3.js version 5. It fetches a dataset of CSS named colors from a GitHub gist and formats it to display statistics about the file size, number of rows, and columns directly in the browser. The code uses D3’s `d3.csv` function for asynchronous data retrieval, followed by `d3.csvFormat` to stringify the parsed result. The implementation also calls `d3.csvParse` in the console to show the raw parsed object, highlighting these core D3 APIs for handling tabular data.

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a web page. It displays the size of the dataset in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv` to fetch and parse the CSS Named Colors dataset from a GitHub gist. It also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, illustrating different approaches to the same task.

Fork of 2020 presidential election margins (preliminary results)

This visualization displays the 2020 U.S. presidential election results as donut-like rings overlaid on a map of states, using preliminary data from The New York Times. Each ring's inner radius represents the losing party's votes and the outer radius the winning party's votes, so a large population state with a narrow margin appears as a thin circle, while a wide-margin state shows a thick ring. The code uses D3 v5 with `d3.geoAlbersUsa` and `d3.geoPath` to render the map, and `d3.arc` with a square-root scale to size the rings proportionally to raw vote counts. The visualization highlights the "wasted" surplus votes under the Electoral College system, where excess margins do not affect electoral outcomes.

Fork of RADIAL TREE 2

A radial tree diagram visualizes hierarchical data from a CSV file, positioning the sun at the center with planets and moons radiating outward as labeled circles. The visualization uses a D3 v4 layout with `d3.stratify` to build the hierarchy and `d3.tree` for radial positioning, rendering SVG paths for links and nodes. Node labels rotate tangentially around the tree, while an internal/leaf distinction colors parent nodes differently. Data loads from `flare.csv` via `d3.csv`, and the custom `radialPoint` function converts polar coordinates to Cartesian for node placement.

Fork of Zoomable Orbit

This interactive D3 data visualization presents a hierarchical dataset from `flare.json` as an animated orbit layout, where nodes representing data categories orbit around their parent nodes in a solar-system-like structure. The fork of the original Orbit Layout example adds zooming capabilities through the d3-zoom library, allowing users to explore the hierarchy at different levels of detail. The visualization uses SVG rendering with custom layout logic from `d3.layout.orbit.js` to position nodes and animate their orbital paths, while the d3.zoom library handles the interactive zooming functionality. The animation continuously updates node positions through a tick interval, and users can hover over nodes to see orbit rings highlighted. Styling is applied through category20b colors, with node sizes determined by depth in the hierarchy.

Fork of Organization Graph Diagram

A force-directed graph shows the network of organizations connected to the Kenneth Rainin Foundation, with nodes sized by hierarchy level and colored by their parent organization. D3’s `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` arrange the nodes and links, while drag interaction lets users reposition them. Data is defined in `data.js` using the supplied `colors` palette, and the SVG rendering updates on each tick to reposition circles, lines, and labels.

Fork of D3.js collapsible tree with boxes

This interactive tree visualization displays hierarchical data as collapsible boxes linked by labeled, arrowed connections. Built with D3.js v3 and jQuery, it uses `d3.layout.tree` with `transition` animations to expand and collapse nodes on click. The SVG layout supports zooming and panning via `d3.behavior.zoom`, tooltips, and colored node types from JSON data. The example loads data from `data2.json`, demonstrating dynamic sizing and a dark theme with styled rectangles and arrows.

Smiley

A yellow circle with a black outline forms a smiley face, flanked by two dark eye circles and a half-circle mouth arc drawn with a thick stroke. Built with React and the D3 arc generator, the SVG composition centers the face at the viewport’s midpoint, using D3’s `arc()` to define the mouth’s radius and angles. The example demonstrates translating D3 geometry into a React-rendered SVG via JSX, with fixed numeric dimensions.

Fork of HTML Starter

This example is a minimal HTML page demonstrating basic web development with CSS and JavaScript. It uses an inline style block to render a large blue heading and a red paragraph, while the body displays the text “Hello to my HTML page.” The page also includes a script tag that logs “Hello JavaScript!” to the browser’s console, illustrating simple client-side scripting with vanilla JavaScript. The styling applies global text alignment and font size to the body, making the content prominently centered.

Fork of VizHub User Count Over Time

This visualization shows the growth of VizHub's user base over time, from its launch in August 2018 to March 2021, using a line chart with circular data points. The chart incorporates annotated labels marking key milestones, such as the VizHub 1.0 release, a Kickstarter campaign, and the launch of a Datavis 2020 course, which correlate with visible upticks in users. The code builds an SVG using d3.v4, with d3.scaleTime and d3.scaleLinear for axes, d3.line for the path, and d3-svg-annotation for the callout labels. Data comes from a CSV file parsed with d3.csv.

Another fork of Let's make a map with D3

This example displays a world map using an orthographic projection, rendering countries as light-gray filled paths with black borders against a blue sphere backdrop. It loads geographic data from the world-atlas TopoJSON file via `d3.json`, converts it to GeoJSON features with the `topojson.feature` function, and draws the paths using `d3.geoPath`. The visualization is built with D3 v5 and rendered as SVG.

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

This example shows a world map with countries rendered in light green against a blue sphere, using a natural Earth projection. It loads geographic data from the world-atlas TopoJSON file, then converts it to GeoJSON features with the topojson `feature` method. D3’s `geoPath` and `geoNaturalEarth1` projection generate the SVG paths for each country, while a separate path outlines the globe. The visualization is a minimal, static map demonstrating basic D3 geospatial rendering.