BAvlino

@BAvlino·5 public vizzes

SimpleToolTip

A simple D3.js example demonstrates a basic tooltip for a single SVG circle. The visualization shows a 300-by-300 pixel canvas with one aliceblue circle at its center. Hovering over the circle reveals a text label that follows the mouse cursor, positioning itself near the pointer using the element's `mousemove` event. The tooltip is implemented with a div element whose visibility is toggled by `mouseover` and `mouseout` handlers, and its position updates via `event.pageX` and `event.pageY`. The code uses D3's selection and event-handling APIs to attach these interactions to the circle. This example illustrates the basic pattern for adding interactive hover information to a simple geometric shape.

Mar 23, 2018

Loading thumbnail…

MouseOverMyColorIS

Twenty semi-transparent circles scatter randomly across an SVG canvas, each filled with a distinct color from D3’s `d3.scale.category20` palette. Hovering over any circle triggers a native browser tooltip via an appended SVG `<title>` element, displaying that circle’s specific color name. The example uses D3’s data join to bind randomly generated coordinates and radii, then appends circles and their tooltips. It demonstrates adding interactive title elements directly within D3 selections, with no additional libraries beyond the core `d3.js` script.

Mar 23, 2018

Loading thumbnail…

Bar Chart with Manipulation

This bar chart displays the frequency of letters in the English language, using a horizontal layout with letters on the y-axis and percentages on the x-axis. Built with D3 v3, it renders as SVG and loads data from a TSV file via `d3.tsv`, with axes created using `d3.svg.axis`. The chart demonstrates interactive manipulation: bars change color to red on mouseover and revert to their original category colors from `d3.scale.category20c` on mouseout, with tooltips showing the corresponding letter.

Mar 23, 2018

Loading thumbnail…

MouseOverPrice

A line chart shows Apple's daily closing stock price over roughly a year, with an orange circle and a dollar-value label that follow the mouse cursor. The visualization uses D3 v3 with an SVG renderer, parsing tab-separated date and price data from a TSV file. A bisector finds the nearest data point to the mouse position, and a transparent overlay rectangle captures mouse events to update the focused position and text label.

Mar 23, 2018

Loading thumbnail…

MouseOver

This example demonstrates interactive mouse events on an SVG scatterplot built with D3 v3. Circles change color to orange and grow in radius on mouseover, then revert on mouseout. Clicking the background converts pixel coordinates to data values using inverted linear scales, adds a new point to the dataset, and appends a new circle. The code uses `d3.scale.linear`, `d3.svg.axis`, and `.on("mouseover")` handlers to manage the visual feedback and dynamic data updates.

Mar 23, 2018