Notebooks 2.0 is here.
Read the preview announcement
Platform
Resources
Pricing
Sign in
Get started
Yichun Fan
Workspace
Fork
Published
Big data and visualization
By
Yichun Fan
Edited
Apr 3, 2019
1 star
Big data and visualization
Setting up a Node Server
Week 12 - Interaction and Animation: D3 Transitions, Behaviors, and Brushing
Week 11 - Intro to D3.js: Mapping Data with D3
Week 10 - Intro to D3.js: Making a Chart
Parsing API Responses
Week 4a - Exploring Data with Vega-Lite
Week 3 - Data Management with Zebras
Week 2a - Introduction to Javascript Part2
Week 1b - Introduction to Javascript
Week 1a - Introduction to HTML and Javascript
Week 0 - Introduction to Observable
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3
=
require
(
"d3@5"
)
Insert cell
Insert cell
exData
=
[
40
,
90
,
30
,
60
]
;
Insert cell
Insert cell
//select based on elements/ ID/ classes
{
d3
.
selectAll
(
"rect"
)
;
// select all SVG rect elements within my DOM, doesn't matter if the rectangle will be yet have not been established yet.
d3
.
select
(
"#boston"
)
;
// select an element where id='boston'
//"#" indicates we are selecting based on ID
d3
.
selectAll
(
".bar"
)
;
// select all elements with the class 'bar'
//select based on the class
}
Insert cell
Insert cell
Insert cell
d3
.
selectAll
(
'svg'
)
.
data
(
exData
)
.
attr
(
"height"
,
d
=>
{
return
d
;
}
)
;
Insert cell
Insert cell
{
// Width and height of the SVG object
let
w
=
150
;
let
h
=
175
;
// Initialize SVG object
const
svg
=
d3
.
select
(
DOM
.
svg
(
w
,
h
)
)
;
//Make an SVG container (the SVG Coordinate Space)
//var svgContainer = d3.select("body").append("svg")
//.attr("width", 200)
//.attr("height", 200);
// Select and generate rectangle elements
svg
.
selectAll
(
"rect"
)
//insert an empty rectangle
.
data
(
exData
)
//4 rectangles
.
enter
(
)
//update the rectangles
.
append
(
"rect"
)
.
attr
(
"x"
,
30
)
.
attr
(
"y"
,
0
)
.
attr
(
"width"
,
20
)
.
attr
(
"height"
,
100
)
.
attr
(
"fill"
,
"steelblue"
)
;
return
svg
.
node
(
)
;
}
Insert cell
Insert cell
Insert cell
Insert cell
{
// Width and height of the SVG object
let
w
=
150
;
let
h
=
175
;
// Initialize SVG object
const
svg
=
d3
.
select
(
DOM
.
svg
(
w
,
h
)
)
;
// Select and generate rectangle elements
svg
.
selectAll
(
"rect"
)
.
data
(
exData
)
.
enter
(
)
.
append
(
"rect"
)
.
attr
(
"x"
,
(
d
,
i
)
=>
(
i
*
25
+
30
)
)
// Set x coordinate of rectangle to index of data value (i)*25.
// Add 30 to account for our left margin.
.
attr
(
"y"
,
0
)
.
attr
(
"width"
,
20
)
.
attr
(
"height"
,
d
=>
d
)
// Set height of rectangle to data value
.
attr
(
"fill"
,
"steelblue"
)
;
return
svg
.
node
(
)
;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// Width and height of the SVG object
let
w
=
150
;
let
h
=
175
;
// Initialize SVG object
const
svg
=
d3
.
select
(
DOM
.
svg
(
w
,
h
)
)
;
// Select and generate rectangle elements
svg
.
selectAll
(
"rect"
)
.
data
(
exData
)
.
enter
(
)
.
append
(
"rect"
)
.
attr
(
"x"
,
(
d
,
i
)
=>
(
i
*
25
+
30
)
)
// Set x coordinate of rectangle to index of data value (i)*25.
// Add 30 to account for our left margin.
.
attr
(
"y"
,
d
=>
h
-
d
)
// Set y coordinate for each bar to height minus the data value
.
attr
(
"width"
,
20
)
.
attr
(
"height"
,
d
=>
d
)
// Set height of rectangle to data value
.
attr
(
"fill"
,
"steelblue"
)
;
return
svg
.
node
(
)
;
}
Insert cell
Insert cell
// Your code here
Insert cell
Insert cell
{
// Width and height of the SVG object
let
w
=
150
;
let
h
=
175
;
// Initialize SVG object
const
svg
=
d3
.
select
(
DOM
.
svg
(
w
,
h
)
)
;
//modify this svg object
// Select and generate rectangle elements
svg
.
selectAll
(
"rect"
)
.
data
(
exData
)
.
enter
(
)
.
append
(
"rect"
)
.
attr
(
"x"
,
(
d
,
i
)
=>
(
i
*
25
+
30
)
)
// Set x coordinate of rectangle to index of data value (i)*25.
// Add 30 to account for our left margin.
.
attr
(
"y"
,
d
=>
h
-
d
)
// Set y coordinate for each bar to height minus the data value
.
attr
(
"width"
,
20
)
.
attr
(
"height"
,
d
=>
d
)
// Set height of rectangle to data value
.
attr
(
"fill"
,
"steelblue"
)
;
// Create y-axis
svg
.
append
(
"line"
)
.
attr
(
"x1"
,
30
)
.
attr
(
"y1"
,
75
)
.
attr
(
"x2"
,
30
)
.
attr
(
"y2"
,
175
)
.
attr
(
"stroke-width"
,
2
)
.
attr
(
"stroke"
,
"black"
)
;
// Create x-axis
svg
.
append
(
"line"
)
.
attr
(
"x1"
,
30
)
.
attr
(
"y1"
,
175
)
.
attr
(
"x2"
,
130
)
.
attr
(
"y2"
,
175
)
.
attr
(
"stroke-width"
,
2
)
.
attr
(
"stroke"
,
"black"
)
;
// Add a Label
// y-axis label
svg
.
append
(
"text"
)
.
attr
(
"class"
,
"y label"
)
.
attr
(
"text-anchor"
,
"end"
)
.
text
(
"No. of Rats"
)
.
attr
(
"transform"
,
"translate(20, 20) rotate(-90)"
)
;
return
svg
.
node
(
)
;
}
Insert cell
html
`
<style>
text {
font-family: "Open Sans", sans-serif;
font-size: 12px;
}
</style>
`
Insert cell
Insert cell
// New dataset with More Numbers
ratData
=
[
40
,
70
,
60
,
20
,
40
,
100
,
60
]
;
Insert cell
Insert cell
{
// Get length of dataset
let
arrayLength
=
ratData
.
length
;
// length of dataset
let
maxValue
=
d3
.
max
(
ratData
,
d
=>
+
d
)
;
// get max value of our dataset
let
x_axisLength
=
100
;
// length of x-axis in our layout
let
y_axisLength
=
100
;
// length of y-axis in our layout
return
{
arrayLength
,
maxValue
}
;
}
Insert cell
Insert cell
{
// Get length of dataset
let
arrayLength
=
ratData
.
length
;
// length of dataset
let
maxValue
=
d3
.
max
(
ratData
,
d
=>
+
d
)
;
// get max value of our dataset
let
x_axisLength
=
100
;
// length of x-axis in our layout
let
y_axisLength
=
100
;
// length of y-axis in our layout
let
yScale
=
d3
.
scaleLinear
(
)
.
domain
(
[
0
,
maxValue
]
)
.
range
(
[
0
,
y_axisLength
]
)
return
yScale
(
100
)
;
// As the domain and range have the same value in this example, yScale outputs a 1-to-1 relationship.
}
Insert cell
Insert cell
{
let
yScale
=
d3
.
scaleLinear
(
)
.
domain
(
[
0
,
d3
.
max
(
ratData
,
d
=>
+
d
)
]
)
.
range
(
[
margin
.
bottom
,
height
-
margin
.
top
]
)
;
return
yScale
(
0
)
;
// 0 should correspond with the lowest pixel of y-axis (i.e. the bottom margin)
}
Insert cell
Insert cell
// We can put all of our margins into a single object and reference them using their keys
margin
=
(
{
top
:
15
,
right
:
10
,
bottom
:
25
,
left
:
30
}
)
Insert cell
Insert cell
Insert cell
Insert cell
{
// Initialize SVG object (using our pre-defined width and height)
const
svg
=
d3
.
select
(
DOM
.
svg
(
width
,
height
)
)
;
// Get length of dataset
let
arrayLength
=
ratData
.
length
;
// length of dataset
let
maxValue
=
d3
.
max
(
ratData
,
d
=>
+
d
)
;
// get max value of our dataset
let
x_axisLength
=
(
width
-
margin
.
right
-
margin
.
left
)
;
// length of x-axis in our layout
let
y_axisLength
=
(
height
-
margin
.
top
-
margin
.
bottom
)
;
// length of y-axis in our layout
// Use a scale for the height of the visualization
const
yScale
=
d3
.
scaleLinear
(
)
.
domain
(
[
0
,
d3
.
max
(
ratData
,
d
=>
+
d
)
]
)
.
range
(
[
margin
.
bottom
,
height
-
margin
.
top
]
)
// Select and generate rectangle elements
svg
.
selectAll
(
"rect"
)
.
data
(
ratData
)
.
enter
(
)
.
append
(
"rect"
)
.
attr
(
"x"
,
(
d
,
i
)
=>
(
i
*
(
x_axisLength
/
arrayLength
)
+
margin
.
left
)
)
// Set x coordinate of each bar to index of data value (i) times dynamically calculated bar width.
// Add left margin to account for our left margin.
.
attr
(
"y"
,
d
=>
(
height
-
yScale
(
d
)
)
)
// Set y coordinate using yScale.
.
attr
(
"width"
,
(
x_axisLength
/
arrayLength
)
-
1
)
// Set bar width using length of array, with 1px gap between each bar.
.
attr
(
"height"
,
d
=>
yScale
(
d
)
-
yScale
(
0
)
)
// Set height of rectangle to data value, accounting for bottom margin.
.
attr
(
"fill"
,
"steelblue"
)
;
// Create y-axis, beginning at the top margin and ending at the bottom margin
svg
.
append
(
"line"
)
.
attr
(
"x1"
,
margin
.
left
)
.
attr
(
"y1"
,
margin
.
top
)
.
attr
(
"x2"
,
margin
.
left
)
.
attr
(
"y2"
,
height
-
margin
.
bottom
)
.
attr
(
"stroke-width"
,
2
)
.
attr
(
"stroke"
,
"black"
)
;
// Create x-axis beginning at the left margin, and ending at the right margin
svg
.
append
(
"line"
)
.
attr
(
"x1"
,
margin
.
left
)
.
attr
(
"y1"
,
height
-
margin
.
bottom
)
.
attr
(
"x2"
,
width
-
margin
.
right
)
.
attr
(
"y2"
,
height
-
margin
.
bottom
)
.
attr
(
"stroke-width"
,
2
)
.
attr
(
"stroke"
,
"black"
)
;
// Add a Label
// y-axis label
svg
.
append
(
"text"
)
.
attr
(
"class"
,
"y label"
)
.
attr
(
"text-anchor"
,
"end"
)
.
text
(
"No. of Rats"
)
.
attr
(
"transform"
,
"translate(20, 20) rotate(-90)"
)
;
return
svg
.
node
(
)
;
}
Insert cell
Insert cell
// Your code here
Insert cell
Insert cell
Insert cell
bosData
=
d3
.
csv
(
"https://gist.githubusercontent.com/jdev42092/46071bf3284265c37ea07d6328ef7a3a/raw/cc7bfc53f3853437749906ccf7d2cac49c43c9a2/neigh_311.csv"
,
(
{
neighborhood
,
num_311
}
)
=>
(
{
neighborhood
:
neighborhood
,
calls
:
+
num_311
}
)
)
Insert cell
Insert cell
Insert cell
{
// Initialize SVG object (using our pre-defined width and height)
const
svg
=
d3
.
select
(
DOM
.
svg
(
width
,
height
)
)
;
// Get length of dataset
let
arrayLength
=
bosData
.
length
;
// length of dataset
let
maxValue
=
d3
.
max
(
bosData
,
d
=>
d
.
calls
)
;
// get max value of our dataset
let
x_axisLength
=
(
width
-
margin
.
right
-
margin
.
left
)
;
// length of x-axis in our layout
let
y_axisLength
=
(
height
-
margin
.
top
-
margin
.
bottom
)
;
// length of y-axis in our layout
// Use a scale for the height of the visualization
const
yScale
=
d3
.
scaleLinear
(
)
.
domain
(
[
0
,
d3
.
max
(
bosData
,
d
=>
d
.
calls
)
]
)
.
range
(
[
margin
.
bottom
,
height
-
margin
.
top
]
)
// Select and generate rectangle elements
svg
.
selectAll
(
"rect"
)
.
data
(
bosData
)
.
enter
(
)
.
append
(
"rect"
)
.
attr
(
"x"
,
(
d
,
i
)
=>
(
i
*
(
x_axisLength
/
arrayLength
)
+
margin
.
left
)
)
// Set x coordinate of each bar to index of data value (i) times dynamically calculated bar width.
// Add left margin to account for our left margin.
.
attr
(
"y"
,
d
=>
(
height
-
yScale
(
d
.
calls
)
)
)
// Set y coordinate using yScale.
.
attr
(
"width"
,
(
x_axisLength
/
arrayLength
)
-
1
)
// Set bar width using length of array, with 1px gap between each bar.
.
attr
(
"height"
,
d
=>
yScale
(
d
.
calls
)
-
yScale
(
0
)
)
// Set height of rectangle to data value, accounting for bottom margin.
.
attr
(
"fill"
,
"steelblue"
)
;
// Create y-axis, beginning at the top margin and ending at the bottom margin
svg
.
append
(
"line"
)
.
attr
(
"x1"
,
margin
.
left
)
.
attr
(
"y1"
,
margin
.
top
)
.
attr
(
"x2"
,
margin
.
left
)
.
attr
(
"y2"
,
height
-
margin
.
bottom
)
.
attr
(
"stroke-width"
,
2
)
.
attr
(
"stroke"
,
"black"
)
;
// Create x-axis beginning at the left margin, and ending at the right margin
svg
.
append
(
"line"
)
.
attr
(
"x1"
,
margin
.
left
)
.
attr
(
"y1"
,
height
-
margin
.
bottom
)
.
attr
(
"x2"
,
width
-
margin
.
right
)
.
attr
(
"y2"
,
height
-
margin
.
bottom
)
.
attr
(
"stroke-width"
,
2
)
.
attr
(
"stroke"
,
"black"
)
;
// Add a Label
// y-axis label
svg
.
append
(
"text"
)
.
attr
(
"class"
,
"y label"
)
.
attr
(
"text-anchor"
,
"end"
)
.
text
(
"No. of 311 Calls"
)
.
attr
(
"transform"
,
"translate(20, 20) rotate(-90)"
)
;
return
svg
.
node
(
)
;
}
Insert cell
Insert cell
tooltip
=
d3
.
select
(
"body"
)
.
append
(
"div"
)
.
style
(
"position"
,
"absolute"
)
.
style
(
"font-family"
,
"'Open Sans', sans-serif"
)
.
style
(
"font-size"
,
"12px"
)
.
style
(
"z-index"
,
"10"
)
.
style
(
"visibility"
,
"hidden"
)
;
Insert cell
Insert cell
{
// Initialize SVG object (using our pre-defined width and height)
const
svg
=
d3
.
select
(
DOM
.
svg
(
width
,
height
)
)
;
// Get length of dataset
let
arrayLength
=
bosData
.
length
;
// length of dataset
let
maxValue
=
d3
.
max
(
bosData
,
d
=>
d
.
calls
)
;
// get max value of our dataset
let
x_axisLength
=
(
width
-
margin
.
right
-
margin
.
left
)
;
// length of x-axis in our layout
let
y_axisLength
=
(
height
-
margin
.
top
-
margin
.
bottom
)
;
// length of y-axis in our layout
// Use a scale for the height of the visualization
const
yScale
=
d3
.
scaleLinear
(
)
.
domain
(
[
0
,
d3
.
max
(
bosData
,
d
=>
d
.
calls
)
]
)
.
range
(
[
margin
.
bottom
,
height
-
margin
.
top
]
)
// Call tooltip
tooltip
// Select and generate rectangle elements
svg
.
selectAll
(
"rect"
)
.
data
(
bosData
)
.
enter
(
)
.
append
(
"rect"
)
.
attr
(
"x"
,
(
d
,
i
)
=>
(
i
*
(
x_axisLength
/
arrayLength
)
+
margin
.
left
)
)
// Set x coordinate of each bar to index of data value (i) times dynamically calculated bar width.
// Add left margin to account for our left margin.
.
attr
(
"y"
,
d
=>
(
height
-
yScale
(
d
.
calls
)
)
)
// Set y coordinate using yScale.
.
attr
(
"width"
,
(
x_axisLength
/
arrayLength
)
-
1
)
// Set bar width using length of array, with 1px gap between each bar.
.
attr
(
"height"
,
d
=>
yScale
(
d
.
calls
)
-
yScale
(
0
)
)
// Set height of rectangle to data value, accounting for bottom margin.
.
attr
(
"fill"
,
"steelblue"
)
.
on
(
"mouseover"
,
d
=>
tooltip
.
style
(
"visibility"
,
"visible"
)
.
text
(
d
.
neighborhood
+
": "
+
d
.
calls
)
)
.
on
(
"mousemove"
,
d
=>
tooltip
.
style
(
"top"
,
(
d3
.
event
.
pageY
-
10
)
+
"px"
)
.
style
(
"left"
,
(
d3
.
event
.
pageX
+
10
)
+
"px"
)
.
text
(
d
.
neighborhood
+
": "
+
d
.
calls
)
)
.
on
(
"mouseout"
,
d
=>
tooltip
.
style
(
"visibility"
,
"hidden"
)
)
;
// Create y-axis, beginning at the top margin and ending at the bottom margin
svg
.
append
(
"line"
)
.
attr
(
"x1"
,
margin
.
left
)
.
attr
(
"y1"
,
margin
.
top
)
.
attr
(
"x2"
,
margin
.
left
)
.
attr
(
"y2"
,
height
-
margin
.
bottom
)
.
attr
(
"stroke-width"
,
2
)
.
attr
(
"stroke"
,
"black"
)
;
// Create x-axis beginning at the left margin, and ending at the right margin
svg
.
append
(
"line"
)
.
attr
(
"x1"
,
margin
.
left
)
.
attr
(
"y1"
,
height
-
margin
.
bottom
)
.
attr
(
"x2"
,
width
-
margin
.
right
)
.
attr
(
"y2"
,
height
-
margin
.
bottom
)
.
attr
(
"stroke-width"
,
2
)
.
attr
(
"stroke"
,
"black"
)
;
// Add a Label
// y-axis label
svg
.
append
(
"text"
)
.
attr
(
"class"
,
"y label"
)
.
attr
(
"text-anchor"
,
"end"
)
.
text
(
"No. of 311 Calls"
)
.
attr
(
"transform"
,
"translate(20, 20) rotate(-90)"
)
;
return
svg
.
node
(
)
;
}
Insert cell
Insert cell
// Your code here
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
Edit
Add comment
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
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
exData
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
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
Edit
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
Edit
Add comment
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
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
ratData
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
margin
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
height
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
width
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bosData
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
tooltip
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML