So, ctrl-f for d3 yielded no results in an article about SVG...
If you want to make impressive visualizations in very little code, I suggest you look at d3js. Here's the start of a series of fantastic tutorials done by Mike Bostock, founder of d3: https://bl.ocks.org/mbostock/3808218
I'd suggest you try that example out in http://blockbuilder.org/. I have no affiliation but it makes playing with d3 easy. After that, peruse the articles on the third example, find cool examples on bl.ocks.org, and replicate them.
A few things to note starting out(I've been learning d3 lately):
- v4 was a breaking change from v3, some v3 examples may not work out of the box but mostly will. If the >1MB bundle size of v3 scared you away, v4 is all es6 modules so you pay for what you use.
- the data model is enter-update-exit, its elegant but can take some time to understand.
- d3 looks procedural at first but is actually declarative if you follow the idioms.
- if your code keeps adding elements when it shouldn't, you probably messed up either a select/selectAll somewhere or forgot to add a class/id to the element when creating it.
- using typescript with d3 feels great but there are some gotchas; if you're interested, let me know and I'll write a blog post.
I do realize the slides are about interfaces with svg, so d3 may not be exactly what you want but damn if it isn't worth mentioning here.
If you want to make impressive visualizations in very little code, I suggest you look at d3js. Here's the start of a series of fantastic tutorials done by Mike Bostock, founder of d3: https://bl.ocks.org/mbostock/3808218
I'd suggest you try that example out in http://blockbuilder.org/. I have no affiliation but it makes playing with d3 easy. After that, peruse the articles on the third example, find cool examples on bl.ocks.org, and replicate them.
A few things to note starting out(I've been learning d3 lately):
- v4 was a breaking change from v3, some v3 examples may not work out of the box but mostly will. If the >1MB bundle size of v3 scared you away, v4 is all es6 modules so you pay for what you use.
- the data model is enter-update-exit, its elegant but can take some time to understand.
- d3 looks procedural at first but is actually declarative if you follow the idioms.
- if your code keeps adding elements when it shouldn't, you probably messed up either a select/selectAll somewhere or forgot to add a class/id to the element when creating it.
- using typescript with d3 feels great but there are some gotchas; if you're interested, let me know and I'll write a blog post.
I do realize the slides are about interfaces with svg, so d3 may not be exactly what you want but damn if it isn't worth mentioning here.