<!doctype html>
<html lang="en">
	<head>
  	<meta charset="utf-8">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  	<meta name="viewport" content="width=device-width, initial-scale=1">

  	<title>Associative Trails - We develop bespoke web and mobile applications</title>
  	<meta name="description" content="Associative Trails is a boutique internet consultancy based on the high-speed rail link in East Kent, UK. We take pride in crafting web and mobile applications that save time and make money for our clients.">
  	<meta name="keywords" content="Matt, Perdeaux, web development, content management, CMS, HTML, CSS, web standards, responsive design, Coldfusion, CFML, SQL Server, Intranet, Python, Django, d3, dataviz" />

  	<link rel="stylesheet" href="/assets/css/screen.css">
	<link rel="canonical" href="https://www.associativetrails.com/">
	
	<meta name="twitter:card" content="summary" />
	<meta name="twitter:site" content="@MattAssocTrails" />
	<meta name="twitter:creator" content="@MattAssocTrails" />
	<meta property="og:url" content="https://www.associativetrails.com/" />
	<meta property="og:title" content="Associative Trails - We develop bespoke web and mobile applications" />
	<meta property="og:description" content="Associative Trails is a boutique internet consultancy based on the high-speed rail link in East Kent, UK. We take pride in crafting web and mobile applications that save time and make money for our clients." />
	<meta property="og:image" content="https://www.associativetrails.com/assets/img/project/oldarupians-home.png" />
</head>


  	<body>
    	<div class="mb-3 bg-white border-bottom box-shadow sticky-top">
            <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 limit-page-width">
                <h5 class="my-0 mr-md-auto font-weight-normal"><a href="/"><img src="/assets/img/site/logo.png" style="width: 250px;" alt="Associative Trails"></a></h5>
                <nav class="my-2 my-md-0 mr-md-3">
                    
                        <a class="p-2 text-dark" href="/about">About us</a>
                        <a class="p-2 text-dark" href="/work">Our work</a>
                        <a class="p-2 text-dark" href="/contact">Contact us</a>
                    
                </nav>
            </div>
        </div>
        
        <div class="div-page-section"><div class="limit-page-width">
    <div class="p-3 p-md-5">
        <div class="col-md-10 col-xl-6 p-lg-2 mx-auto my-1">
            <h1 class="display-4 font-weight-normal">We&nbsp;develop bespoke web and mobile applications</h1>
        </div>
    </div>
</div></div>

<div class="div-page-section"><div class="limit-page-width">
    <div class="p-3 p-md-5">
        <div class="col-md-10 col-xl-6 p-lg-2 mx-auto my-1">
            <h3 class="font-weight-normal">Associative Trails is a boutique internet consultancy based on the high-speed rail link in East Kent, UK. We take pride in crafting web and mobile applications that save time and make money for our&nbsp;clients.</h3>
            <p class="font-weight-normal">Our small size makes us great value for money. Please get in touch to arrange a free, no obligation consultation to discuss your&nbsp;requirements.</p>
            <a class="btn btn-outline-secondary click-replace-spinner" href="/contact" role="button"><i class="fas fa-envelope"></i>&nbsp;Get in touch</a>
        </div>
    </div>
</div></div>
        
<div class="div-page-section div-page-section-orange"><div class="limit-page-width">
    <div class="p-3 p-md-5">
        <div class="col-md-10 col-xl-6 p-lg-2 mx-auto my-1"> 
            
            <h2>Services</h2>
            <div class="div-services">
                <ul class="list-unstyled">
                    <li class="media">
                        <span><i class="fas fa-desktop fa-3x"></i></span>
                        <div class="media-body">
                            <h5>Dynamic server-side programming</h5>
                            <a href="/about/pythondjangodevelopers">Python</a>, 
                            <a href="/about/pythondjangodevelopers">Django</a>, 
                            <a href="/about/coldfusiondevelopers">Coldfusion</a>, <a href="/about/intranetdevelopment">custom intranets</a>, <a href="/about/cmsdevelopment">bespoke content management systems</a>
                        </div>
                    </li>

                    <li class="media">
                        <span><i class="fas fa-database fa-3x"></i></span>
                        <div class="media-body">
                            <h5>Databases</h5>
                            SQL Server, MySQL, PostreSQL
                        </div>
                    </li>

                    <li class="media">
                        <span><i class="fas fa-code fa-3x"></i></span>
                        <div class="media-body">
                            <h5>Quality front-end coding</h5>
                            HTML, CSS, Javascript, <a href="/about/responsivedesign">responsive design</a>, D3 data visualisation
                        </div>
                    </li>

                    <li class="media">
                        <span><i class="fas fa-mobile-alt fa-3x"></i></span>
                        <div class="media-body">
                            <h5>Mobile applications</h5>
                            HTML5, Apple iOS (<a href="/about/iphonedeveloperskent">iPhone</a> and <a href="/about/ipaddeveloperskent">iPad</a>), 
                            <a href="/about/androiddeveloperskent">Android</a>
                        </div>
                    </li>

                    <li class="media">
                        <span><i class="fas fa-server fa-3x"></i></span>
                        <div class="media-body">
                            <h5>Hosting and deployoment</h5>
                            Linux, Windows, Apache, IIS, AWS Elastic Beanstalk, AWS Lambda
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div></div>

<div class="div-page-section"><div class="limit-page-width">
    <div class="p-3 p-md-5">
        <div class="col-md-10 col-xl-6 p-lg-2 mx-auto my-1"> 
            <h2>Selected projects</h2>                    
            <div class="row">
                <div class="col-sm-6">
                    <div class="card mt-3">
                        
                        <a href="/work/oldarupians"><img class="card-img-top" src="/assets/img/project/promo-oldarupians2019.png" alt="Old Arupians Community Website&nbsp;(2019)" title="Old Arupians Community Website&nbsp;(2019)"></a>
<div class="card-body">
    <h5 class="card-title"><a href="/work/oldarupians">Freshening community fellowship</a></h5>
    <p class="card-text d-none d-lg-block">A thorough refresh of one of our most venerable and successful&nbsp;projects. Now fully responsive and even easier to use.</p>
    <a href="/work/oldarupians" class="btn btn-outline-secondary click-replace-spinner"><i class="fas fa-arrow-alt-circle-right"></i>&nbsp;Read more</a>
</div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="card mt-3">
                        
                        <a href="/work/heatherwiki"><img class="card-img-top" src="/assets/img/project/promo-heatherwick.jpg" alt="Heatherwick Studio Intranet" title="Heatherwick Studio Intranet"></a>
<div class="card-body">
    <h5 class="card-title"><a href="/work/heatherwiki">Digging that studio scene</a></h5>
    <p class="card-text d-none d-lg-block">A bespoke company intranet for one of the UK's top design&nbsp;studios.</p>
    <a href="/work/heatherwiki" class="btn btn-outline-secondary click-replace-spinner"><i class="fas fa-arrow-alt-circle-right"></i>&nbsp;Read more</a>
</div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="card mt-3">
                        
                        <a href="/work/scottbrownriggcompass"><img class="card-img-top" src="/assets/img/project/promo-scott-brownrigg-compass.jpg" alt="Scott Brownrigg Compass" title="Scott Brownrigg Compass"></a>
<div class="card-body">
    <h5 class="card-title"><a href="/work/scottbrownriggcompass">Effective portal enhancement</a></h5>
    <p class="card-text d-none d-lg-block">An updated bespoke company information portal. Fully responsive, very well-connected.</p>
    <a href="/work/scottbrownriggcompass" class="btn btn-outline-secondary click-replace-spinner"><i class="fas fa-arrow-alt-circle-right"></i>&nbsp;Read more</a>
</div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="card mt-3">
                        
                        <a href="/work/lbsknowledge"><img class="card-img-top" src="/assets/img/project/promo-callimachus.jpg" alt="London&nbsp;Business School Knowledge&nbsp;Capture" title="London&nbsp;Business School Knowledge&nbsp;Capture"></a>
<div class="card-body">
    <h5 class="card-title"><a href="/work/lbsknowledge">Ravishing reading lists</a></h5>
    <p class="card-text d-none d-lg-block">Knowledge capture and sharing with a difference</p>
    <a href="/work/lbsknowledge" class="btn btn-outline-secondary click-replace-spinner"><i class="fas fa-arrow-alt-circle-right"></i>&nbsp;Read more</a>
</div>
                    </div>
                </div>
            </div>            
        </div>
    </div>
</div></div>
        
<div class="div-page-section div-page-section-blue"><div class="limit-page-width">
    <div class="p-3 p-md-5">
        <div class="col-md-10 col-xl-6 p-lg-2 mx-auto my-1"> 
            <div class="row">
                <div class="col-sm-6">
                    <h2>Selected clients</h2>
                    <ul>
                        <li>Arup</li>
                        <li>Ashridge Business School</li>
                        <li>Eckersley O'Callaghan</li>
                        <li>Ellipse</li>
                        <li>Heatherwick Studio</li>
                        <li>London Business School</li>
                        <li>Northdoor</li>
                        <li>Safetime</li>
                        <li>Scott Brownrigg</li>
                        <li>Sheppard Robson</li>
                    </ul>
                </div>
                <div class="col-sm-6">
                    <h2>Elsewhere</h2>
		            <ul>
		                <li>LinkedIn</li>
		                <li>Twitter</li>
		                <li>Facebook</li>
		            </ul>
		        </div>
		    </div>
		</div>
    </div>
</div></div>

<div class="div-page-section"><div class="limit-page-width">
    <div class="p-3 p-md-5">
        <div id="viz" style="width: 100%; height: 80vh; text-align: center;"></div>
    </div>
</div></div>
    	
        <div style="display: none;"><i class="fas fa-spinner fa-spin"></i></div>
        
        <script src="https://kit.fontawesome.com/02f911429f.js"></script>
    	<script type="text/javascript" src="/assets/js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="/assets/js/bootstrap.bundle.min.js"></script>
		
			<script type="text/javascript" src="/assets/js/d3.min.js"></script>
		

     	<script type="text/javascript">
     		//<![CDATA[

            $(document).ready(function() {
                $('a[rel*="external"]').click(function(){ this.target = "_blank"; });

                $(".jump-to-top").on('click',function(e) {
                    e.preventDefault();
                    $('html, body').animate({
                        scrollTop: 0
                    }, 1000);
                });

                $(".jump-to-bottom").on('click',function(e) {
                    e.preventDefault();
                    $('html, body').animate({
                        scrollTop: $(document).height()
                    }, 1000);
                });

                $(".click-replace-spinner").on('click',function(e) {
                    $(this).find("i:first").attr("class","fas fa-spinner fa-spin");
                });

                $(".click-replace-spinner-validation").on('click',function(e) {
                    var $myForm = $(this).closest("form");
                    if($myForm[0].checkValidity()) {
                        $(this).find("i:first").attr("class","fas fa-spinner fa-spin");
                    }
                });

                

             });

            
     			var jsonProjects = {'projects':[ {'title': 'Old Arupians (2019)', 'id': 'oldarupians2019' }, {'title': 'Scott Brownrigg Compass', 'id': 'scottbrownriggcompass' }, {'title': 'Heatherwick Studio Intranet', 'id': 'heatherwickintranet' }, {'title': 'London Business School Knowledge', 'id': 'lbsknowledge' }, {'title': 'Safetime CBC', 'id': 'safetimecbc'}, {'title': 'Ellipse CMS', 'id': 'ellipsecms'}, {'title': 'Scott Brownrigg iOS App', 'id': 'scottbrownriggapp'}, {'title': 'Scott Brownrigg Intranet', 'id': 'scottbrownriggintranet'}, {'title': 'Grant Thornton Events', 'id': 'grantthorntonevents'}, {'title': 'Last.fm Normaliser', 'id': 'normaliser'}, {'title': 'Croxley Rail Link CMS', 'id': 'croxleycms'}, {'title': 'Scott Brownrigg SPiDER', 'id': 'scottbrownriggspider'}, {'title': 'Ashridge Business Perspectives', 'id': 'perspectives'}, {'title': 'Northdoor CMS', 'id': 'northdoorcms'}, {'title': 'Arup Website CMS', 'id': 'arupcms'}, {'title': 'Sheppard Robson Intranet', 'id': 'sheppardrobsonintranet'}, {'title': 'Sheppard Robson CRM', 'id': 'sheppardrobsoncrm'}, {'title': 'Arup contacts and events', 'id': 'arupcontacts'}, {'title': 'Old Arupians community (2006)', 'id': 'oldarupians2006'}, {'title': 'Arup collateral store', 'id': 'arupcollateral'} ]};
var jsonTags = {'tags': [ {'title': 'Adobe Coldfusion', 'id': 'coldfusion', 'projects': ['scottbrownriggcompass','heatherwickintranet','safetimecbc','ellipsecms','scottbrownriggintranet','grantthorntonevents','scottbrownriggspider','northdoorcms','arupcms','sheppardrobsonintranet','sheppardrobsoncrm','arupcontacts','oldarupians2006','arupcollateral']}, {'title': 'AWS', 'id': 'aws', 'projects': ['oldarupians2019','lbsknowledge','safetimecbc']}, {'title': 'Microsoft SQL Server', 'id': 'sqlserver', 'projects': ['scottbrownriggcompass','heatherwickintranet','safetimecbc','ellipsecms','scottbrownriggintranet','grantthorntonevents','scottbrownriggspider','northdoorcms','arupcms','sheppardrobsonintranet','sheppardrobsoncrm','arupcontacts','oldarupians2006','arupcollateral']}, {'title': 'Education', 'id': 'education', 'projects': ['lbsknowledge','perspectives']}, {'title': 'MySQL/PostgreSQL', 'id': 'mysql', 'projects': ['oldarupians2019','lbsknowledge','normaliser','croxleycms','perspectives']}, {'title': 'Construction', 'id': 'construction', 'projects': ['oldarupians2019','scottbrownriggcompass','heatherwickintranet','safetimecbc','scottbrownriggapp','scottbrownriggintranet','croxleycms','scottbrownriggspider','arupcms','sheppardrobsonintranet','sheppardrobsoncrm','arupcontacts','oldarupians2006','arupcollateral']}, {'title': 'Android', 'id': 'android', 'projects': ['safetimecbc']}, {'title': 'Bespoke CMS', 'id': 'bespokecms', 'projects': ['oldarupians2019','safetimecbc','ellipsecms','croxleycms','northdoorcms','arupcms']}, {'title': 'Intranet', 'id': 'intranet', 'projects': ['scottbrownriggcompass','heatherwickintranet','scottbrownriggintranet','grantthorntonevents','scottbrownriggspider','sheppardrobsonintranet','sheppardrobsoncrm','arupcontacts','arupcollateral']}, {'title': 'Apple iOS', 'id': 'appleios', 'projects': ['scottbrownriggapp']}, {'title': 'Python', 'id': 'python', 'projects': ['oldarupians2019','lbsknowledge','ellipsecms','normaliser','croxleycms','perspectives']}, {'title': 'Django', 'id': 'django', 'projects': ['oldarupians2019','lbsknowledge','normaliser','croxleycms','perspectives']} ] }

tagViz(document.getElementById("viz"), jsonTags, jsonProjects);

function tagViz(divViz, tagData, projectData) {
    var diameter = Math.min(divViz.clientWidth, divViz.clientHeight);
    var projectCircleRadius = 25;

    function findProjectTags(project_id) {
        var id = project_id.replace("project-", "");
        var arReturn = [];
        var arMatchingTags = tagData.tags.filter(function(tag) {
            return tag.projects.some(function(project) { return project == id });
        });
        arMatchingTags.forEach(function(tag) { arReturn.push(tag.id); });
        return arReturn;
    }

    function projectCircleCentre(i, customRadius) { 
        var x0 = diameter/2;
        var y0 = diameter/2;
        var r = customRadius || (diameter/2 - projectCircleRadius - 35);

        var items = projectData.projects.length;

        var a = (2 * Math.PI * i / items) - (Math.PI/2);    // Subtract 90 degrees so projects start at the top
        var x = x0 + r * Math.cos(a);
        var y = y0 + r * Math.sin(a); 
        

        return [x,y,a,r];
    }

    var outerRadius = diameter / 4;
    var innerRadius = (diameter / 6);
    var arc = d3.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);

    var pie = d3.pie()
                .startAngle(-90 * Math.PI/180)
                .endAngle(-90 * Math.PI/180 + 2*Math.PI)
                .sort(null)
                .padAngle(.03)
                .value(function(d) { return d.projects.length; });

    var color = d3.scaleOrdinal(["#969696","#737373","#525252"]);

    var svg = d3.select(divViz)
        .append("svg")
        .attr("width", diameter)
        .attr("height", diameter)
        .attr("class", "viz");

    var tagArcs = svg.selectAll("g.arc")
                    .data(pie(jsonTags.tags))
                    .enter()
                        .append("g")
                        .attr("id", function(d, i) {
                            return 'arc-' + d.data.id;
                        })  
                        .attr("class", "arc")
                        .attr("transform", "translate(" + diameter/2 + "," + diameter/2 + ")");

    tagArcs.append("path")
                .attr("class", "arc-path")
                .attr("id", function(d, i) {
                    return 'arc-path-' + d.data.id;
                })
                .attr("fill-opacity", "0")
                .style("stroke", "#333")
                .style("stroke-width", "5px")
                .attr("d", arc);

    // Need a special path for the circular arc for the tag labels. Originally from https://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html Nadieh rocks!
    tagArcs.append("path")
        .attr("class", "arc-text-path")
        .attr("id", function(d, i) {
                    return 'arc-text-path-' + d.data.id;
                })
        .attr("d", function(d, i) {
            var firstArcSection = /(^.+?)L/;
            var newArc = firstArcSection.exec( d3.select(this.parentNode).selectAll(".arc-path").attr("d") )[1];
            newArc = newArc.replace(/,/g , " ");

            // Calculate new start and end points of the path (one radian either side of centre point) to ensure labels wider than their correpsonding arcs are not clipped
            var centreAngle = (d.startAngle*1.0) + ((d.endAngle*1.0 - d.startAngle*1.0)/2); //radians
            var x1 = outerRadius * Math.sin(centreAngle-1);
            var y1 = (outerRadius * Math.cos(centreAngle-1))*-1;
            var x2 = outerRadius * Math.sin(centreAngle+1);
            var y2 = (outerRadius * Math.cos(centreAngle+1))*-1;
            
            var middleLoc = /A(.*?)0 0 1/;
            var middleSec = middleLoc.exec( newArc )[1];
            newArc = "M" + x1 + " " + y1 + "A" + middleSec + "0 0 1 " + x2 + " " + y2;

            // Flip round labels on the bottom half
            if (d.endAngle > 90 * Math.PI/180) {
                var startLoc = /M(.*?)A/;
                var endLoc = /0 0 1 (.*?)$/;
                var newStart = endLoc.exec( newArc )[1];
                var newEnd = startLoc.exec( newArc )[1];
                newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd;
            }

            return newArc;

        })
        .style("fill", "none");


    tagArcs.append("text")
                .attr("dy", function(d,i) {
                    return (d.endAngle > 90 * Math.PI/180 ? 25 : -15);
                })
                .attr("id", function(d, i) {
                    return 'arc-text-path-text-' + d.data.id;
                })
                .attr("class", "arc-text-path-text")
                .append("textPath")
                .attr("xlink:href",function(d,i){return "#arc-text-path-"+d.data.id;})
                .attr("startOffset","50%")
                .style("text-anchor","middle")
                .text(function(d) {
                    return d.data.title;
                });


    var projectCircles = svg.selectAll("circle")
                            .data(projectData.projects)
                            .enter()
                                .append("circle")
                                .attr("class", "circle-project")
                                .attr("id", function(d, i) {
                                    return 'project-' + d.id;
                                })
                                .attr("fill-opacity", "0")
                                .style("stroke", "#333")
                                .style("stroke-width", "5px");

    projectCircles.attr("cx", function(d, i) { return projectCircleCentre(i)[0]; })
       .attr("cy", function(d, i) { return projectCircleCentre(i)[1]; })
       .attr("r", projectCircleRadius);


    var projectTitles = svg.selectAll("g.projectTitle")
                    .data(projectData.projects)
                    .enter()
                        .append("g")
                        .attr("id", function(d, i) {
                            return 'project-title-g-' + d.id;
                        })  
                        .attr("class", "project-title-g");

    projectTitles.append("path")
        .attr("class", "project-title-g-path")
        .attr("id", function(d, i) {
                    return 'project-title-g-path-' + d.id;
                })
        .attr("d", function(d, i) {
            var centreAngle = projectCircleCentre(i)[2] + (Math.PI/2);  //radians rotated 90 degrees clockwise
            var titleRadius = projectCircleCentre(i)[3];    
            var x1 = titleRadius * Math.sin(centreAngle-1);
            var y1 = (titleRadius * Math.cos(centreAngle-1))*-1;
            var x2 = titleRadius * Math.sin(centreAngle+1);
            var y2 = (titleRadius * Math.cos(centreAngle+1))*-1;
            
            var titleArc = "M" + x1 + " " + y1 + "A" + titleRadius + " " + titleRadius + " 0 0 1 " + x2 + " " + y2;

            // Flip round labels on the bottom half
            if ( (centreAngle > Math.PI/2) && (centreAngle < Math.PI*1.5) ) {
                var startLoc = /M(.*?)A/;
                var endLoc = /0 0 1 (.*?)$/;
                var middleLoc = /A(.*?)0 0 1/;
                var newStart = endLoc.exec( titleArc )[1];
                var middleSec = middleLoc.exec( titleArc )[1];
                var newEnd = startLoc.exec( titleArc )[1];
                titleArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd;
            }

            return titleArc;

        })
        .attr("transform", "translate(" + diameter/2 + "," + diameter/2 + ")")
        .style("fill", "none");

    projectTitles.append("text")
                .attr("dy", function(d,i) {
                    var centreAngle = projectCircleCentre(i)[2] + (Math.PI/2);  //radians rotated 90 degrees clockwise
                    var unadjustedPosition = ( (centreAngle > Math.PI/2) && (centreAngle < Math.PI*1.5) ) ? 50 : -50;
                    return ((i % 2) > 0) ? unadjustedPosition : -1*unadjustedPosition;
                })
                .attr("id", function(d, i) {
                    return 'project-title-g-path-text-' + d.id;
                })
                .attr("class", "project-title-g-path-text")
                .append("textPath")
                .attr("xlink:href",function(d,i){return "#project-title-g-path-"+d.id;})
                .attr("startOffset","50%")
                .style("text-anchor","middle")
                .text(function(d) {
                    return d.title;
                });

    
    $(".arc").hover(
        function() {
            var tag_id = $(this).attr("id");
            var tag_data = d3.select(this).datum();
            
            d3.selectAll(".arc").classed("arc-path-fade", true);
            d3.selectAll(".arc-text-path-text").classed("arc-text-fade", true);
            d3.selectAll(".circle-project").classed("circle-project-fade", true);
            tag_data.data.projects.map( function(project_id) {
                d3.select("#project-"+project_id).classed("circle-project-hover", true);
                d3.select("#project-title-g-path-text-"+project_id).classed("circle-project-hover", true);
                d3.select("#arc-text-path-text-"+tag_data.data.id).classed("arc-path-hover", true);
            });

        }, 
        function() {
            var tag_id = $(this).attr("id");
            
            d3.selectAll(".arc").classed("arc-path-fade", false);
            d3.selectAll(".circle-project").classed("circle-project-fade", false);
            d3.selectAll(".circle-project").classed("circle-project-hover", false);
            d3.selectAll(".project-title-g-path-text").classed("circle-project-hover", false);
            d3.selectAll(".arc-text-path-text").classed("arc-path-hover", false);
            d3.selectAll(".arc-text-path-text").classed("arc-text-fade", false);
        }
    );

    $(".circle-project").hover(
        function() {
            var project_id = $(this).attr("id").replace("project-", "");
            var arTags = findProjectTags(project_id);
            
            d3.selectAll(".arc").classed("arc-path-fade", true);
            d3.selectAll(".circle-project").classed("circle-project-fade", true);
            d3.selectAll(".arc-text-path-text").classed("arc-text-fade", true);
            d3.select("#project-title-g-path-text-"+project_id).classed("circle-project-hover", true);
            arTags.map( function(tag_id) {
                d3.select("#arc-path-"+tag_id).classed("arc-path-hover", true);
                d3.select("#arc-text-path-text-"+tag_id).classed("arc-path-hover", true);
            });

        }, 
        function() {
            var project_id = $(this).attr("id");
            
            d3.selectAll(".arc").classed("arc-path-fade", false);
            d3.selectAll(".arc-path").classed("arc-path-hover", false);
            d3.selectAll(".circle-project").classed("circle-project-fade", false);
            d3.selectAll(".circle-project").classed("circle-project-hover", false);
            d3.selectAll(".arc-text-path-text").classed("arc-path-hover", false);
            d3.selectAll(".arc-text-path-text").classed("arc-text-fade", false);
            d3.selectAll(".project-title-g-path-text").classed("circle-project-hover", false);
        }
    );
}
     		

            //]]>
     	</script>
 		
  	</body>
</html>