VanBantam

@VanBantam·5 public vizzes

Simple tables in D3

This example shows how to build a simple HTML table from an array of movie data using D3 v3. It renders columns for title, year, length, budget, and rating, with right-aligned numeric formatting for budget and rating via `d3.format`. The code defines column configurations and uses `d3.select`, `append`, and `data().enter()` to generate table headers and rows, applying custom cell value functions for length conversion to minutes and seconds. It relies on the d3-jetpack helper library for the `ƒ` shorthand syntax.

Mar 4, 2017

Loading thumbnail…

Something a bit more visually appealing

This example displays the frequency of digits 0 through 9 in a fictional bank account balance as a bar chart. The visualization uses D3 v3 with SVG rendering, employing `d3.scale.ordinal` for the x-axis bands and `d3.scale.linear` for the y-axis heights. Two separate SVG canvases are created for navigation and main display areas, with hover effects that turn bars orange and a tooltip showing the digit and its frequency. The page also includes experimental text elements and styling that are not part of the final chart.

Mar 4, 2017

Loading thumbnail…

Something a bit more visually appealing

This visualization displays the frequency of digits 0 through 9 in Josh's bank account using a bar chart. The chart renders as two SVG canvases—one for navigation and one for the main display—created with D3 v3, using an ordinal xScale and linear yScale to map the dataset. Hovering over a rectangle turns it orange and reveals a tooltip with the digit’s value and frequency. The page includes styled text elements, such as a green title, and references blockbuilder.org as the source.

Mar 4, 2017

Loading thumbnail…

D3 button that shows and hides text in a div

This example demonstrates a toggle button that shows and hides three text elements in a web page. The D3.js library (version 3.5.5) handles the button’s click event, switching between “Click me” and “Reset” labels while toggling the `hidden` CSS class on each div via `d3.select` and `classed`. An SVG canvas is appended but remains empty. The interaction relies on a counter variable to alternate visibility states, with the text appearing or disappearing accordingly.

Mar 3, 2017

Loading thumbnail…

Something a bit more visually appealing

This example draws a static sports field visualization using D3 v3, rendering a green pitch with a white left section, a center circle, and a right-side penalty box as SVG rectangles and circles. It loads point data from a local `dots.txt` file, but the code does not yet bind that data to the SVG elements—instead, all shapes are positioned manually with fixed `attr` values. The visualization uses basic D3 selection and append methods, along with SVG styling, to construct the scene without any interactive or animated behavior.

Mar 3, 2017