Notebooks 2.0 is here.
Public
Edited
Jun 12, 2021
{
const svg = d3.create("svg")
.attr("width", "1000")
.attr("height", "400")
.style("background", "#303030")
.style("color", "#fff");
const x = d3.scaleLinear()
.domain([1, 1000])
.range([0, 800]);
const y = d3.scaleLinear()
.domain([1, 200])
.range([150, 0]);
// axis in d3v4
const xAxisInV4 = svg.append("g")
.attr("transform", "translate(50, 175)")
.call(d3v4.axisBottom(x));
const yAxisInV4 = svg.append("g")
.attr("transform", "translate(50, 25)")
.call(d3v4.axisLeft(y));
// axis in d3v5
const xAxisInV5 = svg.append("g")
.attr("transform", "translate(50, 375)")
.call(d3v5.axisBottom(x));
const yAxisInV5 = svg.append("g")
.attr("transform", "translate(50, 225)")
.call(d3v5.axisLeft(y));
// uncomment the following code to change the axis color in v4
// -----------------------------------------------------------
// xAxisInV4.selectAll("path, line").attr("stroke", "#fff");
// xAxisInV4.selectAll("text").attr("fill", "#fff");
// yAxisInV4.selectAll("path, line").attr("stroke", "#fff");
// yAxisInV4.selectAll("text").attr("fill", "#fff");
// -----------------------------------------------------------
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.
