trase
trase copied to clipboard
Published
20 hours ago •
trase-cpp
trase-cpp
Choosing colors
Is there an example where I can choose the colors directly rather than let the library choose a mapping between data types and colors?
Something like:
auto data = trase::create_data().x(x).y(y).color(color).fill(color);
where color is something like:
std::vector<std::string> color = {"#FFA500", "#000000", "#FFFF00"};
etc...
Trase uses a Colormap class to map data values to colors. We don't as yet have a mechanism for using a custom colormap, although it should be simple to add in.
Each Geometry is given a colormap on creation, which is currently set by default to the viridis colormap. There is a getter for the geometry colormap (see get_colormap in the Geometry docs), but we don't have a corresponding setter, which is an oversight! I'd be happy if you wanted to add this in as a PR. I think this would be all that is required to start using a custom colormap
Thanks. Colormaps are great, but sometimes it's important to choose specific colors for things, especially in scatter plots representing very specific things.
True. You might be able to set a simple custom colormap to do what you want, for example have a three element color map:
Colormap my_map(std::vector<Vector<float, 3>>{
{{1.f, 0.f, 0.f}, {0.f, 1.f, 0.f}, {0.f, 0.f, 1.f}}
});
Then use values from 0 -> 2 in the color data field
std::vector<int> color = {0, 0, 0, 1, 1, 2, 2, 2, 2};
auto data = trase::create_data().x(x).y(y).color(color).fill(color);
auto points = ax->points(data);
points.set_colormap(my_map);
So all the 0 data points are red, all the 1 are green etc.
That works great. I noticed it only takes a trase::Vector<float,3>. It is possible to put more colors in this map? Something like:
trase::Colormap my_map(std::vector<trase::Vector<float, 6>>{
{{0.f, 0.f, 1.f}, {0.f, 1.f, 0.f}, {1.f, 0.f, 1.f}, {1.f, 1.f, 0.f}, {0.f, 0.f, 0.f}, {1.f, 0.4f, 0.f}
});
Why not std::array<float,3> by the way?
The 3 refers to the 3 color channels in rgb, so to put 6 colors in the colormap it would be:
trase::Colormap my_map(std::vector<trase::Vector<float, 3>>{
{{0.f, 0.f, 1.f}, {0.f, 1.f, 0.f}, {1.f, 0.f, 1.f}, {1.f, 1.f, 0.f}, {0.f, 0.f, 0.f}, {1.f, 0.4f, 0.f}
});
trase::Vector has the semantics of a mathematical vector (i.e. can do v * v, and v.norm()), we use it a lot in Trase for geometry operations. I think we started using it for colors out of habit, but its not really needed. std::array would probably be a better fit.
I think I got a workaround here while there's not set_colormap:
trase::Colormap my_map(std::vector<trase::Vector<float, 3>>{
{0.f, 0.f, 1.f},
{0.f, 1.f, 0.f},
{1.f, 0.f, 1.f},
{1.f, 1.f, 0.f},
{0.f, 0.f, 0.f},
{1.f, 0.4f, 0.f}
});
// ...
trase::Colormap & cm = const_cast<trase::Colormap &>(points->get_colormap());
cm = my_map;
It seems like the colors are still not really matching the map though.
<svg width="800px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<desc>Figure 5</desc>
<script>
function tooltip(x,y,string,size,face) {
var txtElem = document.createElementNS("http://www.w3.org/2000/svg", "text");
txtElem.setAttributeNS(null,"id","tooltip");
txtElem.setAttributeNS(null,"x",x);
txtElem.setAttributeNS(null,"y",y);
txtElem.setAttributeNS(null,"font-size",size);
txtElem.setAttributeNS(null,"font-family",face);
txtElem.appendChild(document.createTextNode(string))
document.documentElement.appendChild(txtElem);
}
function remove_tooltip() {
var txtElem = document.getElementById("tooltip");
document.documentElement.removeChild(txtElem);
}
</script>
<rect x="80" y="60" width="640" height="480" fill="#c8c8c8" fill-opacity="1.000000" stroke="#c8c8c8" stroke-opacity="1.000000" stroke-width="3.000000">
</rect>
<text x="124.401" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">-3</text>
<text x="229.568" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">-2</text>
<text x="334.735" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">-1</text>
<text x="439.901" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">0</text>
<text x="545.068" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">1</text>
<text x="650.235" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">2</text>
<text x="75" y="477.432" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">-2.8</text>
<text x="75" y="380.402" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">-2.1</text>
<text x="75" y="283.373" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">-1.4</text>
<text x="75" y="186.343" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">-0.7</text>
<text x="75" y="89.3137" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">0</text>
<path d=" M 124.401016 545.000000 L 124.401016 540.000000 M 229.567810 545.000000 L 229.567810 540.000000 M 334.734619 545.000000 L 334.734619 540.000000 M 439.901367 545.000000 L 439.901367 540.000000 M 545.068176 545.000000 L 545.068176 540.000000 M 650.234985 545.000000 L 650.234985 540.000000 M 75.000000 477.432098 L 80.000000 477.432098 M 75.000000 380.402496 L 80.000000 380.402496 M 75.000000 283.372864 L 80.000000 283.372864 M 75.000000 186.343262 L 80.000000 186.343262 M 75.000000 89.313660 L 80.000000 89.313660" stroke="#000000" stroke-opacity="1.000000" stroke-width="1.500000" fill-opacity="0"/>
<path d=" M 124.401016 60.000000 L 124.401016 540.000000 M 229.567810 60.000000 L 229.567810 540.000000 M 334.734619 60.000000 L 334.734619 540.000000 M 439.901367 60.000000 L 439.901367 540.000000 M 545.068176 60.000000 L 545.068176 540.000000 M 650.234985 60.000000 L 650.234985 540.000000 M 80.000000 477.432098 L 720.000000 477.432098 M 80.000000 380.402496 L 720.000000 380.402496 M 80.000000 283.372864 L 720.000000 283.372864 M 80.000000 186.343262 L 720.000000 186.343262 M 80.000000 89.313660 L 720.000000 89.313660" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="1.500000" fill-opacity="0"/>
<text x="400" y="564" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">f1</text>
<text x="0" y="0" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="baseline" fill="#000000" fill-opacity="1.000000" transform="matrix(-4.37114e-08 -1 1 -4.37114e-08 48 300)">f2</text>
<circle cx="509.8" cy="528.6" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="95.23" cy="71.71" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="355.5" cy="519.5" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="299.4" cy="472.7" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="140.7" cy="355.2" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="245.8" cy="389.1" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="95.23" cy="528.6" r="6" fill="#48b648" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="509.8" cy="71.71" r="6" fill="#ff6c92" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="509.8" cy="71.71" r="6" fill="#6d6d00" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="704.4" cy="150.3" r="6" fill="#b54800" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="509.8" cy="528.6" r="6" fill="#61174f" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="95.23" cy="71.71" r="6" fill="#61174f" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="355.5" cy="519.5" r="6" fill="#61174f" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="299.4" cy="472.7" r="6" fill="#61174f" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="140.7" cy="355.2" r="6" fill="#61174f" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="245.8" cy="389.1" r="6" fill="#61174f" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
</svg>
I think I know the problem, it is interpolating between the colors you want rather than hitting those colors exactly. You need to set the min/max values of the color aesthetic to go from 0 to the maximum number of colors, so you'd need to do something like this:
Colormap my_map(std::vector<Vector<float, 3>>{
{{1.f, 0.f, 0.f}, {0.f, 1.f, 0.f}, {0.f, 0.f, 1.f}}
});
std::vector<int> color = {0, 0, 0, 1, 1, 2, 2, 2, 2};
auto data = trase::create_data().x(x).y(y).color(color).color(0, 3);
auto points = ax->points(data);
points.set_colormap(my_map);
Does that fix it?
It does work now. Thanks a lot. I'll let you know when I push my library with your svg plots.
<svg width="800px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<desc>Figure 4</desc>
<script>
function tooltip(x,y,string,size,face) {
var txtElem = document.createElementNS("http://www.w3.org/2000/svg", "text");
txtElem.setAttributeNS(null,"id","tooltip");
txtElem.setAttributeNS(null,"x",x);
txtElem.setAttributeNS(null,"y",y);
txtElem.setAttributeNS(null,"font-size",size);
txtElem.setAttributeNS(null,"font-family",face);
txtElem.appendChild(document.createTextNode(string))
document.documentElement.appendChild(txtElem);
}
function remove_tooltip() {
var txtElem = document.getElementById("tooltip");
document.documentElement.removeChild(txtElem);
}
</script>
<rect x="80" y="60" width="640" height="480" fill="#c8c8c8" fill-opacity="1.000000" stroke="#c8c8c8" stroke-opacity="1.000000" stroke-width="3.000000">
</rect>
<text x="165.99" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">-2.4</text>
<text x="280.737" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">-1.8</text>
<text x="395.483" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">-1.2</text>
<text x="510.229" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">-0.6</text>
<text x="624.976" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">0</text>
<text x="75" y="449.713" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">-3</text>
<text x="75" y="354.61" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">-2</text>
<text x="75" y="259.508" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">-1</text>
<text x="75" y="164.405" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">0</text>
<text x="75" y="69.3022" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">1</text>
<path d=" M 165.990234 545.000000 L 165.990234 540.000000 M 280.736572 545.000000 L 280.736572 540.000000 M 395.482941 545.000000 L 395.482941 540.000000 M 510.229309 545.000000 L 510.229309 540.000000 M 624.975647 545.000000 L 624.975647 540.000000 M 75.000000 449.712982 L 80.000000 449.712982 M 75.000000 354.610291 L 80.000000 354.610291 M 75.000000 259.507599 L 80.000000 259.507599 M 75.000000 164.404907 L 80.000000 164.404907 M 75.000000 69.302216 L 80.000000 69.302216" stroke="#000000" stroke-opacity="1.000000" stroke-width="1.500000" fill-opacity="0"/>
<path d=" M 165.990234 60.000000 L 165.990234 540.000000 M 280.736572 60.000000 L 280.736572 540.000000 M 395.482941 60.000000 L 395.482941 540.000000 M 510.229309 60.000000 L 510.229309 540.000000 M 624.975647 60.000000 L 624.975647 540.000000 M 80.000000 449.712982 L 720.000000 449.712982 M 80.000000 354.610291 L 720.000000 354.610291 M 80.000000 259.507599 L 720.000000 259.507599 M 80.000000 164.404907 L 720.000000 164.404907 M 80.000000 69.302216 L 720.000000 69.302216" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="1.500000" fill-opacity="0"/>
<text x="400" y="564" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">f1</text>
<text x="0" y="0" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="baseline" fill="#000000" fill-opacity="1.000000" transform="matrix(-4.37114e-08 -1 1 -4.37114e-08 48 300)">f2</text>
<circle cx="426.8" cy="387.5" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="257.4" cy="376.8" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="679.8" cy="528.6" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="194.2" cy="350.6" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="438.6" cy="433.1" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="95.23" cy="296.9" r="6" fill="#0024da" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="95.23" cy="528.6" r="6" fill="#18e618" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="679.8" cy="296.9" r="6" fill="#ff0bf3" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="679.8" cy="296.9" r="6" fill="#fffe00" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="704.4" cy="71.71" r="6" fill="#0c0c00" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="426.8" cy="387.5" r="6" fill="#e55b00" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="257.4" cy="376.8" r="6" fill="#e55b00" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="194.2" cy="350.6" r="6" fill="#e55b00" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
<circle cx="438.6" cy="433.1" r="6" fill="#e55b00" fill-opacity="1.000000" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="0.000000">
</circle>
</svg>
I think the same idea doesn't work for lines though:
auto data = trase::create_data().x(x).y(y).color(colors).color(0,6).fill(colors).fill(0,6);
auto points = ax->line(data);
trase::Colormap & cm = const_cast<trase::Colormap &>(points->get_colormap());
cm = my_map;
This gives me:
<svg width="800px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<desc>Figure 1</desc>
<script>
function tooltip(x,y,string,size,face) {
var txtElem = document.createElementNS("http://www.w3.org/2000/svg", "text");
txtElem.setAttributeNS(null,"id","tooltip");
txtElem.setAttributeNS(null,"x",x);
txtElem.setAttributeNS(null,"y",y);
txtElem.setAttributeNS(null,"font-size",size);
txtElem.setAttributeNS(null,"font-family",face);
txtElem.appendChild(document.createTextNode(string))
document.documentElement.appendChild(txtElem);
}
function remove_tooltip() {
var txtElem = document.getElementById("tooltip");
document.documentElement.removeChild(txtElem);
}
</script>
<rect x="80" y="60" width="640" height="480" fill="#c8c8c8" fill-opacity="1.000000" stroke="#c8c8c8" stroke-opacity="1.000000" stroke-width="3.000000">
</rect>
<text x="156.145" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">1.2</text>
<text x="277.977" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">1.6</text>
<text x="399.81" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">2</text>
<text x="521.642" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">2.4</text>
<text x="643.474" y="545" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">2.8</text>
<text x="75" y="463.956" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">-2.4</text>
<text x="75" y="370.456" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">-1.2</text>
<text x="75" y="276.957" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">0</text>
<text x="75" y="183.458" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">1.2</text>
<text x="75" y="89.9586" font-family="Roboto" font-size="18.000000" text-anchor="end" alignment-baseline="middle" fill="#000000" fill-opacity="1.000000">2.4</text>
<path d=" M 156.145172 545.000000 L 156.145172 540.000000 M 277.977417 545.000000 L 277.977417 540.000000 M 399.809692 545.000000 L 399.809692 540.000000 M 521.641968 545.000000 L 521.641968 540.000000 M 643.474243 545.000000 L 643.474243 540.000000 M 75.000000 463.955597 L 80.000000 463.955597 M 75.000000 370.456360 L 80.000000 370.456360 M 75.000000 276.957092 L 80.000000 276.957092 M 75.000000 183.457855 L 80.000000 183.457855 M 75.000000 89.958618 L 80.000000 89.958618" stroke="#000000" stroke-opacity="1.000000" stroke-width="1.500000" fill-opacity="0"/>
<path d=" M 156.145172 60.000000 L 156.145172 540.000000 M 277.977417 60.000000 L 277.977417 540.000000 M 399.809692 60.000000 L 399.809692 540.000000 M 521.641968 60.000000 L 521.641968 540.000000 M 643.474243 60.000000 L 643.474243 540.000000 M 80.000000 463.955597 L 720.000000 463.955597 M 80.000000 370.456360 L 720.000000 370.456360 M 80.000000 276.957092 L 720.000000 276.957092 M 80.000000 183.457855 L 720.000000 183.457855 M 80.000000 89.958618 L 720.000000 89.958618" stroke="#ffffff" stroke-opacity="1.000000" stroke-width="1.500000" fill-opacity="0"/>
<text x="400" y="564" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="hanging" fill="#000000" fill-opacity="1.000000">f(x)</text>
<text x="0" y="0" font-family="Roboto" font-size="18.000000" text-anchor="middle" alignment-baseline="baseline" fill="#000000" fill-opacity="1.000000" transform="matrix(-4.37114e-08 -1 1 -4.37114e-08 48 300)">x</text>
<path d=" M 95.229019 491.958923 L 399.809662 455.155701 L 704.390320 211.321732" stroke="#1f77b4" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 434.484680 L 399.809662 457.817749 L 704.390320 213.194839" stroke="#ff7f0e" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 357.172302 L 399.809662 475.066223 L 704.390320 266.105713" stroke="#2ca02c" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 377.093811 L 399.809662 472.065063 L 704.390320 286.742371" stroke="#d62728" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 354.472565 L 399.809662 491.337555 L 704.390320 264.343384" stroke="#9467bd" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 252.719910 L 399.809662 532.798096 L 704.390320 244.720154" stroke="#8c564b" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 349.970520 L 399.809662 175.768646 L 704.390320 522.475220" stroke="#e377c2" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 147.550720 L 399.809662 338.680054 L 704.390320 516.216675" stroke="#7f7f7f" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 285.222321 L 399.809662 304.888855 L 704.390320 527.344788" stroke="#bcbd22" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 494.542969 L 399.809662 211.409210 L 704.390320 300.866669" stroke="#17becf" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 488.445862 L 399.809662 270.320068 L 704.390320 298.726135" stroke="#000000" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 458.036713 L 399.809662 234.206589 L 704.390320 432.459595" stroke="#ffffff" stroke-opacity="0.784314" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 504.613190 L 399.809662 166.679871 L 704.390320 365.146393" stroke="#a00094007fcea0009448" stroke-opacity="128.305882" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 460.196106 L 399.809662 192.756470 L 704.390320 349.198944" stroke="#a000a0007fce00" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 481.589874 L 399.809662 324.901581 L 704.390320 271.603180" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 395.156128 L 399.809662 376.290283 L 704.390320 418.731873" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 309.457520 L 399.809662 360.335541 L 704.390320 420.446625" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 308.374512 L 399.809662 370.461182 L 704.390320 431.931305" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 404.464935 L 399.809662 384.373383 L 704.390320 357.693420" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 418.774200 L 399.809662 351.069122 L 704.390320 502.532013" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 293.182861 L 399.809662 383.217133 L 704.390320 372.500732" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 473.311401 L 399.809662 411.729675 L 704.390320 333.774475" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 343.384583 L 399.809662 405.925629 L 704.390320 371.546295" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 321.867798 L 399.809662 418.225861 L 704.390320 368.277893" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 239.356720 L 399.809662 437.500580 L 704.390320 377.494415" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 263.679565 L 399.809662 423.887573 L 704.390320 417.979034" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 225.226395 L 399.809662 442.439636 L 704.390320 360.329041" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 404.205994 L 399.809662 455.877380 L 704.390320 347.584839" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 504.613190 L 399.809662 532.798096 L 704.390320 527.344788" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 147.550720 L 399.809662 166.679871 L 704.390320 211.321732" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 252.719910 L 399.809662 166.679871 L 704.390320 244.720154" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
<path d=" M 95.229019 69.621094 L 399.809662 226.227768 L 704.390320 445.078583" stroke="#000000" stroke-opacity="0.000000" stroke-width="3.000000" fill-opacity="0"/>
</svg>