94 lines
3.2 KiB
Plaintext
94 lines
3.2 KiB
Plaintext
Machine Learning Cheat Sheet (for scikit-learn)
|
|
===============================================
|
|
|
|
This document is intended to explain how to edit
|
|
the machine learning cheat sheet, originally created
|
|
by Andreas Mueller:
|
|
|
|
(https://peekaboo-vision.blogspot.de/2013/01/machine-learning-cheat-sheet-for-scikit.html)
|
|
|
|
The image is made interactive using an imagemap, and uses the jQuery Map Highlight plugin module
|
|
by David Lynch (https://davidlynch.org/projects/maphilight/docs/) to highlight
|
|
the different items on the image upon mouseover.
|
|
|
|
Modifying the map on the docs is currently a little bit tedious,
|
|
so I'll try to make it as simple as possible.
|
|
|
|
1. Editing the layout of the map and its paths.
|
|
------------------------------------------------
|
|
|
|
Use a Graphics editor like Inkscape Vector Graphics Editor
|
|
to open the ml_map.svg file, in this folder. From there
|
|
you can move objects around, etc. as you need.
|
|
|
|
Save when done, and make sure to export a .PNG file
|
|
to replace the old-outdated ml_map.png, as that file
|
|
is used as a background image.
|
|
|
|
2. Accessing the paths of the SVG file and exporting them.
|
|
----------------------------------------------------------
|
|
|
|
Use an image manipulation package like GIMP Image Editor to open
|
|
the ml_map.svg file, in this folder. With GIMP, make sure
|
|
to select 'Import paths'.
|
|
|
|
Once the image has been opened, you can see all imported paths on the paths tab.
|
|
You can edit these or create new paths. In GIMP, right-clicking one of the
|
|
paths and choosing: Path Tool will allow you to see the paths on
|
|
the image. The paths will be exported later and will be used to
|
|
make the click able regions on our image map.
|
|
|
|
3. Export paths as SVG files
|
|
----------------------------
|
|
|
|
After you've edited a path or created a new one, right click it on
|
|
the paths menu and choose 'Export Path..'. This way we extract just
|
|
that path on its own as 'new_area.svg' for example.
|
|
|
|
4. Edit the SVG file
|
|
---------------------
|
|
Using a script made by David Lynch, we will convert the svg files into
|
|
html maps. To do this, open the svg file in question in any text editor.
|
|
Make sure that the 'width' and 'height' are not in 'in' or 'px', i.e
|
|
"100" is OK, but "100px" or "1.25in" are not.
|
|
|
|
Then wrap the <path> tags in <g> and </g> tags.
|
|
Then the file is ready for the script.
|
|
|
|
5. From SVG to HTML map
|
|
-----------------------
|
|
|
|
Use the provided svg2imagemap.py script on your edited svg file:
|
|
|
|
$ python svg2imagemap.py new_area.svg
|
|
|
|
where new_area.svg is our file.
|
|
|
|
6. Add the new map to the main html file
|
|
------------------------------------------
|
|
|
|
Copy the code from the newly created 'new_area.html'
|
|
file. Open the ml_map.html file.
|
|
|
|
Add the <area href=....... ></area> that you copied
|
|
after the last </area> tag in the ml_map.html file.
|
|
|
|
Add the link address to 'href' and a tooltip to
|
|
'title' within your <area ...> tag.
|
|
|
|
If you wish to add the green and blue hover effect
|
|
to the area, add
|
|
data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"66FF66","fillOpacity":0.4}'
|
|
|
|
to your area tag, as done in the other <area..> tags above.
|
|
|
|
Save the file, and you're done.
|
|
|
|
-----------------------------------------------------
|
|
|
|
I'll take some time to make some scripts to automate this process
|
|
a bit more at some point, as it is not difficult to do,
|
|
but tedious.
|
|
|
|
-Jaques Grobler
|