Published
Edited
Aug 8, 2019
md`# Parabola`
d3 = require("d3@5")
chart = {
const [width, height] = [900, 550];
const svg = d3.select(DOM.svg(width+50, height+50))
.style("padding", "10px")
//.style("font", "10px sans-serif")
//.style("box-sizing", "border-box");
var fn = x => Math.pow(x, 2);
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var xAxis = d3.axisBottom()
.scale(x);
var yAxis = d3.axisLeft()
.scale(y);
var line = d3.line()
.x(function (d) {return x(d.x);})
.y(function (d) {return y(d.y);})
.curve(d3.curveMonotoneX);
var data = d3.range(-10, 11).map(function (d) {
return {x:d, y:fn(d)};
});
x.domain(d3.extent(data, function (d) {return d.x;}));
y.domain([0, 10]);
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(' + width/2 + ',0)')
.call(yAxis);
svg.append('path')
.datum(data)
.attr('d', line);
return svg.node();
}
html
`<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
path {
fill: none;
stroke: teal;
}
.axis path, line {
stroke: #aaa;
shape-rendering: crispEdges;
}
.axis text {
fill: #aaa;
font-size: 11px;
}
svg {
background-color: #fff;
}
</style>`
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.
