Platform
Resources
Pricing
Sign in
Get started
Patrick M. Dudas
Workspace
Fork
Published
D3 in ObservableHQ
By
Patrick M. Dudas
Edited
Oct 12, 2020
3 stars
1
Insert cell
Insert cell
Insert cell
Insert cell
notebookVariable
=
10
Insert cell
Insert cell
hellostatement
=
{
var
firstPart
=
"hello"
// can change the value
const
secondPart
=
", world"
// constant, cannot be changed
return
firstPart
+
secondPart
}
Insert cell
hellostatement
Insert cell
Insert cell
intVariable
=
10
Insert cell
typeof
(
intVariable
)
Insert cell
floatVariable
=
3.14
Insert cell
typeof
(
floatVariable
)
Insert cell
stringVariable
=
"hello, everyone!"
Insert cell
typeof
(
stringVariable
)
Insert cell
booleanVariable
=
true
Insert cell
typeof
(
booleanVariable
)
Insert cell
listVariable
=
[
]
Insert cell
typeof
(
listVariable
)
Insert cell
Insert cell
Array
.
isArray
(
listVariable
)
Insert cell
Insert cell
dictionaryVariable
=
(
{
"color"
:
"red"
}
)
Insert cell
typeof
(
dictionaryVariable
)
Insert cell
Array
.
isArray
(
dictionaryVariable
)
Insert cell
Insert cell
{
var
insideDictionary
=
{
}
return
typeof
(
insideDictionary
)
}
Insert cell
Insert cell
{
var
value
=
1
;
if
(
1
)
{
value
=
2
;
}
else
{
value
=
0
;
}
return
value
}
Insert cell
{
var
value
=
1
;
if
(
1
)
{
value
=
2
;
}
else
{
value
=
0
;
}
return
value
}
Insert cell
{
var
value
=
1
;
if
(
0
)
{
value
=
2
;
}
else
{
value
=
0
;
}
return
value
}
Insert cell
{
var
value
=
1
;
if
(
0
)
{
value
=
2
;
}
else
if
(
false
)
{
value
=
3
;
}
else
{
value
=
0
;
}
return
value
}
Insert cell
{
var
numbers
=
[
]
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
numbers
.
push
(
i
)
}
return
numbers
}
Insert cell
setOfNumbers0to9
=
d3
.
range
(
10
)
Insert cell
{
var
numbers
=
[
]
for
(
var
i
=
0
;
i
<
setOfNumbers0to9
.
length
;
i
++
)
{
numbers
.
push
(
setOfNumbers0to9
[
i
]
*
1
)
}
return
numbers
}
Insert cell
{
var
dictionaryOfValues
=
{
}
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
dictionaryOfValues
[
"index_"
+
i
]
=
i
}
return
dictionaryOfValues
}
Insert cell
{
var
dictionaryOfValues
=
{
}
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
dictionaryOfValues
[
"index_"
+
i
]
=
i
}
var
numbers
=
[
]
for
(
var
j
in
dictionaryOfValues
)
{
numbers
.
push
(
{
"value"
:
dictionaryOfValues
[
j
]
}
)
}
return
numbers
}
Insert cell
Insert cell
exampleData1
=
d3
.
range
(
7
)
.
map
(
function
(
d
,
i
)
{
return
{
"index"
:
i
,
"value"
:
d
,
"valueX10"
:
d
*
10
}
}
)
Insert cell
exampleData1
[
3
]
[
"valueX10"
]
Insert cell
Insert cell
exampleData2
=
d3
.
range
(
7
)
.
map
(
(
d
,
i
)
=>
(
{
"index"
:
i
,
"value"
:
d
,
"valueX10"
:
d
*
10
}
)
)
Insert cell
filteredData
=
exampleData2
.
filter
(
(
d
,
i
)
=>
(
(
d
.
value
+
1
)
%
2
)
)
Insert cell
Insert cell
startingCSV
=
FileAttachment
(
"co-est2019-alldata.csv"
)
.
text
(
)
Insert cell
parsedData
=
d3
.
csvParse
(
startingCSV
)
.
map
(
(
d
,
i
)
=>
(
{
state
:
d
.
STNAME
,
city
:
d
.
CTYNAME
,
pop
:
d
.
POPESTIMATE2019
}
)
)
Insert cell
md
`
AND == &&
OR == ||`
Insert cell
PA
=
parsedData
.
filter
(
(
d
,
i
)
=>
d
.
state
==
"Pennsylvania"
&&
d
.
city
!=
d
.
state
)
Insert cell
{
var
population
=
0
for
(
var
i
=
0
;
i
<
PA
.
length
;
i
++
)
{
population
=
population
+
parseInt
(
PA
[
i
]
.
pop
)
}
return
population
}
Insert cell
d3
=
require
(
'd3'
)
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
notebookVariable
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
hellostatement
Add comment
Copy import
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
intVariable
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
floatVariable
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
stringVariable
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
booleanVariable
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
listVariable
Add comment
Copy import
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
dictionaryVariable
Add comment
Copy import
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
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
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
setOfNumbers0to9
Add comment
Copy import
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
exampleData1
Add comment
Copy import
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
exampleData2
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
filteredData
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
startingCSV
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
parsedData
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
PA
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
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