Published
Edited
Sep 30, 2022
2 forks
Importers
unc = {
let g = new gla_chart(unempl, {width: "100%", type: "date", yformat: ".0f", yvlkp: ["London", "Rest UK"], high: true})
return g.draw()
}
popc = {
let g = new gla_chart(pop, {width: 1200, type: "date", yformat: ".2s", high: true, leglab : "legend"})
return g.draw()
}
diy = {
// let data = unempl
let g = new gla_chart(unempl, opts)
return g.draw()
}
opts = {
return {cwidth: 1200, cheight: 900, type: "date", yformat: ".0f", ytickformat : ".1f", high: true}
}
/*{
let g = new gla_chart(green, {charttype: "bar", type: "character", stack: true})
return g.draw()
}*/
// function
function gla_chart(rawdata, {
cwidth = 1200,
cheight = 600,
type = "date",
yformat = ".0f",
ytickformat,
yvlkp,
parseTimeString,
charttype = "line",
leglab = "labels",
stack= false,
high = false,
dv = "",
silent_x = false,
forcecols,
asvg
} = {}) {
// Need to implement this somehow!
// https://stackoverflow.com/questions/16265123/resize-svg-when-window-is-resized-in-d3-js
if(dv === "none") {
console.log("unset div")
} else {
console.log(`We have a div: ${dv}`)
let eld = document.getElementById(dv)
if(eld != undefined) {
console.log(eld.offsetWidth);
cwidth = eld.offsetWidth;
cheight = eld.offsetHeight - 200;
}
}
if(ytickformat === undefined) ytickformat = yformat
let self = this;
window.xx = self
let convb = yvlkp !== undefined
console.log(`Chart type: ${type}`)
let dc = new data_control(rawdata, {
convert_b : convb,
xtype: type,
parseTimeString: parseTimeString,
yvlkp : yvlkp,
is_stack: stack
})
if(charttype == "bar") leglab = "legend"
let data = dc.data
//let bsvg = d3.create("svg").attr("name", "bsvg")
//console.log(d3.select(this.parentNode).style("width"))
if(asvg === undefined) {
asvg = d3.create("svg")
.attr("width", cwidth)
.attr("height", cheight)
.attr("viewBox", [0, 0, cwidth, cheight])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
} else {
console.log("Using asvg as svg")
//asvg = gg
}
// console.log(dc)
let y1 = new y_axis(data, asvg, {
// svg: asvg,
width: cwidth,
height: cheight,
marginLeft: 25,
tickFormat: ytickformat,
marginRight: 0,
yDomain : (stack ? dc.ext : undefined)
});
y1.draw()
let ll = new legend_labels(data, asvg, {
highlight: high,
yScale: y1.yScale,
width: cwidth,
height: cheight,
leglab : leglab,
categories: dc.datacols,
forceCols: forcecols
})
ll.draw()
// console.log(`L ${ll.lbwidth} | ${y1.txtlft}` )
let x1;
if(charttype == "bar") {
x1 = new x_axis(data, asvg, {
type: (silent_x ? "date" : "character"),
width: cwidth,
height: cheight,
marginLeft: (y1.txtlft + 10),
marginRight: ll.lbwidth,
showXgrid : false,
add_silent: silent_x,
xType : (silent_x ? d3.scaleUtc : d3.scaleBand)
});
} else if (charttype == "line") {
x1 = new x_axis(data, asvg, {
// type,
width: cwidth,
height: cheight,
marginLeft: (y1.txtlft + 10),
marginRight: ll.lbwidth
});
}
//let type = scale
x1.draw()
//y1.setHeight(cheight - x1.lheight - ll.lbheight + 30) // this isn't right. it should be setting the marginbottom, not the height
y1.setMarginRight(ll.lbwidth)
y1.setMarginTop(ll.lbheight)
y1.setMarginBottom(x1.lheight)
y1.draw()
ll.syncXY(x1, y1)
ll.draw()
if (charttype == "line") {
let lns = new lines(data, asvg, {
xScale: x1.xScale,
yScale: y1.yScale,
color: ll.color
})
lns.draw()
let tt = new tooltip(data, asvg, {
xaxtype : type,
yformat : yformat,
width: cwidth,
height: cheight,
marginLeft: (y1.txtlft + 10),
marginRight: ll.lbwidth,
xScale: x1.xScale,
yScale: y1.yScale,
color: ll.color
})
tt.draw()
} else {
self.x1 = x1
self.dc = dc;
let brs = new bars(data, asvg, {
xScale: (silent_x ? x1.silentScale : x1.xScale),
yScale: y1.yScale,
color: ll.color,
datacols: dc.datacols,
xvar : (silent_x ? "dtid" : "xvar")
})
brs.draw()
}
self.draw = function() {
//console.log(`H: ${height} | W: ${width} | CH: ${cheight} | CW: {cwidth}`)
return asvg.node()
}
}
import {y_axis} from "@joeheywood/y-axis"
import {x_axis_dt, x_axis_char, x_axis} from "@joeheywood/x-axis"
import {legend_labels} from "@joeheywood/legend-or-labels"
import {unempl, socact_d, ftexcl_d, rgnuc, green, data_control, pop} from "@joeheywood/data-controller"
import {get_bbox} from "@joeheywood/utils"
import {lines} from "@joeheywood/lines"
import {bars} from "@joeheywood/bar-charts"
import {tooltip} from "@joeheywood/tooltips"
// import {rgn_d} from "@joeheywood/benefits-pages"
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.
