Published
Edited
Apr 13, 2021
2 forks
8 stars
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.
Learn more