Smoothing curves in SVG

[djbpitt]

@nmcdowell00 There’s a promising tutorial about drawing cubic Bezier curves (that is, smoothing line graphs) in SVG at https://gielberkers.com/drawing-a-smooth-bezier-line-through-several-points/. Official (from the W3C spec) documentation for the SVG instruction that does the drawing is at https://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathDataCubicBezierCommands, which explains what the different parts of the instruction do. The tutorial offers advice about how to determine the values to specify. I’ve never done any of this myself, so I don’t have any advice based on personal experience, and I’m eager to see how it turns out. But if you get stuck, don’t hesitate to open and issue and tag me and we can look it over together.

[nmcdowell00]

Hi, The picture above shows a section of the code that can be used to draw a basic cubic Bezier line. I will explain what I want to do(but don't know how to do). I want to replace the highlighted values above with automatically generated data points from the data. Is it possible to link SVG with excel(or some other spreadsheet software)? Basically my main question is how to generate data points automatically that can be interpreted by SVG. I have started exploring python as a means to solve my problem but I have never used python before so I do not know where to start. Any help would be appreciated.

[djbpitt]

@nmcdowell00 I’m glad to see that you’re following up on. this!

Inspired by the visualizations in your presentation, I've been exploring using XSLT to create Bézier curves in XSLT at https://github.com/djbpitt/xstuff/tree/master/bezier, and I’ve learned a lot in the process that I didn’t know before—including how Bézier curves work, which is fiendishly clever. The tutorial that I’m writing there isn't finished, but I've tried to provide code examples of each step in the process, and if you'd like to try to apply the method to your data, I would be eager to see the results. At the moment there is no function to import (I write at the beginning as if there is, but I'm not there yet), but the code does work, and packaging it as an importable function will be just the last step.

My tutorial uses random data; for your project you would use XSLT to extract the points you want to graph from your documents, but instead of plotting a traditional line graph, with straight line segments (using a <polyline>), you would use a <path> element to plot a spline made up of Bézier curves. To understand. how. to describe a spline in SVG I’d suggest starting with the Beckers and Embry tutorials linked at the bottom of my tutorial, which is where I learned about the underlying math, as well as the link to the relevant section of the SVG spec, which explains the SVG syntax for Bézier curves in <path> elements. The code snippet that you provide is copied from the spec, so it looks as if you’re already familiar with that. The <polyline> element that you’ve highlighted describes one of the handles; the <path> element. a few lines below is the actual spline. It uses the shorthand S notation; I used only C (and, in places, Q; see part 9 of my tutorial for that detail).

If you'd like to Zoom about this once you’ve had a chance to look through the tutorial and references, let me know and I’d be happy to do that. I'd suggest starting not by constructing the SVG, but by using XSLT to extract the points you need to plot from your documents. That will let you verify that you’re getting the data points you want, and once you’ve nailed that, you can refocus on rendering the information in SVG. You don’t need to (= shouldn't) use Excel or other spreadsheet software, and you don’t need to (= shouldn't) use Python; you want to use XSLT to extract the information you need from your documents to plot the points. If you aren’t sure how to extract the data with XSLT, we can start by Zooming about that, if you’d like.

[nmcdowell00]

Hi,

Very impressive tutorial! I also found the animations of how cubic Bezier curves work to be extremely fascinating. Do you have anytime tomorrow to go over how to extract data with XSLT? I do not understand how I would go about extracting the data from the txt document that MALLET generates. I should be free anytime after 1:00pm.

Thank you, Nate

On Wed, Apr 22, 2020 at 12:23 AM djbpitt notifications@github.com wrote:

@nmcdowell00 https://github.com/nmcdowell00 I’m glad to see that you’re following up on. this!

Inspired by the visualizations in your presentation, I've been exploring using XSLT to create Bézier curves in XSLT at https://github.com/djbpitt/xstuff/tree/master/bezier, and I’ve learned a lot in the process that I didn’t know before—including how Bézier curves work, which is fiendishly clever. The tutorial that I’m writing there isn't finished, but I've tried to provide code examples of each step in the process, and if you'd like to try to apply the method to your data, I would be eager to see the results. At the moment there is no function to import (I write at the beginning as if there is, but I'm not there yet), but the code does work, and packaging it as an importable function will be just the last step.

My tutorial uses random data; for your project you would use XSLT to extract the points you want to graph from your documents, but instead of plotting a traditional line graph, with straight line segments (using a

), you would use a element to plot a spline made up of Bézier curves. To understand. how. to describe a spline in SVG I’d suggest starting with the Beckers and Embry tutorials linked at the bottom of my tutorial, which is where I learned about the underlying math, as well as the link to the relevant section of the SVG spec, which explains the SVG syntax for Bézier curves in elements. The code snippet that you provide is copied from the spec, so it looks as if you’re already familiar with that. The element that you’ve highlighted describes one of the handles; the element. a few lines below is the actual spline. It uses the shorthand S notation; I used only C (and, in places, Q; see part 9 of my tutorial for that detail). If you'd like to Zoom about this once you’ve had a chance to look through the tutorial and references, let me know and I’d be happy to do that. I'd suggest starting not by constructing the SVG, but by using XSLT to extract the points you need to plot from your documents. That will let you verify that you’re getting the data points you want, and once you’ve nailed that, you can refocus on rendering the information in SVG. You don’t need to (= shouldn't) use Excel or other spreadsheet software, and you don’t need to (= shouldn't) use Python; you want to use XSLT to extract the information you need from your documents to plot the points. If you aren’t sure how to extract the data with XSLT, we can start by Zooming about that, if you’d like. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub , or unsubscribe .

[djbpitt]

@nmcdowell00 2:00 pm on Thu, Apr 23 in our regular DH Zoom classroom?

[nmcdowell00]

Sounds good!

On Wed, Apr 22, 2020 at 10:02 PM djbpitt notifications@github.com wrote:

@nmcdowell00 https://github.com/nmcdowell00 2:00 pm on Thu, Apr 23 in our regular DH Zoom classroom?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/charlietaylor98/vangogh-gang/issues/17#issuecomment-618132636, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOKSO5DPP3PGARZ2LKLCO4TRN6OR7ANCNFSM4MLAV35Q .