Skip to content

Instantly share code, notes, and snippets.

@thedod
Created September 9, 2011 15:08
Show Gist options
  • Save thedod/1206472 to your computer and use it in GitHub Desktop.
Save thedod/1206472 to your computer and use it in GitHub Desktop.
svg template for @c2graph (enhances reVerb text contrast)

Pulled wlwardiary's latest template where reVerb extractions are only visible on mouse over. Pretty slick.

This svg template shows everything quite gray and transparent, and gives the reVerb text maximum opacity and colors [not necessarily nice ones. I'm color blind] to enhance contrast.

Usage: python g2svg.py -t contrast4reverb.tmpl ...

<html>
<head>
<style type="text/css">
svg { background-color: rgb(55,55,55); }
#vertices circle {
stroke: rgba(255,255,255,0.8);
stroke-width: 1;
fill: rgba(255,255,255,0.5);
}
#vertices .red circle {
fill: rgba(255,0,0,0.5);
}
#vertices text {
text-anchor: middle;
font-size: 1em;
font-weight: normal;
font-family: sans-serif;
fill: rgba(255,255,255,0.8);
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px ;
}
#vertices text:hover {
font-size: 1.4em;
fill: rgba(255,255,255,1.0);
text-shadow: rgba(0, 0, 0, 1) 2px 2px 10px ;
}
#vertices .red text:hover {
text-shadow: rgba(255, 0, 0, 1) 2px 2px 10px ;
}
#vertices text.sentence {
text-anchor: start;
font-size: 0.5em;
}
#vertices text.sentence:hover {
font-size: 1em;
}
#vertices text.sentence tspan.a1 {
fill: rgba(255,255,127,1);
}
#vertices text.sentence tspan.rel {
fill: rgba(255,255,255,1);
}
#vertices text.sentence tspan.a2 {
fill: rgba(127,255,255,1);
}
#edges line {
fill: none;
stroke-linejoin: round;
stroke-width: 5;
stroke: rgba(255,255,255,0.25);
z-index: -1;
}
#edges line:hover {
stroke-width: 10;
stroke: rgba(255,255,255,0.8);
}
</style>
</head>
<body>
<svg width="{{ width }}" height="{{ height }}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate({{ xw }},{{ xh }}) scale(0.9)">
<g id="edges">
{% for e in edges %}
<line x1="{{e.x1}}" y1="{{e.y1}}" x2="{{e.x2}}" y2="{{e.y2}}" />
{% endfor %}
</g>
<g id="vertices">
{% for v in vertices %}
<g transform="translate({{ v.x }} {{ v.y }})" class="{{ v.class }}">
<circle cx="0" cy="0" r="10" />
{% if v.class == 'red' %}
<text x="0" y="5">{{ v.label }}</text>
{% else %}
<text x="0" y="5" class="label">
<a xlink:href="{{v.uri}}">{{ v.label }}</a>
</text>
{% for s in v.sentences %}
<text x="-200" y="{{ loop.index * 20 }}" class="sentence">
<tspan class="a1">{{ s.a1 }}</tspan>
<tspan class="rel">{{ s.rel }}</tspan>
<tspan class="a2">{{ s.a2 }}</tspan>
</text>
{% endfor %}
{% endif %}
</g>
{% endfor %}
</g>
</g>
</svg>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment