Recipes — Time Series Brush — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/recipes/time-series-brush

Time Series with Brush

Recipe

semioticreact

A multi-series time series chart with a brush minimap for zooming into a date range. Uses Semiotic's MinimapChart which renders a main chart and an overview minimap with d3-brush for selecting a date range.

Preview

Customization

What	Where	How
Line colors	`colorScheme`	Pass an array of color strings
Curve interpolation	`curve`	Use "monotoneX", "step", "basis", etc.
Date formatting	`xFormat`	Pass a formatter function for the x-axis
Minimap height	`minimap.height`	Change the height value (default: 60)
Initial zoom	`brushExtent`	Pass an initial `[startDate, endDate]` for controlled brushing

How It Works

MinimapChart renders two coordinated StreamXYFrames: a main chart and a smaller overview below it. The overview has a d3-brush overlay that controls the xExtent of the main chart. Drag the brush to zoom into a date range, or drag the brush edges to resize the selection.

The minimap prop configures the overview chart's height, margins, and styling. Use brushExtent and onBrush for controlled brush state.

Line Chart — simpler line chart
Interaction — brush and interaction patterns

Source Code

Abbreviated for readability — data arrays and steps are truncated. See the full runnable source in docs/src/examples/recipes/.

JSX

1 import React from "react"
2 import { MinimapChart } from "semiotic"
3 
4 function formatDate(d) {
5  const date = new Date(d)
6  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
7  return `${months[date.getMonth()]} ${date.getDate()}`
8 }
9 
10 export default function TimeSeriesBrush({ data, width = 700, height = 350 }) {
11  return (
12  <MinimapChart
13  data={data}
14  width={width}
15  height={height}
16  xAccessor="date"
17  yAccessor="value"
18  lineBy="series"
19  colorBy="series"
20  colorScheme={["#6366f1", "#22c55e", "#f59e0b"]}
21  curve="monotoneX"
22  lineWidth={2}
23  enableHover={true}
24  xFormat={formatDate}
25  margin={{ left: 60, top: 10, bottom: 40, right: 20 }}
26  minimap={{
27  height: 60,
28  margin: { left: 60, top: 0, bottom: 20, right: 20 },
29  }}
30  tooltip={{
31  title: "series",
32  fields: [
33  { field: "date", label: "Date", format: formatDate },
34  { field: "value", label: "Value" }
35  ]
36  }}
37  />
38  )
39 }
40 
41 // Usage with flat data:
42 // const data = [
43 // { date: 1704067200000, value: 100, series: "A", color: "#6366f1" },
44 // { date: 1704153600000, value: 102, series: "A", color: "#6366f1" },
45 // ...
46 // ]
47 // <TimeSeriesBrush data={data} width={700} height={350} />