SumNeuron

@SumNeuron·5 public vizzes

HeatMap

This interactive heatmap displays randomly generated values across categorical x- and y-axis names, with hierarchical clustering shown as dendrograms on both axes. The visualization includes a linked bar chart that updates based on selections made via a custom lasso tool, which uses SVG selection methods and absolute positioning calculations. Built with D3 v4, the example employs d3-scale-chromatic for color interpolation and d3-polygon for lasso hull computation. The heatmap renders as SVG rectangles, while the footer legend and tooltip are positioned according to configurable percentage-based layout parameters.

Jan 10, 2018

Loading thumbnail…

SVG Graphics Card

This example demonstrates hardware components described through SVG paths, forming an illustrated graphics card with a fan that spins continuously. The fan’s rotation is driven by `d3.interval`, which repeatedly increments an angle and applies it via an SVG transform attribute, updating the group element containing the fan blades. The static card layout, including its circuits, mounting holes, and connector pins, is defined directly in the inline SVG markup within `index.html`, while the JavaScript in `fan.js` handles the animation logic. The code uses the D3.js selection API to locate the SVG group and compute its bounding box for the rotation pivot.

May 28, 2017

Loading thumbnail…

D3 (v4) Robust, Responsive, Reusable Scatter Plot

This interactive scatter plot, built with D3 v4, displays multiple datasets selected through radio buttons. Upon hovering over a data point, a tooltip appears with its x and y coordinates, repositioning itself to stay within the chart's boundaries. The visualization uses SVG for rendering, jQuery's `ajax_json` helper for loading JSON data, and D3's `scaleLinear` for axes. The chart is responsive and includes custom functions for title wrapping, axis measurement, and interactive button controls.

Apr 30, 2017

Loading thumbnail…

D3 (v4) Flexible and Responsive Box and Whisker Chart

This responsive box-and-whisker chart displays multiple datasets loaded from a JSON file, with each dataset containing precomputed statistics (min, Q1, Q2, Q3, max) for categorical groups. Users can toggle between datasets via clickable radio-style buttons, which trigger a redraw of the chart with animated transitions on the box rectangles and whisker paths. The visualization uses D3 v4 for SVG rendering, including the `d3.scaleLinear` scales, `d3.axisBottom` and `d3.axisLeft` for axes, and `transition().duration()` for smooth updates. The chart recalculates its dimensions and margins on window resize via the `<body>` `onresize` handler.

Apr 30, 2017

Loading thumbnail…

A flexible D3 Bar Chart (v4) with variant amounts of data and svg radial buttons

This D3 v4 bar chart compares city populations across five countries, with clickable SVG radial buttons to switch datasets. The chart reads cityData.json, and hyperparameters control fonts, colors, margins, and the number of bars displayed. Bars animate on selection, with tooltips and hover color changes, and the SVG canvas resizes dynamically to fit its container.

Apr 25, 2017