{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black")
//scales
var xScale = d3.scaleLinear().domain([-5,5]).range([0,600])
var yScale = d3.scaleLinear().domain([0,25]).range([300,0])
return svg.node()
}
{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black")
//scales
var xScale = d3.scaleLinear().domain([-5,5]).range([30,570])
var yScale = d3.scaleLinear().domain([25,0]).range([30,270])
//xAxis
var xAxis = svg.append("g").attr("transform","translate(0,270)")
d3.axisBottom(xScale)(xAxis)
//yAxis
var yAxis = svg.append("g").attr("transform","translate(300,0)")
d3.axisLeft(yScale)(yAxis)
return svg.node()
}
{
var data = []
for(var i = -5;i <= 5;i = i + .01){
data.push(i)
}
return data
}
data = {
var data = []
for(var i = -5;i <= 5;i = i + .01){
data.push({x:i,y:i*i})
}
return data
}
{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black")
//scales
var xScale = d3.scaleLinear().domain([-5,5]).range([30,570])
var yScale = d3.scaleLinear().domain([25,0]).range([30,270])
//xAxis
var xAxis = svg.append("g").attr("transform","translate(0,270)")
d3.axisBottom(xScale)(xAxis)
//yAxis
var yAxis = svg.append("g").attr("transform","translate(300,0)")
d3.axisLeft(yScale)(yAxis)
//path
var pathData = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y))(data)
svg.append("path").attr("stroke","black").attr("fill","none").attr("d",pathData)
return svg.node()
}
data2 = {
var data = []
for(var i = -10;i <= 10;i = i + .01){
data.push({x:i,y:sin(i)})
}
return data
}
{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black")
//scales
var xScale = d3.scaleLinear().domain([-10,10]).range([30,570])
var yScale = d3.scaleLinear().domain([-1,1]).range([270,30])
//xAxis
var xAxis = svg.append("g").attr("transform","translate(0,150)")
d3.axisBottom(xScale)(xAxis)
//yAxis
var yAxis = svg.append("g").attr("transform","translate(300,0)")
d3.axisLeft(yScale)(yAxis)
//path
var pathData = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y))(data2)
svg.append("path").attr("stroke","black").attr("fill","none").attr("d",pathData)
return svg.node()
}
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.
