Platform
Resources
Pricing
Sign in
Get started
Berkeley MIDS W209 Information Visualization Course
Workspace
Fork
Published
By
John Alexis Guerra Gómez
Edited
Apr 13, 2021
2 forks
8 stars
1
Insert cell
md
`# JSON vs CSV`
Insert cell
data
=
Array
.
from
(
{
length
:
300
}
)
.
map
(
(
d
,
i
)
=>
(
{
name
:
`John ${
i
}`
,
age
:
Math
.
floor
(
Math
.
random
(
)
*
120
)
,
height
:
Math
.
random
(
)
*
2.0
}
)
)
Insert cell
csvText
=
`name,age,height
John,15,6.6
Andy,24,6.2
Drew,17,6`
Insert cell
dataCSV
=
d3
.
csvParse
(
csvText
,
d3
.
autoType
)
Insert cell
jsonText
=
`[{"name":"John","age":15,"height":6.6},{"name":"Andy","age":24,"height":6.2},{"name":"Drew","age":17,"height":6}]`
Insert cell
dataJSON
=
JSON
.
parse
(
jsonText
)
Insert cell
data3
=
d3
.
json
(
"https://gist.githubusercontent.com/john-guerra/a1bc0af51d76e620574ce47b1e8243e9/raw/9f0116d984f834cefa950d5e7c3cdaa4e431d59a/dataJSON.json"
)
Insert cell
FileAttachment
(
"data.csv"
)
.
text
(
)
.
then
(
res
=>
d3
.
csvParse
(
res
,
d3
.
autoType
)
)
Insert cell
d3
.
csvParse
(
await
FileAttachment
(
"data.csv"
)
.
text
(
)
,
d3
.
autoType
)
Insert cell
viewof
myFile
=
html
`<input type="file"/>`
Insert cell
Files
.
text
(
myFile
)
Insert cell
viewof
alsoMyFile
=
fileInput
(
{
initialValue
:
FileAttachment
(
"data.csv"
)
}
)
Insert cell
d3
.
csvParse
(
await
alsoMyFile
.
text
(
)
)
Insert cell
d3
=
require
(
"d3@6"
)
Insert cell
import
{
fileInput
}
from
"@mbostock/file-input-with-initial-value"
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
data
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
csvText
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dataCSV
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
jsonText
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dataJSON
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
data3
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
myFile
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
alsoMyFile
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
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML