Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/Readme.md

Last active August 29, 2015 14:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timelyportfolio/b8c0706d498fa21b92d4 to your computer and use it in GitHub Desktop.
Save timelyportfolio/b8c0706d498fa21b92d4 to your computer and use it in GitHub Desktop.
Download ZIP
add interactivity to base R plots
Raw
Readme.md

One quick example of a workflow from base R plots to interactive SVG. An early pioneer in this is Duncan Temple Lang @duncantl with his XML and SVGAnnotation packages and his great book XML and Web Technologies for Data Sciences with R coauthored with Deborah Nolan. He demonstrates some examples with various base and grid plots here.

I think this is a very good example of amazing work just slightly ahead of its time. Now with d3, browser improvements, and javascript evolution, I think the time is right for this to progress and evolve into something powerful but expected.

There are infinite improvements that can be done to this example.

Raw
code.R
# for my friend Alex Bresler
# adding interactivity to base R
library(SVGAnnotation)
library(pipeR)
library(htmltools)
svgPlot(
# {} for closure to do multi-step plots
{
barplot(1:10) # also works with grid - lattice | ggplot2
}
) %>>%
getNodeSet("//x:svg","x") %>>%
( saveXML(.[[1]]) ) %>>%
HTML %>>%
html_print
svgPlot(
{
plot(mpg ~ wt, mtcars)
}
) -> doc
doc %>>%
# get the points in the plot
getNodeSet("//x:g/x:g[@clip-path='url(#clip1)']/x:path","x") %>>%
(
lapply(
1:length(.)
,function(pt){
addAttributes(
.[[pt]]
,"data-tooltip" = rownames(mtcars)[pt]
,"class" = "dataPoint"
)
}
)
)
doc %>>%
saveXML %>>%
HTML %>>%
(
tagList(
.
,tags$script(
"
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return '<strong>Model:</strong> <span style=\"color:red\">' + d3.select(this).attr(\"data-tooltip\") + '</span>';
})
d3.select('body').select('svg')
.call(tip);
d3.select('body').selectAll('.dataPoint')
.style('pointer-events','all')
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
" %>>% HTML
)
)
) %>>%
attachDependencies(
list(
htmlDependency(
name="d3"
,version = "3.4"
,src = c(href="http://d3js.org")
,script = "d3.v3.min.js"
)
,htmlDependency(
name="d3tip"
,version = "0.6.3"
# use timelyportfolio version since error d3caged
,src = c(href="http://timelyportfolio.github.io/rCharts_dimple/js")
,script = "d3.tip.v0.6.3.js"
)
)
) %>>%
html_print
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://timelyportfolio.github.io/rCharts_dimple/js/d3.tip.v0.6.3.js"></script>
</head>
<body>
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="432pt" height="432pt" viewBox="0 0 432 432" version="1.1">
<display xmlns:r="http://www.r-project.org" usr="1.35656,5.58044,9.46,34.84"><![CDATA[{
plot(mpg ~ wt, mtcars)
}
]]></display>
<defs>
<g>
<symbol overflow="visible" id="glyph0-0">
<path style="stroke:none;" d="M 6.292969 -1.054688 L 6.292969 0 L 0.378906 0 C 0.367188 -0.265625 0.410156 -0.519531 0.507813 -0.761719 C 0.65625 -1.164063 0.898438 -1.558594 1.230469 -1.953125 C 1.558594 -2.339844 2.035156 -2.792969 2.667969 -3.308594 C 3.636719 -4.101563 4.292969 -4.734375 4.636719 -5.203125 C 4.976563 -5.667969 5.148438 -6.105469 5.152344 -6.523438 C 5.148438 -6.957031 4.992188 -7.324219 4.683594 -7.625 C 4.371094 -7.921875 3.96875 -8.074219 3.46875 -8.074219 C 2.9375 -8.074219 2.511719 -7.914063 2.195313 -7.597656 C 1.878906 -7.277344 1.71875 -6.839844 1.714844 -6.28125 L 0.585938 -6.398438 C 0.664063 -7.238281 0.953125 -7.878906 1.457031 -8.320313 C 1.960938 -8.761719 2.640625 -8.980469 3.492188 -8.984375 C 4.347656 -8.980469 5.023438 -8.742188 5.527344 -8.269531 C 6.027344 -7.789063 6.28125 -7.199219 6.28125 -6.5 C 6.28125 -6.140625 6.207031 -5.789063 6.058594 -5.445313 C 5.910156 -5.09375 5.664063 -4.730469 5.328125 -4.351563 C 4.984375 -3.964844 4.421875 -3.441406 3.636719 -2.777344 C 2.976563 -2.222656 2.554688 -1.84375 2.367188 -1.648438 C 2.179688 -1.449219 2.023438 -1.253906 1.90625 -1.054688 Z M 6.292969 -1.054688 "/>
</symbol>
<symbol overflow="visible" id="glyph0-1">
<path style="stroke:none;" d="M 0.523438 -2.363281 L 1.625 -2.507813 C 1.746094 -1.882813 1.960938 -1.433594 2.265625 -1.160156 C 2.566406 -0.886719 2.9375 -0.75 3.375 -0.75 C 3.890625 -0.75 4.324219 -0.925781 4.683594 -1.285156 C 5.035156 -1.640625 5.214844 -2.085938 5.21875 -2.617188 C 5.214844 -3.121094 5.050781 -3.539063 4.722656 -3.867188 C 4.394531 -4.195313 3.976563 -4.359375 3.46875 -4.359375 C 3.257813 -4.359375 2.996094 -4.316406 2.691406 -4.234375 L 2.8125 -5.199219 C 2.882813 -5.1875 2.941406 -5.183594 2.992188 -5.1875 C 3.457031 -5.183594 3.878906 -5.308594 4.253906 -5.554688 C 4.628906 -5.796875 4.816406 -6.171875 4.816406 -6.683594 C 4.816406 -7.085938 4.679688 -7.417969 4.40625 -7.683594 C 4.132813 -7.945313 3.78125 -8.078125 3.351563 -8.082031 C 2.921875 -8.078125 2.5625 -7.945313 2.28125 -7.675781 C 1.992188 -7.40625 1.8125 -7.003906 1.734375 -6.46875 L 0.632813 -6.664063 C 0.765625 -7.398438 1.070313 -7.96875 1.550781 -8.375 C 2.023438 -8.777344 2.617188 -8.980469 3.328125 -8.984375 C 3.8125 -8.980469 4.261719 -8.875 4.675781 -8.667969 C 5.085938 -8.457031 5.398438 -8.171875 5.617188 -7.8125 C 5.832031 -7.445313 5.941406 -7.0625 5.945313 -6.660156 C 5.941406 -6.269531 5.835938 -5.917969 5.632813 -5.601563 C 5.421875 -5.28125 5.117188 -5.027344 4.710938 -4.847656 C 5.238281 -4.722656 5.648438 -4.46875 5.941406 -4.085938 C 6.234375 -3.695313 6.378906 -3.214844 6.382813 -2.644531 C 6.378906 -1.859375 6.09375 -1.199219 5.527344 -0.65625 C 4.957031 -0.113281 4.238281 0.15625 3.367188 0.160156 C 2.582031 0.15625 1.929688 -0.0742188 1.410156 -0.542969 C 0.890625 -1.007813 0.59375 -1.613281 0.523438 -2.363281 Z M 0.523438 -2.363281 "/>
</symbol>
<symbol overflow="visible" id="glyph0-2">
<path style="stroke:none;" d="M 4.039063 0 L 4.039063 -2.140625 L 0.160156 -2.140625 L 0.160156 -3.148438 L 4.242188 -8.949219 L 5.140625 -8.949219 L 5.140625 -3.148438 L 6.347656 -3.148438 L 6.347656 -2.140625 L 5.140625 -2.140625 L 5.140625 0 Z M 4.039063 -3.148438 L 4.039063 -7.183594 L 1.238281 -3.148438 Z M 4.039063 -3.148438 "/>
</symbol>
<symbol overflow="visible" id="glyph0-3">
<path style="stroke:none;" d="M 0.519531 -2.34375 L 1.671875 -2.441406 C 1.753906 -1.875 1.953125 -1.453125 2.265625 -1.171875 C 2.574219 -0.890625 2.949219 -0.75 3.394531 -0.75 C 3.917969 -0.75 4.367188 -0.949219 4.734375 -1.347656 C 5.101563 -1.746094 5.285156 -2.273438 5.285156 -2.9375 C 5.285156 -3.558594 5.109375 -4.054688 4.757813 -4.417969 C 4.40625 -4.777344 3.945313 -4.957031 3.375 -4.960938 C 3.019531 -4.957031 2.699219 -4.875 2.414063 -4.71875 C 2.128906 -4.554688 1.90625 -4.347656 1.746094 -4.09375 L 0.714844 -4.230469 L 1.582031 -8.824219 L 6.03125 -8.824219 L 6.03125 -7.777344 L 2.460938 -7.777344 L 1.976563 -5.371094 C 2.507813 -5.742188 3.074219 -5.929688 3.667969 -5.933594 C 4.449219 -5.929688 5.105469 -5.660156 5.644531 -5.121094 C 6.179688 -4.578125 6.449219 -3.882813 6.453125 -3.035156 C 6.449219 -2.222656 6.214844 -1.519531 5.742188 -0.933594 C 5.167969 -0.207031 4.382813 0.152344 3.394531 0.152344 C 2.574219 0.152344 1.910156 -0.0742188 1.398438 -0.53125 C 0.882813 -0.984375 0.589844 -1.589844 0.519531 -2.34375 Z M 0.519531 -2.34375 "/>
</symbol>
<symbol overflow="visible" id="glyph0-4">
<path style="stroke:none;" d="M 2.019531 0 L 0.0351563 -6.480469 L 1.171875 -6.480469 L 2.203125 -2.742188 L 2.585938 -1.347656 C 2.601563 -1.417969 2.714844 -1.863281 2.921875 -2.6875 L 3.953125 -6.480469 L 5.085938 -6.480469 L 6.054688 -2.722656 L 6.378906 -1.484375 L 6.75 -2.734375 L 7.859375 -6.480469 L 8.929688 -6.480469 L 6.902344 0 L 5.761719 0 L 4.730469 -3.882813 L 4.480469 -4.988281 L 3.167969 0 Z M 2.019531 0 "/>
</symbol>
<symbol overflow="visible" id="glyph0-5">
<path style="stroke:none;" d="M 3.222656 -0.984375 L 3.382813 -0.0117188 C 3.070313 0.0507813 2.792969 0.0820313 2.550781 0.0859375 C 2.148438 0.0820313 1.839844 0.0234375 1.621094 -0.101563 C 1.398438 -0.226563 1.242188 -0.394531 1.15625 -0.601563 C 1.0625 -0.804688 1.019531 -1.238281 1.023438 -1.898438 L 1.023438 -5.628906 L 0.21875 -5.628906 L 0.21875 -6.480469 L 1.023438 -6.480469 L 1.023438 -8.085938 L 2.117188 -8.746094 L 2.117188 -6.480469 L 3.222656 -6.480469 L 3.222656 -5.628906 L 2.117188 -5.628906 L 2.117188 -1.835938 C 2.113281 -1.519531 2.132813 -1.320313 2.175781 -1.230469 C 2.210938 -1.140625 2.273438 -1.070313 2.363281 -1.019531 C 2.449219 -0.964844 2.578125 -0.9375 2.742188 -0.941406 C 2.859375 -0.9375 3.019531 -0.953125 3.222656 -0.984375 Z M 3.222656 -0.984375 "/>
</symbol>
<symbol overflow="visible" id="glyph1-0">
<path style="stroke:none;" d="M 0 -4.65625 L 0 -3.558594 L -7 -3.558594 C -6.746094 -3.289063 -6.492188 -2.941406 -6.242188 -2.515625 C -5.988281 -2.085938 -5.800781 -1.703125 -5.675781 -1.359375 L -6.738281 -1.359375 C -7.027344 -1.972656 -7.375 -2.507813 -7.789063 -2.972656 C -8.195313 -3.429688 -8.59375 -3.757813 -8.984375 -3.949219 L -8.984375 -4.65625 Z M 0 -4.65625 "/>
</symbol>
<symbol overflow="visible" id="glyph1-1">
<path style="stroke:none;" d="M -4.414063 -0.519531 C -5.46875 -0.515625 -6.320313 -0.625 -6.964844 -0.84375 C -7.609375 -1.0625 -8.105469 -1.386719 -8.457031 -1.816406 C -8.804688 -2.246094 -8.980469 -2.785156 -8.984375 -3.4375 C -8.980469 -3.914063 -8.886719 -4.335938 -8.695313 -4.699219 C -8.5 -5.058594 -8.21875 -5.355469 -7.859375 -5.59375 C -7.492188 -5.828125 -7.050781 -6.015625 -6.527344 -6.152344 C -6.003906 -6.285156 -5.296875 -6.351563 -4.414063 -6.355469 C -3.359375 -6.351563 -2.511719 -6.242188 -1.871094 -6.03125 C -1.222656 -5.8125 -0.726563 -5.492188 -0.375 -5.0625 C -0.0234375 -4.632813 0.152344 -4.089844 0.152344 -3.4375 C 0.152344 -2.570313 -0.15625 -1.890625 -0.773438 -1.402344 C -1.515625 -0.808594 -2.726563 -0.515625 -4.414063 -0.519531 Z M -4.414063 -1.648438 C -2.941406 -1.644531 -1.964844 -1.816406 -1.480469 -2.164063 C -0.992188 -2.503906 -0.75 -2.929688 -0.75 -3.4375 C -0.75 -3.9375 -0.992188 -4.359375 -1.480469 -4.707031 C -1.96875 -5.050781 -2.945313 -5.226563 -4.414063 -5.226563 C -5.882813 -5.226563 -6.863281 -5.050781 -7.347656 -4.707031 C -7.832031 -4.359375 -8.074219 -3.933594 -8.074219 -3.425781 C -8.074219 -2.917969 -7.859375 -2.515625 -7.433594 -2.214844 C -6.886719 -1.835938 -5.878906 -1.644531 -4.414063 -1.648438 Z M -4.414063 -1.648438 "/>
</symbol>
<symbol overflow="visible" id="glyph1-2">
<path style="stroke:none;" d="M -2.34375 -0.519531 L -2.441406 -1.671875 C -1.875 -1.753906 -1.453125 -1.953125 -1.171875 -2.265625 C -0.890625 -2.574219 -0.75 -2.949219 -0.75 -3.394531 C -0.75 -3.917969 -0.949219 -4.367188 -1.347656 -4.734375 C -1.746094 -5.101563 -2.273438 -5.285156 -2.9375 -5.285156 C -3.558594 -5.285156 -4.054688 -5.109375 -4.417969 -4.757813 C -4.777344 -4.40625 -4.957031 -3.945313 -4.960938 -3.375 C -4.957031 -3.019531 -4.875 -2.699219 -4.71875 -2.414063 C -4.554688 -2.128906 -4.347656 -1.90625 -4.09375 -1.746094 L -4.230469 -0.714844 L -8.824219 -1.582031 L -8.824219 -6.03125 L -7.777344 -6.03125 L -7.777344 -2.460938 L -5.371094 -1.976563 C -5.742188 -2.511719 -5.929688 -3.078125 -5.933594 -3.667969 C -5.929688 -4.449219 -5.660156 -5.105469 -5.121094 -5.644531 C -4.578125 -6.179688 -3.882813 -6.449219 -3.035156 -6.453125 C -2.222656 -6.449219 -1.519531 -6.214844 -0.933594 -5.742188 C -0.207031 -5.167969 0.152344 -4.382813 0.152344 -3.394531 C 0.152344 -2.574219 -0.0742188 -1.910156 -0.53125 -1.398438 C -0.984375 -0.882813 -1.589844 -0.589844 -2.34375 -0.519531 Z M -2.34375 -0.519531 "/>
</symbol>
<symbol overflow="visible" id="glyph1-3">
<path style="stroke:none;" d="M -1.054688 -6.292969 L 0 -6.292969 L 0 -0.378906 C -0.265625 -0.367188 -0.519531 -0.410156 -0.761719 -0.507813 C -1.164063 -0.65625 -1.558594 -0.898438 -1.953125 -1.230469 C -2.339844 -1.558594 -2.792969 -2.035156 -3.308594 -2.667969 C -4.101563 -3.636719 -4.734375 -4.292969 -5.203125 -4.636719 C -5.667969 -4.976563 -6.105469 -5.148438 -6.523438 -5.152344 C -6.957031 -5.148438 -7.324219 -4.992188 -7.625 -4.683594 C -7.921875 -4.371094 -8.074219 -3.96875 -8.074219 -3.46875 C -8.074219 -2.9375 -7.914063 -2.511719 -7.597656 -2.195313 C -7.277344 -1.878906 -6.839844 -1.71875 -6.28125 -1.714844 L -6.398438 -0.585938 C -7.238281 -0.664063 -7.878906 -0.953125 -8.320313 -1.457031 C -8.761719 -1.960938 -8.980469 -2.640625 -8.984375 -3.492188 C -8.980469 -4.347656 -8.742188 -5.023438 -8.269531 -5.527344 C -7.789063 -6.027344 -7.199219 -6.28125 -6.5 -6.28125 C -6.140625 -6.28125 -5.789063 -6.207031 -5.445313 -6.058594 C -5.09375 -5.910156 -4.730469 -5.664063 -4.351563 -5.328125 C -3.964844 -4.984375 -3.441406 -4.421875 -2.777344 -3.636719 C -2.222656 -2.976563 -1.84375 -2.554688 -1.648438 -2.367188 C -1.449219 -2.179688 -1.253906 -2.023438 -1.054688 -1.90625 Z M -1.054688 -6.292969 "/>
</symbol>
<symbol overflow="visible" id="glyph1-4">
<path style="stroke:none;" d="M -2.363281 -0.523438 L -2.507813 -1.625 C -1.882813 -1.746094 -1.433594 -1.960938 -1.160156 -2.265625 C -0.886719 -2.566406 -0.75 -2.9375 -0.75 -3.375 C -0.75 -3.890625 -0.925781 -4.324219 -1.285156 -4.683594 C -1.640625 -5.035156 -2.085938 -5.214844 -2.617188 -5.21875 C -3.121094 -5.214844 -3.539063 -5.050781 -3.867188 -4.722656 C -4.195313 -4.394531 -4.359375 -3.976563 -4.359375 -3.46875 C -4.359375 -3.257813 -4.316406 -2.996094 -4.234375 -2.691406 L -5.199219 -2.8125 C -5.1875 -2.882813 -5.183594 -2.941406 -5.1875 -2.992188 C -5.183594 -3.457031 -5.308594 -3.878906 -5.554688 -4.253906 C -5.796875 -4.628906 -6.171875 -4.816406 -6.683594 -4.816406 C -7.085938 -4.816406 -7.417969 -4.679688 -7.683594 -4.40625 C -7.945313 -4.132813 -8.078125 -3.78125 -8.082031 -3.351563 C -8.078125 -2.921875 -7.945313 -2.5625 -7.675781 -2.28125 C -7.40625 -1.992188 -7.003906 -1.8125 -6.46875 -1.734375 L -6.664063 -0.636719 C -7.398438 -0.765625 -7.96875 -1.070313 -8.375 -1.550781 C -8.777344 -2.023438 -8.980469 -2.617188 -8.984375 -3.328125 C -8.980469 -3.8125 -8.875 -4.261719 -8.667969 -4.675781 C -8.457031 -5.085938 -8.171875 -5.398438 -7.8125 -5.617188 C -7.445313 -5.832031 -7.0625 -5.941406 -6.660156 -5.945313 C -6.269531 -5.941406 -5.917969 -5.835938 -5.601563 -5.632813 C -5.28125 -5.421875 -5.027344 -5.117188 -4.847656 -4.710938 C -4.722656 -5.238281 -4.46875 -5.648438 -4.085938 -5.941406 C -3.695313 -6.234375 -3.214844 -6.378906 -2.644531 -6.382813 C -1.859375 -6.378906 -1.199219 -6.09375 -0.65625 -5.527344 C -0.113281 -4.957031 0.15625 -4.238281 0.160156 -3.367188 C 0.15625 -2.582031 -0.0742188 -1.929688 -0.542969 -1.414063 C -1.007813 -0.890625 -1.613281 -0.59375 -2.363281 -0.523438 Z M -2.363281 -0.523438 "/>
</symbol>
<symbol overflow="visible" id="glyph1-5">
<path style="stroke:none;" d="M 0 -0.824219 L -6.480469 -0.824219 L -6.480469 -1.808594 L -5.574219 -1.808594 C -5.886719 -2.007813 -6.140625 -2.277344 -6.335938 -2.617188 C -6.527344 -2.953125 -6.625 -3.339844 -6.628906 -3.773438 C -6.625 -4.25 -6.527344 -4.640625 -6.328125 -4.953125 C -6.128906 -5.257813 -5.847656 -5.476563 -5.492188 -5.601563 C -6.246094 -6.113281 -6.625 -6.78125 -6.628906 -7.605469 C -6.625 -8.246094 -6.449219 -8.738281 -6.09375 -9.085938 C -5.734375 -9.429688 -5.183594 -9.601563 -4.449219 -9.605469 L 0 -9.605469 L 0 -8.515625 L -4.082031 -8.515625 C -4.519531 -8.511719 -4.835938 -8.476563 -5.03125 -8.40625 C -5.222656 -8.332031 -5.378906 -8.203125 -5.496094 -8.019531 C -5.613281 -7.828125 -5.671875 -7.609375 -5.675781 -7.359375 C -5.671875 -6.902344 -5.519531 -6.523438 -5.21875 -6.222656 C -4.914063 -5.921875 -4.429688 -5.769531 -3.765625 -5.773438 L 0 -5.773438 L 0 -4.675781 L -4.210938 -4.675781 C -4.699219 -4.675781 -5.066406 -4.585938 -5.308594 -4.40625 C -5.550781 -4.226563 -5.671875 -3.933594 -5.675781 -3.527344 C -5.671875 -3.214844 -5.589844 -2.925781 -5.429688 -2.667969 C -5.265625 -2.402344 -5.027344 -2.214844 -4.71875 -2.097656 C -4.402344 -1.980469 -3.953125 -1.921875 -3.363281 -1.921875 L 0 -1.921875 Z M 0 -0.824219 "/>
</symbol>
<symbol overflow="visible" id="glyph1-6">
<path style="stroke:none;" d="M 2.484375 -0.824219 L -6.480469 -0.824219 L -6.480469 -1.824219 L -5.640625 -1.824219 C -5.964844 -2.058594 -6.210938 -2.328125 -6.378906 -2.625 C -6.542969 -2.921875 -6.625 -3.28125 -6.628906 -3.703125 C -6.625 -4.257813 -6.484375 -4.746094 -6.199219 -5.167969 C -5.914063 -5.589844 -5.511719 -5.910156 -4.996094 -6.128906 C -4.476563 -6.34375 -3.90625 -6.449219 -3.289063 -6.453125 C -2.621094 -6.449219 -2.023438 -6.332031 -1.496094 -6.09375 C -0.964844 -5.855469 -0.558594 -5.507813 -0.277344 -5.054688 C 0.0078125 -4.597656 0.144531 -4.121094 0.148438 -3.625 C 0.144531 -3.257813 0.0703125 -2.929688 -0.0820313 -2.640625 C -0.238281 -2.347656 -0.433594 -2.109375 -0.671875 -1.921875 L 2.484375 -1.921875 Z M -3.203125 -1.820313 C -2.367188 -1.816406 -1.75 -1.984375 -1.355469 -2.324219 C -0.953125 -2.660156 -0.753906 -3.070313 -0.757813 -3.550781 C -0.753906 -4.039063 -0.960938 -4.457031 -1.375 -4.804688 C -1.785156 -5.152344 -2.425781 -5.324219 -3.296875 -5.328125 C -4.121094 -5.324219 -4.738281 -5.15625 -5.152344 -4.816406 C -5.558594 -4.476563 -5.765625 -4.070313 -5.769531 -3.601563 C -5.765625 -3.128906 -5.546875 -2.714844 -5.113281 -2.359375 C -4.671875 -1.996094 -4.035156 -1.816406 -3.203125 -1.820313 Z M -3.203125 -1.820313 "/>
</symbol>
<symbol overflow="visible" id="glyph1-7">
<path style="stroke:none;" d="M 0.539063 -0.621094 L 0.695313 -1.691406 C 1.023438 -1.734375 1.265625 -1.859375 1.417969 -2.0625 C 1.621094 -2.335938 1.722656 -2.707031 1.722656 -3.179688 C 1.722656 -3.683594 1.617188 -4.074219 1.414063 -4.355469 C 1.207031 -4.628906 0.925781 -4.816406 0.5625 -4.917969 C 0.335938 -4.972656 -0.132813 -5 -0.847656 -5 C -0.28125 -4.515625 0 -3.917969 0 -3.203125 C 0 -2.308594 -0.320313 -1.617188 -0.964844 -1.132813 C -1.605469 -0.640625 -2.375 -0.398438 -3.277344 -0.402344 C -3.894531 -0.398438 -4.464844 -0.511719 -4.988281 -0.738281 C -5.507813 -0.960938 -5.914063 -1.285156 -6.199219 -1.710938 C -6.484375 -2.136719 -6.625 -2.636719 -6.628906 -3.210938 C -6.625 -3.976563 -6.316406 -4.605469 -5.699219 -5.101563 L -6.480469 -5.101563 L -6.480469 -6.117188 L -0.878906 -6.117188 C 0.128906 -6.117188 0.84375 -6.011719 1.265625 -5.808594 C 1.6875 -5.597656 2.019531 -5.273438 2.261719 -4.832031 C 2.503906 -4.382813 2.625 -3.835938 2.628906 -3.1875 C 2.625 -2.414063 2.449219 -1.789063 2.105469 -1.3125 C 1.753906 -0.835938 1.234375 -0.605469 0.539063 -0.621094 Z M -3.355469 -1.53125 C -2.503906 -1.527344 -1.882813 -1.699219 -1.496094 -2.039063 C -1.101563 -2.375 -0.90625 -2.796875 -0.910156 -3.308594 C -0.90625 -3.8125 -1.101563 -4.234375 -1.492188 -4.578125 C -1.878906 -4.914063 -2.488281 -5.085938 -3.320313 -5.089844 C -4.113281 -5.085938 -4.710938 -4.910156 -5.113281 -4.5625 C -5.515625 -4.207031 -5.71875 -3.78125 -5.71875 -3.289063 C -5.71875 -2.796875 -5.519531 -2.382813 -5.121094 -2.042969 C -4.722656 -1.699219 -4.132813 -1.527344 -3.355469 -1.53125 Z M -3.355469 -1.53125 "/>
</symbol>
</g>
<clipPath id="clip1">
<path d="M 59.039063 59.039063 L 402.757813 59.039063 L 402.757813 359.558594 L 59.039063 359.558594 Z M 59.039063 59.039063 "/>
</clipPath>
</defs>
<g id="surface136">
<rect x="0" y="0" width="432" height="432" style="fill: rgb(100%,100%,100%); fill-opacity: 1; stroke: none;"/>
<g clip-path="url(#clip1)" clip-rule="nonzero">
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 164.753906 222.371094 C 164.753906 226.636719 158.355469 226.636719 158.355469 222.371094 C 158.355469 218.105469 164.753906 218.105469 164.753906 222.371094 " data-tooltip="Mazda RX4" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 185.445313 222.371094 C 185.445313 226.636719 179.042969 226.636719 179.042969 222.371094 C 179.042969 218.105469 185.445313 218.105469 185.445313 222.371094 " data-tooltip="Mazda RX4 Wag" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 140.414063 201.128906 C 140.414063 205.394531 134.011719 205.394531 134.011719 201.128906 C 134.011719 196.863281 140.414063 196.863281 140.414063 201.128906 " data-tooltip="Datsun 710" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 213.03125 217.652344 C 213.03125 221.917969 206.632813 221.917969 206.632813 217.652344 C 206.632813 213.382813 213.03125 213.382813 213.03125 217.652344 " data-tooltip="Hornet 4 Drive" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 231.289063 249.515625 C 231.289063 253.78125 224.886719 253.78125 224.886719 249.515625 C 224.886719 245.25 231.289063 245.25 231.289063 249.515625 " data-tooltip="Hornet Sportabout" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 232.910156 256.597656 C 232.910156 260.863281 226.511719 260.863281 226.511719 256.597656 C 226.511719 252.328125 232.910156 252.328125 232.910156 256.597656 " data-tooltip="Valiant" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 241.835938 301.441406 C 241.835938 305.707031 235.4375 305.707031 235.4375 301.441406 C 235.4375 297.175781 241.835938 297.175781 241.835938 301.441406 " data-tooltip="Duster 360" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 211.003906 182.246094 C 211.003906 186.511719 204.601563 186.511719 204.601563 182.246094 C 204.601563 177.980469 211.003906 177.980469 211.003906 182.246094 " data-tooltip="Merc 240D" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 207.757813 201.128906 C 207.757813 205.394531 201.355469 205.394531 201.355469 201.128906 C 201.355469 196.863281 207.757813 196.863281 207.757813 201.128906 " data-tooltip="Merc 230" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 231.289063 243.613281 C 231.289063 247.878906 224.886719 247.878906 224.886719 243.613281 C 224.886719 239.347656 231.289063 239.347656 231.289063 243.613281 " data-tooltip="Merc 280" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 231.289063 260.136719 C 231.289063 264.402344 224.886719 264.402344 224.886719 260.136719 C 224.886719 255.871094 231.289063 255.871094 231.289063 260.136719 " data-tooltip="Merc 280C" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 282.40625 276.65625 C 282.40625 280.925781 276.003906 280.925781 276.003906 276.65625 C 276.003906 272.390625 282.40625 272.390625 282.40625 276.65625 " data-tooltip="Merc 450SE" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 254.816406 266.035156 C 254.816406 270.304688 248.417969 270.304688 248.417969 266.035156 C 248.417969 261.769531 254.816406 261.769531 254.816406 266.035156 " data-tooltip="Merc 450SL" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 258.875 290.820313 C 258.875 295.085938 252.476563 295.085938 252.476563 290.820313 C 252.476563 286.554688 258.875 286.554688 258.875 290.820313 " data-tooltip="Merc 450SLC" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 378.148438 347.464844 C 378.148438 351.734375 371.75 351.734375 371.75 347.464844 C 371.75 343.199219 378.148438 343.199219 378.148438 347.464844 " data-tooltip="Cadillac Fleetwood" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 392.265625 347.464844 C 392.265625 351.734375 385.867188 351.734375 385.867188 347.464844 C 385.867188 343.199219 392.265625 343.199219 392.265625 347.464844 " data-tooltip="Lincoln Continental" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 385.855469 296.71875 C 385.855469 300.988281 379.457031 300.988281 379.457031 296.71875 C 379.457031 292.453125 385.855469 292.453125 385.855469 296.71875 " data-tooltip="Chrysler Imperial" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 130.675781 87.835938 C 130.675781 92.101563 124.277344 92.101563 124.277344 87.835938 C 124.277344 83.570313 130.675781 83.570313 130.675781 87.835938 " data-tooltip="Fiat 128" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 83.210938 111.4375 C 83.210938 115.703125 76.808594 115.703125 76.808594 111.4375 C 76.808594 107.171875 83.210938 107.171875 83.210938 111.4375 " data-tooltip="Honda Civic" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 101.058594 70.132813 C 101.058594 74.398438 94.660156 74.398438 94.660156 70.132813 C 94.660156 65.867188 101.058594 65.867188 101.058594 70.132813 " data-tooltip="Toyota Corolla" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 152.175781 216.472656 C 152.175781 220.738281 145.777344 220.738281 145.777344 216.472656 C 145.777344 212.203125 152.175781 212.203125 152.175781 216.472656 " data-tooltip="Toyota Corona" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 237.777344 287.28125 C 237.777344 291.546875 231.378906 291.546875 231.378906 287.28125 C 231.378906 283.011719 237.777344 283.011719 237.777344 287.28125 " data-tooltip="Dodge Challenger" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 230.882813 290.820313 C 230.882813 295.085938 224.480469 295.085938 224.480469 290.820313 C 224.480469 286.554688 230.882813 286.554688 230.882813 290.820313 " data-tooltip="AMC Javelin" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 263.742188 313.242188 C 263.742188 317.507813 257.34375 317.507813 257.34375 313.242188 C 257.34375 308.976563 263.742188 308.976563 263.742188 313.242188 " data-tooltip="Camaro Z28" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 264.148438 243.613281 C 264.148438 247.878906 257.75 247.878906 257.75 243.613281 C 257.75 239.347656 264.148438 239.347656 264.148438 243.613281 " data-tooltip="Pontiac Firebird" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 109.175781 148.023438 C 109.175781 152.289063 102.773438 152.289063 102.773438 148.023438 C 102.773438 143.757813 109.175781 143.757813 109.175781 148.023438 " data-tooltip="Fiat X1-9" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 125.808594 163.363281 C 125.808594 167.632813 119.40625 167.632813 119.40625 163.363281 C 119.40625 159.097656 125.808594 159.097656 125.808594 163.363281 " data-tooltip="Porsche 914-2" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 74.933594 111.4375 C 74.933594 115.703125 68.535156 115.703125 68.535156 111.4375 C 68.535156 107.171875 74.933594 107.171875 74.933594 111.4375 " data-tooltip="Lotus Europa" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 209.378906 283.738281 C 209.378906 288.003906 202.980469 288.003906 202.980469 283.738281 C 202.980469 279.472656 209.378906 279.472656 209.378906 283.738281 " data-tooltip="Ford Pantera L" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 176.925781 237.714844 C 176.925781 241.980469 170.523438 241.980469 170.523438 237.714844 C 170.523438 233.445313 176.925781 233.445313 176.925781 237.714844 " data-tooltip="Ferrari Dino" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 241.835938 293.179688 C 241.835938 297.445313 235.4375 297.445313 235.4375 293.179688 C 235.4375 288.914063 241.835938 288.914063 241.835938 293.179688 " data-tooltip="Maserati Bora" class="dataPoint"/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 177.734375 217.652344 C 177.734375 221.917969 171.335938 221.917969 171.335938 217.652344 C 171.335938 213.382813 177.734375 213.382813 177.734375 217.652344 " data-tooltip="Volvo 142E" class="dataPoint"/>
</g>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 111.246094 358.558594 L 354.664063 358.558594 "/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 111.246094 358.558594 L 111.246094 365.761719 "/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 192.386719 358.558594 L 192.386719 365.761719 "/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 273.523438 358.558594 L 273.523438 365.761719 "/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 354.664063 358.558594 L 354.664063 365.761719 "/>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph0-0" x="107.769531" y="385.921875"/>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph0-1" x="188.910156" y="385.921875"/>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph0-2" x="270.046875" y="385.921875"/>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph0-3" x="351.1875" y="385.921875"/>
</g>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 59.039063 352.1875 L 59.039063 116.160156 "/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 59.039063 352.1875 L 51.839844 352.1875 "/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 59.039063 293.179688 L 51.839844 293.179688 "/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 59.039063 234.171875 L 51.839844 234.171875 "/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 59.039063 175.164063 L 51.839844 175.164063 "/>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 59.039063 116.160156 L 51.839844 116.160156 "/>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph1-0" x="43.199219" y="359.140625"/>
<use xlink:href="#glyph1-1" x="43.199219" y="352.188721"/>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph1-0" x="43.199219" y="300.132813"/>
<use xlink:href="#glyph1-2" x="43.199219" y="293.180908"/>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph1-3" x="43.199219" y="241.125"/>
<use xlink:href="#glyph1-1" x="43.199219" y="234.173096"/>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph1-3" x="43.199219" y="182.117188"/>
<use xlink:href="#glyph1-2" x="43.199219" y="175.165283"/>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph1-4" x="43.199219" y="123.113281"/>
<use xlink:href="#glyph1-1" x="43.199219" y="116.161377"/>
</g>
<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 59.039063 358.558594 L 401.761719 358.558594 L 401.761719 59.039063 L 59.039063 59.039063 L 59.039063 358.558594 "/>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph0-4" x="224.148438" y="414.71875"/>
<use xlink:href="#glyph0-5" x="233.175537" y="414.71875"/>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
<use xlink:href="#glyph1-5" x="14.398438" y="220.957031"/>
<use xlink:href="#glyph1-6" x="14.398438" y="210.544434"/>
<use xlink:href="#glyph1-7" x="14.398438" y="203.592529"/>
</g>
</g>
</svg>
<script>
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return '<strong>Model:</strong> <span style="color:red">' + d3.select(this).attr("data-tooltip") + '</span>';
})
d3.select('body').select('svg')
.call(tip);
d3.select('body').selectAll('.dataPoint')
.style('pointer-events','all')
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment