Skip to main content
Log in
E

EfratVil

@EfratVil·29 public vizzes

Loading thumbnail…

highlight.js

This example demonstrates how to display a JavaScript object as formatted, syntax-highlighted code on a web page. It uses the highlight.js library to apply color-coded styling to a JSON string representation of a small dataset, while D3 v4 populates the `<code>` element with the data. The code first defines an array of objects with name and size properties, then uses `d3.select` and `json.stringify` to insert the formatted data into the page. The visible result is a clean, readable code block, though no interactive visualization is present.

Jan 15, 2018
Loading thumbnail…

Filtering Objects

The example demonstrates interactive filtering of categorical data cards, where each card is colored according to its group (A, B, or C) and labeled with the group name. A dropdown menu lets users select a group to display, showing only matching cards and removing others with a gray fade-out transition. The visualization uses D3 v4’s data join, `transition`, and `selection.exit().remove()` to handle dynamic updates, with a static dataset of 24 objects. Filtering is driven by a `change` event listener on the select element, and card styling relies on inline HTML and CSS classes.

Jan 15, 2018
Loading thumbnail…

Transition Options

Two circles sit side by side in separate SVGs, demonstrating how D3 transitions can move elements either sequentially or simultaneously. The example shows the difference between chaining transitions on separate selections versus applying a single transition to all circles at once, with buttons to trigger position changes and color cycling. Built with D3 v4, it uses `d3.select`, `transition()`, `delay()`, `on("start", repeat)`, and `d3.active()` to orchestrate animation loops. The rendering is SVG-based, and the code uses Bootstrap for button styling. No external data is loaded; the visualization relies purely on programmatic animation of hardcoded circle positions and fills.

Jan 15, 2018
Loading thumbnail…

Linear Gradient

Two horizontal SVG rects demonstrate linear gradients: a static HTML/SVG version with hardcoded stops and a dynamic D3 v4 version using `d3.scaleLinear` for the color range. The D3 code programmatically appends `stop` elements to a `linearGradient` definition, mapping five color values across offsets from 0% to 100%. Both rects are stroked in black, and the example contrasts explicit markup with data-driven gradient creation. The gradient fills are applied via the `fill` attribute referencing the gradient IDs, with the D3 version relying on the `d3-selection` API to construct the SVG structure.

Jan 15, 2018
Loading thumbnail…

Linear Gradient Rotation

A linear gradient filled square rotates interactively based on a slider input, demonstrating how SVG gradient transforms can animate smoothly. The square’s fill uses a vertical linear gradient with eight evenly spaced color stops, mapped from a d3.scaleLinear over a range of pastel hues. Dragging the range input triggers a transition that applies a `gradientTransform` rotation attribute to the gradient definition, rotating the color bands within the fixed square. The code relies on d3.v4, SVG, and `transition.attr` to update the rotation, while the slider’s value directly drives the angle. No external data is used; the visualization purely illustrates gradient manipulation and interaction.

Jan 15, 2018
Loading thumbnail…

Linear Gradient Along Line Path

A line chart maps ten points with a smooth cardinal curve, and a vertical linear gradient colors the stroke from red through yellow to green. The gradient is defined as an SVG `linearGradient` with five stops, rotated 90 degrees, and applied to the path’s `stroke` attribute. The color scale uses `d3.scaleLinear` with a five-color range, while `d3.line` and `d3.curveCardinal` generate the path geometry. The example demonstrates how to apply a multi-stop gradient along a line path using D3 v4 and SVG.

Jan 15, 2018
Loading thumbnail…

Maths Equations

This example demonstrates how mathematical equations, specifically the multivariate normal distribution, are rendered directly in the browser using LaTeX notation. The page displays the probability density function for a multivariate normal variable, showing both the distribution statement and its expanded formula. The implementation relies on MathJax.js with the TeX-AMS-MML_HTMLorMML configuration, which processes LaTeX input between double dollar signs. The HTML document sets the Raleway font from Google Fonts and centers the equations under the title "Multivariate Normal." The code comes from a gist by EfratVil, using standard MathJax configuration for inline and display math rendering.

Oct 3, 2017
Loading thumbnail…

Mahalanobis Distance

A slider adjusts the correlation level between two variables, and the scatter plot updates to show how the Mahalanobis distance of each point changes accordingly. The visualization encodes distance through color, transitioning from green for low distances to red for high ones, overlaid on 2,000 points sampled from a bivariate normal distribution. The code uses D3 v4 to render an SVG with axes and circles, while the Mahalanobis distance is computed via a custom Cholesky decomposition and matrix operations, with colors interpolated using a linear scale with HCL color space.

Oct 3, 2017
Loading thumbnail…

Brush & Zoom line chart

This brush & zoom line chart visualizes hourly environmental data from CIMIS Station 125, plotting multiple meteorological variables such as air temperature, wind speed, and soil temperature over time. The main chart displays the selected time range as a series of colored lines, while a smaller context view beneath it shows the full time series. Users can brush over the context chart to define a focus window, and the main chart responds with a smooth zoom transition, allowing for detailed inspection of specific periods. The visualization, built with D3 v4 and rendered in SVG, uses a shared x-scale for both views, enabling intuitive linking between the overview and detail.

Oct 3, 2017
Loading thumbnail…

Fixed size slider

This example shows a line chart of 200 randomly generated data points, with a fixed-size brush slider that can only be moved side to side. The chart uses D3 v4 with SVG rendering, where the brush is created using `d3.brushX()` and initially positioned over a range of data points. The code explicitly removes the brush handles and overlay to prevent resizing, leaving only the movable brush window. The line is drawn with `d3.line()` and scaled using `d3.scaleLinear()`, while axes are added via `d3.axisBottom` and `d3.axisLeft`.

Sep 16, 2017
Loading thumbnail…

Objects ordering

Forty randomly placed circles of varying colors demonstrate z-order manipulation through mouse interactions. Hovering brings a circle to the front by appending it as the last SVG child, while clicking sends it to the background by inserting it as the first child. The code uses D3 v4 with SVG elements, d3.range for data generation, and d3.scaleOrdinal for color mapping, with mouseover and click events controlling element order via parentNode methods.

Sep 16, 2017
Loading thumbnail…

Simple Zoom and Pan

This example demonstrates simple zoom and pan interactions on a scatterplot of 100 randomly positioned circles. The visualization uses D3 v4 to render SVG circles with a categorical color scale, while a transparent overlay rectangle captures pointer events and applies a zoom behavior with a scale extent from 0.5× to 4×. The zoomed function updates the transform attribute of a container group, enabling smooth panning and scaling of all circles. The code leverages d3.zoom and d3.event.transform to handle the interaction, with the data generated on the fly using d3.range and Math.random.

Sep 16, 2017
Loading thumbnail…

Area chart

Three layered area bands show how a value range evolves across an x-axis from 0 to 70, with each band representing a distinct series (e.g., area1, area2, area3) defined by low and high y-values. The chart uses stacked-like transparency via SVG paths filled with teal shades, computed with D3 v4’s `d3.area()` generator and linear scales for x and y. Rendering is done through SVG path elements appended to a 700×400 viewport, with data hardcoded as JavaScript arrays in the gist source.

Jan 26, 2017
Loading thumbnail…

clusters force

This example shows 300 circular nodes grouped into three distinct clusters, each with its own radial gradient color scheme. The visualization uses a force-directed simulation with `d3.forceSimulation` and a custom cluster force to keep nodes near their group’s center, while `d3.forceCollide` prevents overlap by applying padding based on node radius. The nodes are drawn as SVG circles, with each cluster’s color derived from a linear scale mapped to a radial gradient, creating a smooth visual distinction. The code defines three separate radial gradients and assigns them based on the node’s cluster value, while the custom cluster force adjusts node positions relative to a designated cluster center.

Jan 26, 2017
Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

Dec 30, 2016
Loading thumbnail…

V4 simple network graph

This example shows a simple network graph of ten labeled nodes (A through J) connected by ten links, with each node’s name displayed directly beside it. The visualization uses a force-directed layout to position the nodes and links, which can be dragged interactively. The code relies on D3 v4’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to calculate positions, while SVG circles and text elements render the nodes and labels. Data is loaded from an external `data.json` file, and the labels are styled with the "Architects Daughter" font.

Dec 2, 2016
Loading thumbnail…

Normal Distributions

This example visualizes two normal distributions as filled, semi-transparent density curves overlaid on the same axes. It shows how the spread and peak of the distributions differ based on their standard deviations. The code uses D3 v4 with SVG rendering, and computes the probability densities using the `jStat` library’s `normal.pdf` function. Random data is generated by the custom `Random_normal_Dist` function, which samples quantiles from a mean and standard deviation. The `d3.line` generator draws the curves, and the horizontal axis is scaled with `d3.scaleLinear`.

Nov 30, 2016
Loading thumbnail…

Colors Interpolation

Three color interpolation scales demonstrate how D3.js v4 maps numeric domains to color ramps, rendered as rows of circles in SVG. The first scale interpolates from red to green using two stops, the second adds a middle yellow stop, and the third uses eight discrete stops for a finer gradient. Each scale employs `d3.scaleLinear` with the `d3.interpolateHcl` color interpolator, while the circles are generated programmatically from a simple data array. The example illustrates how interpolation choice and stop density affect perceived color transitions.

Nov 27, 2016
Loading thumbnail…

Change objects opacity

Five orange circles in a row share the same fill color, and their opacity changes uniformly when a range slider is dragged. The example demonstrates a simple linked interaction between an HTML input control and SVG circle elements. Using D3 v4, the slider’s `input` event triggers a `transition` on all circles, easing their opacity over one second to match the slider’s value divided by 100. The code selects the circles with `svg.selectAll('circle')` and updates their style property, while the static SVG circles are generated with hardcoded positions and radii, and no external data source is used.

Nov 27, 2016
Loading thumbnail…

Scatter plot with zoom

This scatter plot visualizes 300 normally distributed data points and supports interactive zooming through a brushed region. Users can drag to select a rectangular area, which triggers a smooth animated transition that rescales the x and y axes to focus on the selected points. Double-clicking outside the brushed area resets the view to the full dataset. The implementation uses D3 v4’s `d3.brush` for selection handling, `d3.scaleLinear` for coordinate mapping, and `transition.attr` to animate the circles’ positions. The axes are updated via `d3.axisBottom` and `d3.axisLeft`, with a clip path preventing points from spilling outside the plotting area.

Nov 27, 2016
Loading thumbnail…

swirling circles

Hundreds of small, semi-transparent circles continuously stream inward from the top and bottom edges, converging at the center before dispersing outward again in a looping, decorative motion. The animation is generated entirely with D3 v3, using chained `transition()` calls over 2-second durations to animate each circle’s `cx` and `cy` attributes with a linear ease, then removing each element after its animation completes. Random colors are assigned via a custom `colorPicker` function, while circle starting positions and target offsets are determined by `Math.random()`. A `setInterval` spawns a new circle every 20 milliseconds, capped at 1,000 total per loop, which then repeats indefinitely.

Oct 3, 2016
Loading thumbnail…

Scatter plot brushing

This example demonstrates interactive brushing on a scatter plot, where users can drag a rectangular selection to highlight points within that region in orange while dimming others remain blue. The visualization uses 300 randomly generated data points from a normal distribution, rendered as SVG circles with axes. The brushing interaction is implemented using d3.brush, with the brushed event updating circle fills based on the selection bounds, while brushended resets the colors with a smooth transition when the brush is cleared. The code uses d3.scaleLinear for positioning and d3.axisBottom/axisLeft for axes.

Sep 18, 2016
Loading thumbnail…

Line chart with information box

A line chart displays 200 randomly generated data points, with each point’s x-position based on its sequential ID and y-position on its value. Hovering over a point triggers an animated transition that highlights the selected point with a larger orange circle and reveals an information box on the right, showing the point’s ID and value. The visualization uses D3 v4 to build the SVG line and circles, while Bootstrap provides layout styling for the chart and info panel. The interaction relies on D3’s `mouseover` event and `transition` methods to update the box’s visibility and text content dynamically.

Sep 3, 2016
Loading thumbnail…

Reusable scatter plot

This reusable scatter plot displays 200 randomly generated data points using D3.js v4, with interactive buttons that trigger animated transitions. The visualization initially renders normally distributed points as semi-transparent blue circles, while the "Change Data" button regenerates the dataset and smoothly transitions the circles to new positions with updated axes. The "Change Color" button toggles the circle fill between blue and red using D3's transition and ease functions. The example demonstrates reusable chart patterns with SVG rendering, including linear scales, axis generators, and data-binding techniques.

Aug 12, 2016
Loading thumbnail…

Circle Gradient I

Circle Gradient I shows a single large circle centered on a dark background, filled with a smooth radial gradient that transitions through nine color stops from blue at the center to red at the edge. The piece is rendered as a standalone SVG using the native `<radialGradient>` definition and a `<circle>` element, with the gradient’s center and focal points both set to 50%. The color sequence is manually specified in the SVG’s `<defs>`, creating a vivid spectrum that mimics a data-driven color scale, though no external dataset is used in the visible code.

Jul 22, 2016
Loading thumbnail…

Circle Gradient II

A single circle is centered on a blank SVG canvas, its fill defined by a radial gradient that transitions through three color stops. The gradient’s stops are mapped to a linear scale with a domain from -1 to 1, using the color range [#d73027, #e0e0e0, #4575b4]. This creates a smooth transition from red to light gray to blue. The example uses D3 v4’s `d3.scaleLinear` to map the domain values to the color range, and the SVG `radialGradient` definition to apply the gradient to the circle’s fill.

Jul 22, 2016
Loading thumbnail…

Force-Directed Network Graph

This force-directed network graph visualizes a subset of the Gnutella peer-to-peer file sharing network from August 2002, using D3.js to simulate physical forces that position nodes and links. Nodes are grouped into roughly ten color-coded clusters based on proximity, revealing community structure within the partial dataset of a few hundred connections. The graph uses SVG rendering with white-stroked nodes and semi-transparent gray links to depict relationships, sourced from Stanford SNAP data and adapted from Mike Bostock’s force-directed example.

Jul 22, 2016
Loading thumbnail…

NVD3 Line with View Finder Chart - data from CSV file

The chart uses the NVD3 library's line-with-view-finder model to display five daily time series from a CSV file, with a main line chart on top and a smaller brushed viewfinder below to zoom and pan the date range. The data, parsed from daily_data.csv with d3.v3, renders as smooth multi-series lines in SVG with hover interactions and animated transitions between states.

Jul 22, 2016
Loading thumbnail…

D3.js: Animating Stacked-to-Grouped Bars

This example demonstrates an interactive bar chart that smoothly transitions between stacked and grouped layouts, with a single click on the chart toggling between the two modes. It uses D3.js v3 to render the chart as an SVG, animating the bars' positions and sizes via `transition` and custom attribute tweens. The data is generated in-browser with a `bumpLayer` function, and hovering a bar shows a tooltip listing the three series values using Underscore.js templates and jQuery for DOM manipulation. A legend with clickable series boxes lets viewers enable or disable individual series, updating the chart and the number of enabled series accordingly.

Jan 20, 2016