codeart-examples/parse_repo/codeart.patch.html at master · vsoch/codeart-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <meta charset="utf-8">
    <title>CodeArt for .patch</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
    <style>
    #text {
       position: absolute;
       zindex: 1000;
       top: 25px;
       right: 50px;
    }
    </style>
</head>

<body>
<div id="plot"></div>
<div id="text"></div>

<script type="text/javascript" src="js/d3.v3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // Create canvas
    svg = d3.select("#plot")
      .append("svg")
      .attr("height","100%")
      .attr("width","100%")

    inputjson = {
    "bgcolor": "white",
    "image": []
}

    // Set the background color
    $("#body").css("background-color", inputjson.bgcolor);
    var data = inputjson.image
    // Create a brain path for each data element
    svg.selectAll("#body")
        .data(data)
        .enter()
        .append("svg:a")
            .attr("xlink:href",function(d){
                 return d.png
             })
             .attr("target","_blank")
        .append("svg:image")
            .attr("xlink:href", function(d){return d.png;})
            .attr("y", function(d){ return 5.5*d.y })
            .attr("x", function(d){ return 5.5*d.x })
            .attr("width", 50)
            .attr("height", 50)
        .on('mouseover', function(d){
            $("#text").html("CodeArt Generated with:<br>extension: " + d.ext + "<br> https://github.com/vsoch/codeart")
            console.log(d);
        })
});
</script>
</body></html>