TDD Bushing Demo

100%

TDD Bushing Demo

✓ Published0🌍 Public

Last edited Sep 8, 2016

Created on Sep 8, 2016

This demo shows an interactive time-series area chart with a brushing tool to select date ranges. It renders an SVG area with a gradient fill, using D3 v3’s `d3.svg.brush` and `d3.time.scale` to filter data points. The code is structured with a reusable chart module and a separate data manager that loads CSV data, while tests using Jasmine verify the chart’s rendering and API getters/setters.

AI-generated description

Gist to serve as template for future TDD D3 blocks

forked from <a href='http://bl.ocks.org/Golodhros/'>Golodhros</a>'s block: <a href='http://bl.ocks.org/Golodhros/dfe7c0c8be07a461e6ba'>TDD D3 Template</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Brush() & Filter()

This example demonstrates interactive brushing and filtering on a time-series area chart of stock data. The visualization renders a blue filled area with overlaid circles representing daily values, plus a red dashed line marking the average. Using D3 v5, the chart employs `d3.area()`, `d3.scaleTime()`, and `d3.axisBottom()` for SVG rendering, while mouseover tooltips display date and value details. A brush component filters data points, highlighting selected circles in green while dimming others, with CSV data loaded via `d3.csv()`. The animation and interaction rely on D3’s selection and transition APIs.

BBrightPeace

74% match

Loading thumbnail…

Customization of bush handler

This example shows an interactive scatterplot of 800 random data points, where a brush control selects a range along the x-axis and highlights the corresponding circles in red. The brush’s resize handles are customized with triangular SVG paths, generated by a `triangleData` function that computes relative path coordinates for the `d` attribute, using D3 v3’s `d3.svg.brush`, `d3.scale.linear`, and `d3.svg.axis`. The static SVG rendering relies on a fixed viewport with margins and translucent styling for the brush extent and selected circles.

11Cr18Ni9

73% match

Loading thumbnail…

Brushing

This example demonstrates brushing on a scatterplot of borehole data, plotting depth against time. Users drag a horizontal brush across the chart to zoom the x-axis into a selected date range, with circles and the axis smoothly transitioning over one second. The visualization uses D3 v4 APIs including `d3.brushX`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.transition` to update the view, while the data is loaded as CSV from an external URL. SVG rendering animates the filtered result.

SShane Carey

73% match

Loading thumbnail…

Brush() & Filter()

This visualization demonstrates brush-style filtering interactions on a time-series line chart, using an area chart to display stock prices from June to August 2010. The chart includes a red dashed average line and colored area fills, with data points rendered as circles that respond to mouseover tooltip events. The visualization uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for coordinate mapping, and d3.axisBottom/d3.axisLeft for axes. The code relies on D3 v5’s selection, area, and curveMonotoneX APIs to construct the SVG-based animated chart, while red/green selection states are applied to the points.

11andrey3

72% match

Loading thumbnail…

Area Chart with Brushing

This example presents an area chart of monthly price data from January 2000 through March 2010, rendered as an SVG with a main focus chart and a smaller context panel beneath it. The visualization demonstrates linked brushing: users can select a range on the context panel with a brush, which zooms the focus chart to that time period. The code uses d3’s scaleTime, scaleLinear, area, and brushX APIs, with axes generated by axisBottom and axisLeft. The interactive brushing triggers a zoom by re-computing the x-domain and redrawing the focus area and axis.

BBrightPeace

72% match

Loading thumbnail…

Brush for data visualisation

A reusable D3 chart combines a main scatterplot with a brush for subsetting data. The visualization uses JSON input to configure axes, margins, and colors, and displays tooltips on hover. Built with D3 v3, it renders SVG with an optional Canvas-based PNG export, allowing users to download the current view as either format.

11Cr18Ni9

72% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to add interactive brushing to a D3 visualization. It displays a single circle in an SVG element that changes color based on user selection: the circle turns green when it falls within the brushed area and pink otherwise. The code uses d3.brush to create the selection region and listens to brush events to trigger the updateChart function. Rendering occurs via SVG, with d3 v7 handling both the circle and brush interactions.

Aa15923647

71% match

Loading thumbnail…

TDD D3 Template

This template demonstrates a test-driven approach to building a reusable D3 bar chart, showing the frequency of letters in a dataset. The chart is rendered as an SVG, with bars and axes built through a modular `graphs.chart` module. It uses `d3.scale.ordinal` with `rangeRoundBands` for the x-axis and `d3.scale.linear` for the y-axis, with `d3.svg.axis` for tick marks. A separate `dataManager` module handles loading TSV data via `d3.tsv`, dispatching `dataReady`, `dataLoading`, and `dataError` events, while Jasmine specs verify chart structure and getter/setter methods.

GGolodhros

71% match