K

Kuerzibe

@Kuerzibe·22 public vizzes

Loading thumbnail…

Scatterplot

This scatterplot uses a force-directed layout to position circles along categorical axes for “Action” and “Fact,” with circle size encoding a numeric “Strength” value. The visualization applies d3.forceSimulation with charge, collision, and custom x/y forces to gently nudge overlapping points into place while allowing drag interaction. Rendered as SVG, it uses d3.scaleOrdinal with schemeCategory10 for coloring by type, plus axisBottom and axisLeft with gridlines. Data is loaded from a CSV using d3.csv, and labels appear on hover via circle titles.

Loading thumbnail…

Scatterplot

A force-directed scatterplot maps action and fact categories to x and y axes while jittering points via d3.forceSimulation with x, y, charge, and collision forces. Node strength determines circle radius, and color encodes type using d3.scaleOrdinal with schemeCategory10. Data loads from an external CSV, and SVG rendering uses d3.axisBottom and d3.axisLeft with tick lines creating a subtle grid.

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed radar chart compares three mobile phone brands—iPhone, Samsung, and Nokia—across eight criteria such as battery life, brand, and price. For each brand, a closed polygon is drawn using `d3.scaleLinear` for the radial axis and smooth, cardinal-closed paths (`roundStrokes: true`). The SVG is generated with D3.js v5, colored via `d3.scaleOrdinal` with a custom range, and includes interactive hover effects and an animated legend.

Loading thumbnail…

Smoothed Radar Chart

This example presents a smoothed radar chart (also known as a spider graph) that compares multiple quantitative axes—such as Sales, Marketing, and Development—across three distinct categories, each assigned a unique color and legend. The visualization uses D3 v4 to render SVG paths with rounded strokes and animated transitions, while offering configurable options for levels, maximum values, units, and custom color scales. The chart draws circular grid lines and axis labels, with data from an inline dataset representing budget allocations and actual spending.

Loading thumbnail…

Smoothed Radar Chart

This example presents a smoothed radar chart, also known as a spider graph, for comparing the budget allocation and actual spending of an organization across six categories like Sales and Marketing. Three distinct data series are overlaid as colored, semi-transparent polygons, with an interactive legend and axis labels. The visualization is built using the D3.js library (v5) and renders as an SVG with a custom `RadarChart` function that handles circular grids and curved paths. It also supports animation, a configurable maximum value, and a unit suffix for the data format.

Loading thumbnail…

Radar Chart D3 V4

This radar chart displays six Liverpool neighborhoods across five percentage levels, with value comparisons shown through two overlaid polygons. Built with D3 v4, the visualization uses SVG rendering and employs d3.scaleOrdinal for color encoding, d3.json for data loading, and d3.select for DOM manipulation. The chart includes animated transitions on mouseover events for polygon highlighting, along with interactive tooltips that display precise values. Grid lines, axis labels, and percentage markers are generated programmatically, with the entire radar function configurable through options like radius, levels, and color scale.

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart compares eight attributes—such as battery life, brand, and price—across three smartphone categories. The SVG visualization uses filled, semi-transparent polygons with rounded strokes and animated glow filters, layered over circular grid lines labeled with percentage values. Built with D3 v3, it employs ordinal color scales, linear radius scaling, and cardinal-closed path interpolation to create smooth shapes. Interactive hover reveals tooltips with precise data, while a legend distinguishes each phone brand.

Loading thumbnail…

D3.js Updating Radar Chart

An updating radar chart visualizes smartphone survey ratings across axes like battery life and brand, with three product categories as overlapping, colored polygons. Built with D3.js, it uses animation to toggle legend visibility, filter axes, invert scales, adjust ranges, and modify colors or size in sequence. Data is mutated via JavaScript methods like `slice()` and `push()`, while SVG layers keep hover interactions and tooltips above chart elements.

Loading thumbnail…

Scatterplot Matrix Brushing

This scatterplot matrix shows pairwise correlations among four measurements of iris flowers, colored by species, with the ability to brush in any cell to filter and highlight matching points across all other cells. The visualization is built with D3 v3 using SVG, CSV data loading via `d3.csv`, and scales from `d3.scale.linear`. Brushing relies on `d3.svg.brush`, with brush events (`brushstart`, `brush`, `brushend`) updating circle visibility via the `hidden` class. The iris dataset originates from Anderson and Fisher, and the matrix layout is generated through a cross-product of trait pairs.

Loading thumbnail…

Sized Donut Multiples

This example uses a matrix of donut charts to show the population distribution across age groups for each US state. Each donut’s area is proportional to the state’s total population, using `d3.scaleSqrt` for scaling. The code uses `d3.csv` to load the data, `d3.pie` and `d3.arc` to compute and render the arcs, and `d3.selectAll` with `selection.each` to access both the state-level and age-group-level data simultaneously within the SVG. The legend maps age categories to colors via `d3.scaleOrdinal`.

Loading thumbnail…

Let's make a face with D3.js!

A bar chart displays the CSV data with names on the y-axis and numeric values on the x-axis. The values are multiplied by one million before rendering. Using D3 v5, the code employs `scaleLinear` and `scaleBand` for scaling, `axisLeft` and `axisBottom` for axes, and `selectAll().data().enter()` to append SVG `rect` elements. The bars are styled with a steelblue fill, and the chart is drawn within an SVG with margins.

Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between AFRPN values on the x-axis and Type categories on the y-axis, with circle size encoding Strength. Using D3 v5, the code employs scalePoint and scaleOrdinal with schemeCategory10 for color mapping. The rendering uses SVG via d3.select, with axisBottom and axisLeft creating the gridlines. Data is loaded from a CSV file using d3.csv, and circles are appended dynamically in a ticked function, though no force simulation is actually applied.

Loading thumbnail…

Let's make a face with D3.js!

This example displays a bar chart of character names and their numeric values, encoded as steel-blue rectangles on an SVG canvas. Using D3 v5, it loads data from a CSV file and scales the values linearly, while a band scale positions the names along the vertical axis. The code leverages `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the axes and bars. The dataset is transformed by multiplying each value by 1000 before visualization.

Loading thumbnail…

Hello VizHub

This example displays the text "Hello VizHub!" in a large, light-colored Ubuntu font against a dark background. It uses D3.js v5, specifically the `select` function, to target a div element and update its text content with a message imported from a separate ES6 module. The page structure is defined in HTML, with styling handled by CSS. The visualization demonstates basic DOM manipulation and modular JavaScript organization within the D3 framework.

Loading thumbnail…

Clustered Network

This interactive visualization of the Les Misérables character network supports collapsing and expanding clusters of characters, showing the weighted coappearances from Knuth's Stanford GraphBase data. The example uses d3.v2 with `forceSimulation` to layout both group and leaf nodes, and renders nodes, links, and cluster hulls as SVG elements. Users can click nodes and hulls to cycle through display modes, which illustrate a chained force layout where a secondary force calculation positions helper nodes for drawing curved links.

Loading thumbnail…

Force-Directed Layout (Multiple Foci)

One hundred unconnected nodes in a D3 force-directed graph continuously move and cluster around four focal points. The layout uses custom forces that push even and odd indexed nodes in opposite vertical and horizontal directions, creating a structured pattern of four color-coded groups. Rendered as an animated SVG, the visualization relies on D3’s `d3.layout.force` with position Verlet integration, and a tick handler applies index-based directional pushes each frame. Clicking the page or dragging nodes perturbs their positions, which then resume the clustering behavior.

Loading thumbnail…

Interactive Small Multiples - Step 5

This interactive small multiples chart visualizes AskMeFi question counts by category from 2004 to 2012 using d3 and d3fc. Each category appears as its own mini chart with an area plot, gridlines, and a horizontal line annotation. Moving the pointer over any chart reveals the corresponding year and value across all categories via trackball points and labels. The implementation uses d3.nest, d3.scaleLinear, and d3fc’s seriesSvgArea, annotationSvgLine, pointer, and chartSvgCartesian to render and coordinate the synchronized interaction.

Loading thumbnail…

Linked small multiple area charts with focus hovers

The visualization presents a grid of small multiples, each charting the frequency of an NBA player name over time. Although data spans from 1950 to 2015, most names show negligible values until their player’s career start year, after which trends become visible. Built with D3.js, the SVG charts share a synchronized hover interaction: moving the mouse across one chart updates a focus line and value label across all charts simultaneously. Each area chart uses distinct axes and styling, with the data loaded from a CSV file and parsed using `d3.time.format`.

Loading thumbnail…

Small multiples

This example demonstrates small multiples by rendering five separate line charts, one for each month, showing sales trends across the years 2011 to 2015. Each chart displays an area, line, and point series created with d3fc series components, alongside an average annotation line. The charts are generated using the d3fc chartSvgCartesian component, which is applied to each group of data via a data-join. The y-axis is hidden on all but the first chart using CSS, and the chart height adapts to screen width through a media query.

Loading thumbnail…

Zoomable Treemap Bar Chart

This visualization shows U.S. import and export trade balances by country and year, displayed as grouped treemap bar charts with inflation adjustment. Clicking a country zooms that country to the full height of the year’s bar, while other countries’ bars compress. The D3 code uses `d3.hierarchy`, `d3.scaleBand`, and `d3.scaleLinear` to lay out the data, with transitions animating the zoom effect. Data comes from the U.S. Census Bureau, with a checkbox to toggle between raw and inflation-adjusted values.

Loading thumbnail…

Radial Bar Chart

This radial bar chart displays the relative frequency of English letters (A–Z) from a CSV dataset, with each letter’s value encoded as the length of a colored arc segment arranged around a central axis. The segments animate inward from the center using an elastic easing over two seconds, while dashed circular gridlines and a solid outer ring provide scale references. Built with D3 v3, the visualization uses `d3.svg.arc` for the segments, `d3.svg.axis` for the radial scale, and `transition.attrTween` to interpolate each arc’s outer radius during the animation. Labels are placed along a circular path via `textPath`, and letter colors come from an ordinal scale.

Loading thumbnail…

BIS Derivative Data using Mike Bostock's stacked to multiple bar

This example animates a transition between stacked and multiple bar chart views of BIS OTC derivative data. It shows six market instruments (foreign exchange, interest rate, equity, commodity, credit default swaps, and unallocated) across semiannual dates from 1998 to 2013. Built with d3.v3, the visualization uses `d3.layout.stack`, ordinal and linear scales, SVG transitions, and radio buttons to toggle modes. Colors match the original BIS publication, and the data comes from a CSV file.