The avatar for @ic-dataviz
ic-dataviz
Published
Edited
Sep 12, 2021
1 star
5
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
untyped = Object.assign(d3.csvParse(await FileAttachment("diamonds-2.csv").text()))
Insert cell
Insert cell
url = FileAttachment("diamonds-2.csv").url() //returns a newly created url object
Insert cell
untyped2= d3.csv(url)
Insert cell
Insert cell
Insert cell
typed =Object.assign(d3.csvParse(await FileAttachment("diamonds-2.csv").text(), d3.autoType))
Insert cell
typed2 = d3.csv(url, d3.autoType)
Insert cell
Insert cell
Insert cell
Insert cell
data = Object.assign(d3.csvParse(await FileAttachment("diamonds-2.csv").text(), ({cut, price}) => ({cut: cut, price: +price}))) //+price converts string "2" to number 2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sampleScale = {
const x = d3.scaleLinear();
x.domain([20, 80]);
x.range([0, 120]);
return x;
}
Insert cell
Insert cell
Insert cell
md``
Insert cell
sampleScale(50) //Try changing the parameter and check yourself
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
width
Insert cell
Insert cell
Insert cell
graphic
Insert cell
//These are the padding values
margin = ({top: 40, right: 0, bottom: 20, left: 40}) //top as 40px for placing graphTitle and y-axis Title, bottom as 20 for placing x-Axis and left as 40 for placing y-Axis along with their labels. Generally, right is 0 because we don't place any components there.
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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.
Learn more