Notebooks 2.0 is here.
Read the preview announcement
Platform
Resources
Pricing
Sign in
Get started
Christofer Bengtsson
Workspace
Fork
Published
By
Christofer Bengtsson
Edited
Feb 28, 2018
1 fork
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
bar
.
brush
=
{
consume
:
[
{
context
:
'range-example'
,
// We'll later use this reference in the brush-range defintion
style
:
{
inactive
:
{
opacity
:
0.3
}
}
}
]
}
Insert cell
Insert cell
components
.
push
(
{
key
:
'rangeY'
,
// We'll use this reference when setting up our interaction events
type
:
'brush-range'
,
settings
:
{
brush
:
'range-example'
,
direction
:
'vertical'
,
scale
:
's'
,
target
:
{
component
:
'y-axis'
// Use the y-axis as our target and interaction trigger
}
,
bubbles
:
{
align
:
'end'
}
}
}
)
Insert cell
Insert cell
components
.
push
(
{
key
:
'rangeX'
,
// We'll use this reference when setting up our interaction events
type
:
'brush-range'
,
settings
:
{
brush
:
'range-example'
,
direction
:
'horizontal'
,
scale
:
'p'
,
target
:
{
component
:
'x-axis'
// Use the x-axis as our target and interaction trigger
}
,
bubbles
:
{
align
:
'start'
}
}
}
)
Insert cell
Insert cell
function
mouseEventToRangeEvent
(
e
)
{
return
{
center
:
{
x
:
e
.
clientX
,
y
:
e
.
clientY
}
,
deltaX
:
e
.
movementX
,
deltaY
:
e
.
movementY
}
;
}
Insert cell
{
let
rangeRef
=
'rangeY'
;
settings
.
interactions
=
[
{
type
:
'native'
,
events
:
{
mousedown
:
function
(
e
)
{
// Use Alt-key + click to reset the brush
if
(
e
.
altKey
)
{
this
.
chart
.
brush
(
'range-example'
)
.
end
(
)
;
this
.
chart
.
component
(
'rangeY'
)
.
emit
(
'rangeClear'
)
;
this
.
chart
.
component
(
'rangeX'
)
.
emit
(
'rangeClear'
)
;
}
const
overComp
=
this
.
chart
.
componentsFromPoint
(
{
x
:
e
.
clientX
,
y
:
e
.
clientY
}
)
[
0
]
;
rangeRef
=
overComp
&&
overComp
.
key
===
'y-axis'
?
'rangeY'
:
'rangeX'
;
// Fetch the range component instance and trigger the start event
this
.
chart
.
component
(
rangeRef
)
.
emit
(
'rangeStart'
,
mouseEventToRangeEvent
(
e
)
)
;
}
,
mousemove
:
function
(
e
)
{
this
.
chart
.
component
(
rangeRef
)
.
emit
(
'rangeMove'
,
mouseEventToRangeEvent
(
e
)
)
;
}
,
mouseup
:
function
(
e
)
{
this
.
chart
.
component
(
rangeRef
)
.
emit
(
'rangeEnd'
,
mouseEventToRangeEvent
(
e
)
)
;
}
}
}
]
}
Insert cell
Insert cell
Insert cell
Insert cell
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Try it for free
Learn more
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
picasso
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
data
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
scales
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bar
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
components
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
settings
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
mouseEventToRangeEvent
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
chartInstance
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML