B

BryanA999

@BryanA999·16 public vizzes

Loading thumbnail…

Fork of test

This example shows weekly sales data from a Walmart dataset as an area chart, with the x-axis representing weeks 0 through 52 and the y-axis showing sales values up to 4 million. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.area to render the filled region beneath the sales line. Data is loaded from a CSV file using d3.csv, and the SVG output includes labeled axes and a title. The chart is rendered entirely with D3 v5 into a static SVG element, with gridlines drawn via tickSize.

Loading thumbnail…

ICE7.4

This area chart visualizes U.S. nuclear capacity in megawatts over time, sourced from a CSV file. The chart uses an SVG rendering with an aquamarine fill and slateblue stroke, created with D3 v4 within a React framework. The code loads data via `d3.csv`, parses dates with `d3.timeParse`, and constructs the area using `d3.area` with scaled axes from `d3.scaleTime` and `d3.scaleLinear`. Axis labels for "Date" and "U.S. Nuclear Capacity" are added via SVG text elements.

Loading thumbnail…

ICE7.3

This example plots U.S. nuclear capacity in megawatts over time as a single slateblue line. The visualization uses an SVG rendered through D3 v4, with a time-scaled x-axis and linear y-axis. Data is loaded from an external CSV file and parsed with `d3.timeParse`. The chart includes labeled axes and is built with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`.

Loading thumbnail…

test

This example shows weekly sales figures for Walmart over a 52-week period, with the line chart tracking sales trends against calendar weeks. The visualization uses D3 v5 to render an SVG, employing `d3.scaleLinear` for both axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and `d3.line` to generate the path. Data is loaded as CSV from a GitHub gist, with sales values converted to numbers. The chart includes labeled axes, a title, and a styled stroke, while gridlines are created from tick sizes extending across the plotting area.

Loading thumbnail…

check

This example visualizes the relationship between engine size and horsepower in a dataset of car models. A smooth, curved area chart displays the trend, with engine size plotted on the x-axis and horsepower on the y-axis, using linear scales and grid lines for reference. The code uses D3 v5’s `csv` to load data, `scaleLinear` for both axes, and `area` and `line` generators with `curveBasis` to produce the SVG path. Axis labels are added via `axisBottom` and `axisLeft`, and the data is parsed from a GitHub-hosted CSV file.

Loading thumbnail…

ICE8.4

This visualization uses a force-directed graph to show social connections among a group of 13 people, with node size indicating relative prominence and links representing relationships such as family, marriage, and friendship. A central node anchors the network while other nodes repel each other through a many-body charge force. The code builds the layout with `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter`, then renders nodes as SVG circles and edges as SVG lines, updating their positions on each simulation tick.

Loading thumbnail…

ICE8.3

This is a hierarchical tree visualization of family relationships, showing a root node ("Hughey") branching into three child nodes, one of which has further descendants. The tree layout uses d3.tree and d3.hierarchy to compute node positions and link paths, with d3.linkVertical generating the curved connectors between nodes. Node labels are rendered as SVG text elements, colored according to the color property stored in the JSON data source, while the links are styled with a light golden stroke via CSS. The visualization is built with D3 v5 and displayed in a full-screen SVG container.

Loading thumbnail…

ICE8.1

This interactive map of the world renders country borders and landmasses in SVG using React and D3.js, drawing from the World Atlas TopoJSON dataset. The code applies a conic equidistant projection via `d3.geoConicEquidistant` and generates geographic paths with `d3.geoPath`, alongside graticules from `d3.geoGraticule`. The visualization layers a dark blue sphere for oceans, green land fills with darker strokes for interiors, and light cyan latitude/longitude lines, all styled through CSS classes within the `Marks` component.

Loading thumbnail…

ICE8.2

This geographic map visualizes world landmasses and country boundaries using an Albers equal-area conic projection centered on the United States. The visualization uses React and D3 v5, fetching country topology from the world-atlas library. Land is rendered as filled paths, with graticule lines showing latitude and longitude, and interior boundaries drawn as strokes. The map is displayed as an SVG, using `d3.geoPath` for generating geographic paths and `d3.geoAlbersUsa()` for the projection, with `feature` and `mesh` functions from the topojson library.

Loading thumbnail…

d3: Topojson Basemap

This example displays a static map of the world’s countries, rendered as gray SVG paths with white borders. The visualization uses d3.v3 to load a TopoJSON file from the world-atlas package and transforms it with the `d3.geo.albersUsa()` projection. The code employs `d3.geo.path()` to convert geographic features into SVG path data, and appends each country as a path element with the class "name". The basemap is positioned within a 900 by 480 pixel SVG canvas, set via `d3.select` and attributes on the root element.

Loading thumbnail…

ICE7.2

This pie chart visualizes the frequency distribution of letters from a truncated dataset, with each slice colored and labeled by its corresponding letter. The visualization uses D3 v3’s `d3.layout.pie` and `d3.svg.arc` to compute and render the arcs, while `d3.scale.ordinal` assigns a categorical color range. Data is loaded as CSV from a GitHub gist, with frequency values parsed as numbers, and the SVG is centered within a 900x400 viewport.

Loading thumbnail…

ICE7.1

This animated scatter plot cycles through four Iris dataset measurements on the x-axis while keeping sepal length fixed on the y-axis. Each second, the visualization removes all SVG elements, reconfigures the D3 scaleLinear domain, and re-renders circles colored by species (setosa, versicolor, virginica). The reusable scatterPlot function encapsulates margins, axes via axisLeft and axisBottom, and marks, while index.js drives the interval with csv loading and dynamic xValue updates.

Loading thumbnail…

ICE6

This bar chart displays the total physical absorption values of Dark Souls 3 armor sets, sorted in descending order from highest to lowest defense. Using React hooks to manage state and load data via `d3.csv`, the visualization employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. The SVG rendering includes custom axis tick generation with `d3.axisLeft`-style manual positioning, gold gridlines, and darkslateblue rectangles representing each armor set's absorption stat.

Loading thumbnail…

ICE6.1

This visualization displays the classic Iris dataset as an SVG scatterplot, comparing sepal length against petal length. It uses the `d3.scaleLinear` scale and `d3.extent` to map data to screen coordinates, with colored circles differentiating the three iris species (setosa, versicolor, and virginica). The code loads data via `d3.csv`, renders axes with `d3.axisLeft` and `d3.axisBottom`, and labels the chart with SVG text elements. The visualization adapts to the viewport size and is built with D3 v6 within a React-compatible HTML page.

Loading thumbnail…

ICE 5 BAdams

A stylized flower rendered in SVG, with layered pink petals and green leaves set against a light background. The composition shows a central bloom with six radially arranged petals, each containing detailed internal geometry and vein-like lines. Built with React and D3 v7, the code uses SVG shapes like ellipses, paths, and lines to construct the plant form, with colors defined in the markup. The static image demonstrates geometric pattern generation rather than interactive or data-driven behavior.

Loading thumbnail…

MySmiley

A yellow smiley face rendered as an SVG in React, composed of a circular background, two eyes, and an arc-shaped mouth. The components are modularized into separate files using ES6 modules, with React Fragments grouping the eyes. D3’s `arc` generator shapes the mouth, while constants define dimensions and offsets for the face features. The visualization is static, with no data input or interaction.