A

AveryBurke

@AveryBurke·25 public vizzes

Loading thumbnail…

yggdrasil

A radial tree visualization maps hierarchical world geography, from continents to countries, using curved links and rotated labels positioned around a central "World" node. The code builds the hierarchy from a JSON dataset, applies the D3 tree layout, and renders paths with `d3.linkRadial`. Text nodes are placed via `d3.pointRadial` and rotated based on their angle, with font size decreasing by depth. The visualization supports pan and zoom through D3's zoom behavior, while text shadows improve label legibility over the golden links.

Loading thumbnail…

yggdrasil

A radial tree visualization maps hierarchical world geography, from continents to countries, using curved links and rotated labels positioned around a central "World" node. The code builds the hierarchy from a JSON dataset, applies the D3 tree layout, and renders paths with `d3.linkRadial`. Text nodes are placed via `d3.pointRadial` and rotated based on their angle, with font size decreasing by depth. The visualization supports pan and zoom through D3's zoom behavior, while text shadows improve label legibility over the golden links.

Loading thumbnail…

World Countries Tree

This interactive visualization presents a hierarchical tree of world countries, rendered as a horizontal network of nodes and links in an SVG. The data, loaded from a JSON file, is arranged using the D3.js tree layout, with link paths generated by `linkHorizontal` and node labels positioned by depth. Users can pan and zoom the entire diagram via the D3 zoom behavior, which applies transforms to a group element. The styling uses a serif font and teal strokes, with font size scaling inversely to node depth to emphasize the root hierarchy.

Loading thumbnail…

CAR-T targes

This dendrogram visualizes CAR-T therapeutic targets, grouping them by cancer type into two major categories: hematologic malignancies and solid tumors. The hierarchical tree uses a d3.cluster layout with linkHorizontal paths to connect parent nodes to their children. Text labels are positioned along the tree, with font sizes scaled inversely by depth. The visualization is rendered as SVG using D3 v5, with data loaded from a JSON file.

Loading thumbnail…

CAR-T targes

This dendrogram visualizes CAR-T therapeutic targets, grouping them by cancer type into two major categories: hematologic malignancies and solid tumors. The hierarchical tree uses a d3.cluster layout with linkHorizontal paths to connect parent nodes to their children. Text labels are positioned along the tree, with font sizes scaled inversely by depth. The visualization is rendered as SVG using D3 v5, with data loaded from a JSON file.

Loading thumbnail…

Fruit Bowl--Transitons and Labels

A row of apples animates with d3 transitions, sliding horizontally and updating as fruits are removed or change type. Labels follow each circle's position using the same transform logic, and exiting elements shrink to zero radius before removal. The example uses d3 v5 selections, `scaleOrdinal` for color and radius by fruit type, and SVG groups with merged enter/update selections for smooth animated updates.

Loading thumbnail…

CAR-T targes

This visualization maps CAR-T therapy targets across cancer types using a bubble chart. It groups targets like CD19 and CD30 into hierarchical circles representing hematologic malignancies and solid tumors. The code uses d3.pack and d3.hierarchy to position circular nodes, with d3.scaleOrdinal and d3.schemeBlues coloring them by depth. Data comes from a local JSON file, rendered as SVG using d3.json and appended circles and text labels.

Loading thumbnail…

blank canvas

The visualization displays a blank SVG canvas, initially without any data-driven graphics. The page loads a CSV file containing a single record with id, phase, and start/end dates, but the code does not render this data. The implementation uses D3 v5 to select the SVG element and parse the CSV, with commented-out code for setting dimensions and drawing a background rectangle. The canvas remains empty, likely as a starting point for future development.

Loading thumbnail…

blank canvas

An empty SVG canvas stretches across the viewport, containing no marks or data. The example demonstrates a minimal starting point for D3-based visualization work. It uses d3.select to reference the SVG element and computes the available dimensions from document.body.clientWidth and document.body.clientHeight, though the code to set the SVG size and append a rectangle is commented out. The page relies on d3.v5 and styles the body to fill the screen with hidden overflow.

Loading thumbnail…

Customizing Axes

This example shows a bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. The chart customizes both axes: the y-axis removes the domain line and tick lines, while the x-axis applies a custom tick format that abbreviates large numbers using the `d3.format` function, replacing 'G' with 'B'. Built with d3.v5, it uses `scaleLinear` and `scaleBand` for positioning, with `axisBottom`, `axisLeft`, and SVG rendering to display the data.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data sourced from the 2018 United Nations World Population Prospects. It uses D3 v5 to construct the visualization in SVG, employing `d3.csv` for data loading, `scaleLinear` and `scaleBand` for scaling, and custom axes via `axisBottom` and `axisLeft`. The code customizes tick formats with `.tickFormat` and `format`, and manually removes default axis elements to style the chart’s gridlines and labels.

Loading thumbnail…

blank canvas

An empty SVG canvas stretches across the viewport, containing no marks or data. The example demonstrates a minimal starting point for D3-based visualization work. It uses d3.select to reference the SVG element and computes the available dimensions from document.body.clientWidth and document.body.clientHeight, though the code to set the SVG size and append a rectangle is commented out. The page relies on d3.v5 and styles the body to fill the screen with hidden overflow.

Loading thumbnail…

blank canvas

A blank, full-viewport SVG canvas responds to the browser window’s dimensions. The page loads D3 v5 and imports the `select` function from D3, but the main drawing code is commented out, leaving an empty white space. The stylesheet fixes the body to the viewport with hidden overflow, ensuring the SVG occupies the entire screen without scrolling.

Loading thumbnail…

Untitled

A yellow circle with a black outline, positioned at the center of an SVG canvas, gradually transitions its fill to red and back to yellow over a five-second animation. The circle is styled as a face with two eyes, rectangular eyebrows, and a mouth drawn using D3's `arc` path generator with a semicircular inner and outer radius. The code uses `d3.select` and `transition.style` to animate the fill, while all facial features are appended as SVG elements within a centered group.

Loading thumbnail…

Bar Chart From Memory

This bar chart displays the lengths of various candy bars, with gold and Mr.Good leading the values. Using the D3 v5 API, the visualization employs `scaleLinear` for the x-axis and `scalePoint` for the y-axis, rendering rectangles (incorrectly as circles in the source) on an SVG canvas. Data is loaded from a CSV file via `csv()`, and axes are generated using `axisLeft` and `axisBottom`, with gridlines and custom styling applied through CSS.

Loading thumbnail…

Cars

This D3.js v5 SVG visualization plots temperature over time for San Francisco, using a line chart with circular data points. Time is mapped to the x-axis with a time scale, while temperature uses a linear scale on the y-axis. The chart includes gridlines, labeled axes, and a title. Data is loaded from a CSV file via the `csv` function, then rendered with `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `curveBasis` for the smoothed path.

Loading thumbnail…

Untitled

A yellow circle with a black outline, positioned at the center of an SVG canvas, gradually transitions its fill to red and back to yellow over a five-second animation. The circle is styled as a face with two eyes, rectangular eyebrows, and a mouth drawn using D3's `arc` path generator with a semicircular inner and outer radius. The code uses `d3.select` and `transition.style` to animate the fill, while all facial features are appended as SVG elements within a centered group.

Loading thumbnail…

Cars

This scatterplot displays the relationship between vehicle weight and acceleration for a dataset of cars, with each circle representing an individual model. The visualization uses D3 v5 to load CSV data, scale linear axes with formatted tick labels, and render SVG circles with custom styling. Axis labels and a title are positioned within SVG groups, while grid lines are created through tick size adjustments. The chart emphasizes data distribution through minimal circle styling and a clean, muted color palette.

Loading thumbnail…

axis

A horizontal bar chart ranks ten countries by population, with the data loaded from a CSV file and drawn as SVG rectangles. The visualization uses `d3.scaleLinear` and `d3.scaleBand` for positioning, while `d3.axisLeft` and `d3.axisBottom` render country labels and a formatted population axis that converts units to billions. The chart includes a title, an "xTitle" label, and gridlines styled via the `tickSize` method.

Loading thumbnail…

bars!

A horizontal bar chart displays population estimates for ten countries, with bars sorted alphabetically by country name and lengths scaled to population values. The visualization loads data from a CSV file and multiplies the population column by 1,000 during preprocessing. Using D3 v5, the code applies `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and renders bars as SVG rectangles with `axisLeft` and `axisBottom` for tick labels. The chart includes margins and padding, with a fixed width of 960 pixels and height of 500 pixels.

Loading thumbnail…

Let's make a face with D3.js

A yellow face built from SVG shapes animates its eyebrows up and down in a looping sequence. Using D3.js v5, the example selects an SVG element and constructs the face with circles for the eyes and an arc-generated path for the mouth, all positioned dynamically based on the SVG’s dimensions. The eyebrows, rendered as rectangles, use D3’s `transition().duration()` method twice to create the repeated motion. The code imports `select` and `arc` from the D3 module, demonstrating core SVG manipulation and animation within a single static data-less visualization.

Loading thumbnail…

Make a Face with D3.js

A playful interactive face is assembled from draggable geometric shapes, with eyes that track the pointer and a mouth that reacts. The example builds the face using SVG elements positioned with D3’s data-join, then applies forces via `d3.forceSimulation` to gently jostle the features. Pointer events drive the pupil movement through `d3.pointer`, while a timer updates the jaw’s position. The code demonstrates layered selections, transition methods like `transition.attrTween`, and event handling for a touch of character.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a simple composition, featuring three circles and three rectangles with varying fill and stroke attributes, alongside a line and a polyline path. The SVG is scaled via a transform, while a group element applies a shared fill and stroke to its children. CSS classes define the stroke properties for the line and path elements, using specific hex colors and line-join and line-cap styles. The code uses the native SVG API and plain CSS, with no external libraries.

Loading thumbnail…

shapes n shit

This example displays a simple SVG scene titled “shapes n shit,” featuring a circle and a rectangle rendered on a dark, centered page. The visualization uses raw SVG markup within an HTML document, with basic styling applied via CSS, including a large Ubuntu font. D3.js is imported to demonstrate setting text content, though the primary rendering relies on native SVG elements. The composition is static, with no interaction or animation, showing basic geometric shapes against a minimal, high-contrast background.

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal "Hello VizHub!" message displayed prominently on a dark, centered webpage. It shows how to render static text using D3.js version 5, specifically employing the `select` function to target an HTML `div` by ID. The text content originates from an ES6 module (`myMessage.js`) and is imported into the main script. Styling relies on external CSS with the Ubuntu font, while the page structure is defined in `index.html` and the D3 library is loaded via unpkg.