Semantics Presentation e.g. 1

by Nivaldo

HTML

<svg width="1833" height="991" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs class="svg-crowbar"/>
    <defs>
        <marker id="end-arrow" viewBox="0 -5 10 10" refX="32" markerWidth="3.5" markerHeight="3.5" orient="auto">
            <path d="M0,-5L10,0L0,5"/>
        </marker>
        <marker id="mark-end-arrow" viewBox="0 -5 10 10" refX="7" markerWidth="3.5" markerHeight="3.5" orient="auto">
            <path d="M0,-5L10,0L0,5"/>
        </marker>
    </defs>
    <g class="graph" transform="translate(-68.60760333727455,41.555215633395505) scale(0.9163686446753512)">
        <path class="link dragline hidden" d="M705,372L705,372" style="marker-end: url(#mark-end-arrow);"/>
        <g>
            <path class="link" d="M305.01171875,372L469.37677001953125,238.45240783691406" style="marker-end: url(#end-arrow);"/>
            <path class="link" d="M305.01171875,372L470.6506042480469,369.1825256347656" style="marker-end: url(#end-arrow);"/>
            <path class="link" d="M305.01171875,372L469.4680480957031,500.8213806152344" style="marker-end: url(#end-arrow);"/>
            <path class="link" d="M211.6778564453125,111.18792724609375L305.01171875,372" style="marker-end: url(#end-arrow);"/>
            <path class="link" d="M469.37677001953125,238.45240783691406L705,372" style="marker-end: url(#end-arrow);"/>
            <path class="link" d="M470.6506042480469,369.1825256347656L705,372" style="marker-end: url(#end-arrow);"/>
            <path class="link" d="M469.4680480957031,500.8213806152344L705,372" style="marker-end: url(#end-arrow);"/>
            <path class="link" d="M211.6778564453125,111.18792724609375L651.5265502929688,57.32123565673828" style="marker-end: url(#end-arrow);"/>
            <path class="link" d="M945.0984191894531,115.47651672363281L744.8104400634766,56.682422041893005" style="marker-end: url(#end-arrow);"/>
            <path class="link"...

CSS

#title {
    font: bold 30px verdana;
}

circle {
    fill: lightsalmon;
    stroke: salmon;
    stroke-width: 3px;
}

text {
    font: bold 12px helvetica;
    fill: black;
    cursor: default;
}

text:hover {
    fill: red;
    font-size: 20px;
}

body { margin: 0px; padding: 0px; overflow: hidden; }
body { -webkit-user-select: none; background-color: linen; }

.conceptg text { pointer-events: none; }
marker { fill: steelblue; }
g.conceptg circle { fill: #f6fbff; stroke: #333333; stroke-width: 2px; }
g.conceptg:hover circle { fill: #c8eef1; }
g.selected circle { fill: #fae8ff; }
g.selected:hover circle { fill: #fae8ff; }
path.link { fill: none; stroke: steelblue; stroke-width: 6px; cursor: default; }
path.link:hover { stroke: red; }
g.connect-node circle { fill: #beffff; }
path.link.hidden { stroke-width: 0px; }
path.link.selected { stroke: #e5acf7; }

JavaScript

/*
d3.selectAll("text")
    .on("mouseover",mouseover)
    .on("mouseout",mouseout);

function mouseover() {
    d3.select(this)
        .style("font-size","20px")
        .style("fill","red");
};

function mouseout() {
    d3.selectAll("text")
        .style("font-size","12px")
        .style("fill","black");
};
*/
d3.select("svg").append("text").attr("id","title").attr("x",0).attr("y",30).text("PIxml Semantics Pathways");