Skip to main content
Log in
D

Deanna Bosschert

@deannabosschert·8 public vizzes

Loading thumbnail…

Fork of Force Network

A force-directed network graph maps relationships between actors, directors, and films, with color-coded nodes and directed links for actions like acting, directing, or writing. Built with D3 v6, it uses `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCollide` for layout. The SVG renders draggable circles with labels, while the data comes from a local JSON file containing nodes and links.

Dec 30, 2022
Loading thumbnail…

Vertical bar chart

This vertical bar chart compares the profit percentage of a single healthcare organization against national Dutch averages for 2011. The data originates from Dutch statistics and organizational annual reports. The visualization uses D3 v5 with SVG rendering, employing `scaleBand` for the categorical x-axis and `scaleLinear` for the y-axis. Custom axis styling includes formatted tick labels and rotated text, while the chart title and axis labels clarify the displayed metric.

Jan 15, 2020
Loading thumbnail…

Vertical bar chart

This vertical bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017 dataset. The visualization uses d3.scaleLinear for the y-axis and d3.scaleBand for the x-axis, with d3.axisLeft and d3.axisBottom to render customized axes—including rotated x-axis labels and formatted tick values that convert billions to "B". The chart is rendered as SVG elements, with steelblue rectangles for bars, and demonstrates axis customization through tick size, padding, and gridlines.

Jan 13, 2020
Loading thumbnail…

Vertical bar chart

This visualization displays the profit percentage of a Dutch organization from 2011 to 2018, using a vertical bar chart with a single bar per year. Built with D3 v5, it loads data from a local JSON file and renders SVG elements. The chart customizes its axes by rotating the x-axis tick labels and formatting the y-axis ticks with the `format` API. A linear scale (`scaleLinear`) maps the profit values, while a band scale (`scaleBand`) positions the bars.

Jan 13, 2020
Loading thumbnail…

Vertical bar chart

This example shows the profit percentage of a Dutch company across multiple years, from 2011 to 2018, along with a combined total. A vertical bar chart displays each year’s percentage as a green bar, with the years labeled on the x-axis and the percentage scale on the y-axis. The visualization is built with D3 v5 and Vue, using `d3.scaleLinear` for the y-axis, `d3.scaleBand` for the x-axis, and SVG rendering. Data is loaded from a local JSON file and filtered to include only the year and profit percentage before rendering.

Jan 13, 2020
Loading thumbnail…

Making a Bar Chart

This example shows the population of the ten most populous countries in 2018, drawn as a horizontal bar chart with a customized axis. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and render labels, with tick formatting that converts values to billions. Data from the United Nations World Population Prospects is loaded via `d3.json`, then multiplied by 1,000. The SVG output includes a title and axis label, with grid lines removed for a cleaner presentation.

Jan 11, 2020
Loading thumbnail…

Simple Circle Pack

This example shows a circle pack visualization of cultural heritage objects from the Nederlands Open Museum, organized by hierarchical categories under "wapens en munitie" (weapons and ammunition). It uses d3.pack and d3.hierarchy to layout the circles, with data fetched from a SPARQL endpoint via d3.json. The code queries two separate datasets—one for category hierarchies and one for object counts—to size the circles. Circles are rendered as SVG elements with semi-transparent purple fills and white strokes on a purple background.

Nov 24, 2019
Loading thumbnail…

Simple Circle Pack (d3 v4; CSV; 50 Lines)

This circle packing visualization uses a hierarchical treemap-style layout to display car ownership data from a CSV file. It presents nested circles representing categories like "cars," "owned," and "traded," with leaf nodes sized according to their numerical values. The visualization uses d3.stratify() to build the hierarchy from the flat CSV, d3.hierarchy() with a sum aggregation to compute node sizes, and d3.pack() to calculate circle positions and radii. Fifty lines of code render the result as semi-transparent SVG circles with white strokes on a fixed 300×200 canvas.

Nov 18, 2019