Develop Reference

Export SVG to PDF with groups/layers intact

I have an SVG object that looks like this:
Each of the inner <g> elements have <path>s in them.
I want to export this SVG to PDF so the groups translate to layers (OCGs), like this:
<ThroughCut>
<Path>
<Path>
<Path>
<Path>
<Graphics>
<Path>
<Path>
<Path>
<Path>
Yet any tool I have tried for this puts all objects in the same layer, and basically throws away information about groups.
Solutions in JavaScript or Python are preferred, but anything that executes from the command line on a UNIX machine will do.

I solved my problem as stated here, by following this PyMuPDF issue on Github.
Since I have control over the input SVG, I managed to solve the problem by parsing two SVGs to PDFs and combining them in separate layers of a new document. This is what I'm doing:
import fitz
from svglib.svglib import svg2rlg
from reportlab.graphics.renderPDF import drawToString
def svg_to_doc(path):
"""Using this function rather than `fitz`' `convertToPDF` because the latter
fills every shape with black for some reason.
"""
drawing = svg2rlg(path)
pdfbytes = drawToString(drawing)
return fitz.open("pdf", pdfbytes)
# Create a new blank document
doc = fitz.open()
page = doc.new_page()
# Create "Layer1" and "Layer2" OCGs and get their `xref`s
xref_1 = doc.add_ocg('Layer1', on=True)
xref_2 = doc.add_ocg('Layer2', on=True)
# Load "layer_1" and "layer_2" svgs and convert to pdf
doc_1 = svg_to_doc("my_layer_1.svg")
doc_2 = svg_to_doc("my_layer_2.svg")
# Set the `page` dimensions. Note: for me it makes sense to set the bounding
# box of the output to the same as `doc_1`, because I know `doc_1` contains
# `doc_2`. If that were not the case, I would set `bb` to be a new
# `fits.Rect` object that contained both `doc_1` and `doc_2`.
bb = doc_1[0].rect
page.setMediaBox(bb)
# Put the docs in their respective OCGs
page.show_pdf_page(bb, doc_1, 0, oc=xref_1)
page.show_pdf_page(bb, doc_2, 0, oc=xref_2)
# Save
doc.save("output.pdf")
If I load "output.pdf" in Adobe Acrobat the layers show. Curiously, the same is not the case for Adobe Illustrator (here they are simply "Clip Groups"). Regardless, I believe this solves the problem as stated above.
my_layer_1.svg
my_layer_2.svg

My other solution, although correct, does not produce a PDF that is compatible with Adobe standards (for example, Illustrator will not see the OCGs as legitimate layers—although strangely, Acrobat will).
In case one needs to produce a PDF that is compatible with Adobe standards, and will be loaded correctly in Illustrator, another option is to use the Illustrator scripting API.
Here's a script that one can use to convert a loaded SVG file into a PDF with the desired layer structure.
/** Convert an open file in Illustrator to PDF, after removing the first layer.
* Useful for converting SVGs into PDFs, where it is desired that the first level
* `<g>` elements are converted to layers/OCGs in the exported PDF.
*/
// Select export destination
const destFolder = Folder.selectDialog( 'Select folder for PDF files.', '~' );
// Get the PDF options to be used
const options = getOptions();
// The SVG should have a single `Layer1` top layer...
const doc = app.activeDocument;
if (doc.layers.length == 1) {
// ... remove it
removeFirstLayer(doc)
// Create a file pointer for export...
var targetFile = getTargetFile(doc.name, '.pdf', destFolder);
// ... and save save `doc` in the file pointer.
doc.saveAs(targetFile, options);
}
/* --------- */
/* Utilities */
/* --------- */
function getOptions() {
// Create PDFSaveOptions object
var pdfSaveOpts = new PDFSaveOptions();
// Set PDFSaveOptions properties (toggle these comment/uncomment)
pdfSaveOpts.acrobatLayers = true;
pdfSaveOpts.colorBars = true;
pdfSaveOpts.colorCompression = CompressionQuality.AUTOMATICJPEGHIGH;
pdfSaveOpts.compressArt = true; //default
pdfSaveOpts.embedICCProfile = true;
pdfSaveOpts.enablePlainText = true;
pdfSaveOpts.generateThumbnails = true; // default
pdfSaveOpts.optimization = true;
pdfSaveOpts.pageInformation = true;
// pdfSaveOpts.viewAfterSaving = true;
return pdfSaveOpts;
}
function removeFirstLayer(doc) {
// Get the layer to be removed
var firstLayer = doc.layers[0];
// Convert groups into new layers
for (var i=firstLayer.groupItems.length-1; i>=0; i--) {
var group = firstLayer.groupItems[i];
var newLayer = firstLayer.layers.add();
newLayer.name = group.name;
for (var j=group.pageItems.length-1; j>=0; j--)
group.pageItems[j].move(newLayer, ElementPlacement.PLACEATBEGINNING);
}
// Move new layers to the document and remove `firstLayer`
for (var i=firstLayer.layers.length-1; i>=0; i--)
firstLayer.layers[i].move(firstLayer.parent, ElementPlacement.PLACEATBEGINNING);
firstLayer.remove();
}
function getTargetFile(docName, ext, destFolder) {
var newName = "";
// Add extension is none exists
if (docName.indexOf('.') < 0)
newName = docName + ext;
else
newName += docName.substring(0, docName.lastIndexOf('.')) + ext;
// Create file pointer
var myFile = new File(destFolder + '/' + newName);
// Check that file permissions are granted
if (myFile.open("w"))
myFile.close();
else
throw new Error('Access is denied');
return myFile;
}
Put the script in a file that ends with .jsx, and place in inside your Scripts folder in Illustrator. Mine is located at /Applications/Adobe Illustrator 2021/Presets/en_US/Scripts/svgToPDF.jsx.
Restart Illustrator
Execute the script from the File > Scripts > svgToPDF menu item.
Drawbacks
Illustrator costs money.
You have to manually execute the SVG -> PDF conversion. Could be automated with AppleScript, but it's really not something you want to have running on a server.

HighChart with more than 50 data points breaks

I am trying to create a bubble chart using the JS HighChart in Angular2+. Whenever there are more than 50 data points (bubbles), the graph breaks. There are the correct number of bubbles in the correct positions (x,y plots) with all different colors but the sizes are all the same even though the z-values are all different. (I am outputing the z-values in a tooltip and the z-values are accurate)
This function is how I am passing in data to the high-chart configuration.
setSeries() {
this.objData = []
this.Data.forEach(element => {
var x= element['xVal'];
var y = element['yVal'];
var z = element['zVal'].toFixed(0);
var name = element['seriesName'].trim();
var newData =[{
x:x,
y:y,
z:+z,
}]
// SetSeriesData is how i am creating the obj to pass into series=[] in highchart configuration
if(i<50) //If I comment this condition, the graph breaks. Right now, the graph is working properly
this.setSeriesData(sumData, name, this.objData)
i++
})
this.options.series = this.objData;
this.generateChart();
}
This is my setSeriesData function.
setSeriesData(graphData: any, dataName: any, objData: any){
var obj = {};
obj['name'] = dataName;
obj['data'] = graphData;
obj['events'] = {click: function(e) {
//takes me to another link
}};
objData.push(obj)
}
In the above function, I configured the chart so that when you click the bubble, it takes you to another page. When the data points >50, this click functionality is not working either. In addition, the fillOpacity is not correct.
Just a few things to point out
1. I am using Angular 2+
2. The discovered issues are, fillOpacity, click, and size based on z-value.
3. It works perfectly when the data points are less than 50
How can I fix this?

Bokeh: CustomJS TextInput callback to adjust x axis range

I'm trying to make a web page that has a plot powered by an AjaxDataSource object. However, I'd like to have a TextInput widget that can be used to changed the xrange of this plot. Below is a snippet:
source = AjaxDataSource(data={"time": [], "temperature": [], "id": []},
data_url='http://localhost:6543/AJAXdata',
polling_interval=100,
mode='append')
livePlot = figure(x_axis_type="datetime",
x_range=[startDt, endDt],
y_range=(0,25),
y_axis_label='Temperature (Celsius)',
title="Sea Surface Temperature at 43.18, -70.43",
plot_width=800)
livePlot.line("time", "temperature", source=source)
....
updateStartJS = CustomJS(args=dict(xrange=livePlot.x_range), code="""
var startStr = cb_obj.value
alert(startStr)
var newStartMilliSeconds = Date.parse(startStr)
alert(newStartMilliSeconds)
alert(xrange)
alert(xrange.start)
xrange.start = newStartMilliSeconds
alert(xrange.start)
xrange.change.emit();
""")
startInput = TextInput(value=startDt.strftime(dateFmt), callback=updateStartJS)
See this file and the bokeh_ajax() function for the complete implementation: https://github.com/hhprogram/PyramidSite/blob/master/webgraphing/views/ajaxView.py
When I run it and change the corresponding 'Start' textInput box. The CustomJS runs accordingly and per the alerts I have seen that it is capturing the correct new data (assuming you put in an ISO Formatted date like YYYY-mm-dd) but it fails to update the plot axis range (ie the plot doesn't change at all). How would I implement this? (I want to maintain the plots to have underlying AjaxDataSources as well and not use bokeh server - I already know how to implement this type of axis change functionality if running a bokeh server.)

For anyone curious, found my issue. Think the main problem was I was not putting the widget which I wanted to use to control the plot xrange and the actual plot itself within the same layout object. Therefore, when I was calling components on the plot object it didn't include the widget. Then when I included the widget with the plot it worked. See below updates and the updated github repo:
(credit to this post for significantly helping me: Flask + Bokeh AjaxDataSource)
complete file: https://github.com/hhprogram/PyramidSite/blob/master/webgraphing/views/ajaxView.py)
code snippet:
source = AjaxDataSource(data={"time": [], "temperature": [], "id": []},
data_url='http://localhost:6543/AJAXdata',
polling_interval=100,
mode='append')
livePlot = figure(x_axis_type="datetime",
x_range=[startDt, endDt],
y_range=(0,25),
y_axis_label='Temperature (Celsius)',
title="Sea Surface Temperature at 43.18, -70.43",
plot_width=800)
livePlot.line("time", "temperature", source=source)
jsResources = INLINE.render_js()
cssResources = INLINE.render_css()
updateStartJS = CustomJS(args=dict(plotRange=livePlot.x_range), code="""
var newStart = Date.parse(cb_obj.value)
plotRange.start = newStart
plotRange.change.emit()
""")
updateEndJS = CustomJS(args=dict(plotRange=livePlot.x_range), code="""
var newEnd = Date.parse(cb_obj.value)
plotRange.end = newEnd
plotRange.change.emit()
""")
startInput = TextInput(value=startDt.strftime(dateFmt), title="Enter Date in format: YYYY-mm-dd")
startInput.js_on_change('value', updateStartJS)
endInput = TextInput(value=endDt.strftime(dateFmt), title="Enter Date in format: YYYY-mm-dd")
endInput.js_on_change('value', updateEndJS)
textWidgets = row(startInput, endInput)
# NOTE: this is important. Need to have the widgets and plot within same object that is the argument for components() method
layout = column(textWidgets, livePlot)
script, div = components(layout)

Use d3.js on a new window

Is it possible to use d3.js when opening new windows? For example, I am trying:
new_window = window.open("userpage.html");
new_window.document.write("<html><body>");
new_window.document.write("<table id=\"usertable\">");
new_window.document.write("</table>");
new_window.document.write("</body></html>");
table = d3.select("#usertable");
console.log(table);
var thead = table.append("thead");
var tbody = table.append("tbody");
var columns = ["dataset"];
thead.append("tr")
.selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(column) { console.log(column); return column; });
It doesn't work and the ouput of the first console.log is
[
Array[1]
0: null
length: 1
parentNode: HTMLHtmlElement
__proto__: Array[0]
]
I think 0: null is not good.

There are a few issues here:
I think you're opening the new window incorrectly - generally, you either open a URL with content, or you use "" as the URL and write your content into a blank window. Opening a URL like "usertable.html" and then writing <html><body> doesn't make sense. Finally, even with a blank window, you don't need to write <html><body> - the browser will generally provide these nodes by default.
Using d3.select is going to look, by default, in the current document. In order to access the body of the newly opened window, you'll need to pass in new_window.document - in fact, you'll need to pass in new_window.document.body, since you can't append anything to document without a HIERARCHY_REQUEST_ERROR.
I also don't think it's a good idea to mix D3 with document.write as you're doing here. D3 selects nodes in the DOM, and the way you have the code now, I don't think your table is actually a well-formed node until after you've tried to select it. D3 is perfectly good at inserting new DOM nodes - use it instead.
Putting all this together yields something like this:
var newWindow = window.open('');
var newWindowRoot = d3.select(newWindow.document.body);
// now do some writing with D3
var data = [
{ foo: "Foo 1", bar: "Bar 1" },
{ foo: "Foo 2", bar: "Bar 2" }
];
var table = newWindowRoot.append('table');
var rows = table.selectAll('tr')
.data(data);
rows.enter().append('tr');
var cells = rows.selectAll('td')
.data(function(d) { return d3.entries(d); });
cells.enter().append('td');
cells.text(function(d) { return d.value; });
Working example: http://jsfiddle.net/nrabinowitz/gQf7J/

How to highlight a jqplot bar chart with javascript

I have a data table which is parsed and is used to generate a bar chart with jqplot. I want to be able to highlight the specific bar when the table row is hovered.
Highlighting the way around is easy - just hooking to the jqplotDataHighlight and jqplotDataUnhighlight events. Any ideas how to do it the way around?

Nice that you managed to sort it out by yourself, Nickolay.
I would like to propose a different approach, though. One which doesn't involve changes to the highlighter script. My solution which you could adopt to your needs is presented in my answer to a similar problem.
Direct link to jsfiddle presenting my approach.

I kind of nailed it down.
I have extended the Highlighter object located in jqplot.highight.js so it would allow us to highlight and unhighlight from outside the library.
Sill this can be used for any highlight but the renderer should be detected. Which I didn't spent the time to do so.
$.jqplot.Highlighter.highlightBar = function(plot, serIndex, barId, barXVal, barYVal) {
//We just use the showTooltip. Simple!
var neighbor = {
seriesIndex: serIndex,
pointIndex: barId,
data: {
0: barXVal,
1: barYVal
},
gridData: plot.series[serIndex].gridData[barId],
points: plot.series[serIndex]._barPoints[barId]
}
showTooltip(plot, plot.series[serIndex], neighbor);
barHighlight(plot, serIndex, barId, neighbor.points);
}
function barHighlight(plot, sidx, pidx, points) {
var s = plot.series[sidx];
var canvas = plot.plugins.barRenderer.highlightCanvas;
canvas._ctx.clearRect(0,0,canvas._ctx.canvas.width, canvas._ctx.canvas.height);
s._highlightedPoint = pidx;
plot.plugins.barRenderer.highlightedSeriesIndex = sidx;
var opts = {fillStyle: s.highlightColors[pidx]};
s.renderer.shapeRenderer.draw(canvas._ctx, points, opts);
canvas = null;
}
function barUnhighlight(plot) {
var canvas = plot.plugins.barRenderer.highlightCanvas;
canvas._ctx.clearRect(0,0, canvas._ctx.canvas.width, canvas._ctx.canvas.height);
for (var i=0; i<plot.series.length; i++) {
plot.series[i]._highlightedPoint = null;
}
plot.plugins.barRenderer.highlightedSeriesIndex = null;
plot.target.trigger('jqplotDataUnhighlight');
canvas = null;
}
$.jqplot.Highlighter.clearHighlight = function (plot) {
barUnighlight(plot);
}