Published
Edited
May 25, 2018
1 fork
Importers
2 stars
chart = {
// Experimenting with a configuration dictionary
let get = (key, d) => { if(key in config) return config[key]; return d; };
var x = get( "x" , (d) => d.x );
var y = get( "y" , (d) => d.y );
var xerrh = get( "xerrh" , (d) => d.xerrh );
var yerrh = get( "yerrh" , (d) => d.yerrh );
var xerrl = get( "xerrl" , (d) => d.xerrl );
var yerrl = get( "yerrl" , (d) => d.yerrl );
var margin = get( "margin" , { top: 20, right: 30, bottom: 30, left: 40 } );
var height = get( "height" , 400 );
var xscale = get( "xscale" , d3.scaleLinear().domain(d3.extent(d3.merge(data),d => x(d))).nice() );
var yscale = get( "yscale" , d3.scaleLinear().domain(d3.extent(d3.merge(data),d => y(d))).nice() );
var xAxis = get( "xAxis" , d3.axisBottom() );
var yAxis = get( "yAxis" , d3.axisLeft() );
var styles = get( "styles" ,
d3.scaleOrdinal()
.domain(d3.range(data.length))
.range(
d3.cross( d3.symbols , d3.schemeCategory10 ,
(s,c)=>{return {fill:c, stroke:c, symbol:d3.symbol().type(s)};}
))
);
var edgesize = get( "edgesize" , 5 );
xscale.range([margin.left, width - margin.right]);
yscale.range([height - margin.bottom, margin.top]);
xAxis.scale(xscale);
yAxis.scale(yscale);
const svg = d3.select(DOM.svg(width, height));
svg.append("g").call(xAxis)
.attr("transform", `translate(0,${height - margin.bottom})`);
svg.append("g").call(yAxis)
.attr("transform", `translate(${margin.left},0)`);
const xerrorbar = (d) => {
const e = edgesize;
let xc = xscale(x(d));
let low = xscale(x(d)-xerrl(d)) - xc;
let high = xscale(x(d)+xerrh(d)) - xc;
let caps = `M ${low} ${-e} l 0 ${2*e} M ${high} ${-e} l 0 ${2*e}`;
return `M ${low} 0 L ${high} 0 ${caps}`;
}
const yerrorbar = (d) => {
const e = edgesize;
let yc = yscale(y(d));
let low = yscale(y(d)-yerrl(d)) - yc;
let high = yscale(y(d)+yerrh(d)) - yc;
let caps = `M ${-e} ${low} l ${2*e} 0 M ${-e} ${high} l ${2*e} 0`;
return `M 0 ${low} L 0 ${high} ${caps}`;
}
const graph = function (d,i) {
let style = styles(i);
let g = d3.select(this);
let addpaths = (cls) =>
g.selectAll(`path.${cls}`).data(d).enter()
.append("path").classed(cls, true)
.attr('transform', d => `translate(${xscale(x(d))},${yscale(y(d))})`);
addpaths("marker").attr("d", style.symbol()).attr("fill", style.fill );
addpaths("xerr").attr("d", xerrorbar).attr("stroke", style.stroke);
addpaths("yerr").attr("d", yerrorbar).attr("stroke", style.stroke);
};
svg.append("g")
.selectAll("g").data(data).enter().append("g")
.each(graph);
return svg.node();
}
data = {
while(true) {
let data = [Math.sin, Math.cos, x => x * x /50 - 1 , x => x/4 - 0.5 ].map((f) =>
d3.range(30).map((j) =>
new Object(
{ xx : 4*Math.PI*j/100, y : f(4*Math.PI*j/100) + Math.random()/5
, xerrl : 0.05 + Math.random()/10, xerrh : 0.05 + Math.random()/10
, yerrl : 0.05 + Math.random()/10, yerrh : 0.05 + Math.random()/10
}
)
)
)
yield Promises.delay(1000, data);
}
}
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.
