I'm a Software Developer. Rails, React and Python enthusiast. Director of Technology at Epifany & Stealz. @d3 learner
chart = {
const margin = { top: marginValue, left: marginValue, right: marginValue, bottom: marginValue };
const usableWidth = width - margin.left - margin.right;
const usableHeight = height - margin.top - margin.bottom;
const xDomain = d3.extent(data, d => d.x);
const yDomain = d3.extent(data, d => d.y);
const x = d3.scaleLinear(xDomain, [0, usableWidth]);
const y = d3.scaleLinear(yDomain, [usableHeight, 0]);
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);
const line = d3.line()
.x(d => x(d.x))
.y(d => y(d.y));
const svg = d3.select(DOM.svg(width, height))
.attr('style', 'background: #fafafa'); // Added background to make margins visible
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
g.append('g')
.attr('transform', `translate(0, ${usableHeight})`) // A bottom axis must be placed after all usable height.
.call(xAxis);
g.append('g')
.call(yAxis);
g.append('path')
.attr('fill', 'none')
.attr('stroke', 'black')
.attr('d', line(data));
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.
