index.html

---
layout: default
nocomments: true
---
<div id="frontcontent" class="pageband">
	
	<section class="content">
		<table class="hero">
			<tr>
				<td><a href="/vis/code-ownership-distribution-map/"><img src="/assets/images/hero-code-ownership-distribution-map.png"></a></td>
				<td><a href="/vis/toxicity-chart"><img src="/assets/images/hero-placeholder-toxicity.png"></a></td>
				<td><a href="/vis/checkin-sparklines/"><img src="/assets/images/hero-checkin-sparklines.png"></a></td>
			</tr>
			<tr>
				<td><a href="/vis/codecity"><img src="/assets/images/hero-placeholder-codecity.png"></a></td>
				<td><a href="/vis/dependency-structure-matrix/"><img src="/assets/images/hero-dependency-structure-matrix.png"></a></td>
				<td><a href="/vis/hotspot-diagram"><img src="/assets/images/hero-placeholder-polymetrics.png"></a></td>
			</tr>
		</table>

		<p>With this website we want to make software visualization more accessible. The collection contains a growing number of visualizations showcasing different kinds of visualization techniques and different areas of application. We hope that the visualizations are useful and easily reproducible in many environments. <i>&mdash; Erik D&ouml;rnenburg &amp; Jonathan McCracken</i>
	</section>

	<section id="teaser" class="content">
		<div class="teaserbox">
			<h2>About</h2>
			<p>Why do we care about software visualisations? What can pretty pictures tell us that code and logfiles can't? The answer to these questions lies in scale. Software systems and their development projects have become so large that it has become near impossible to understand them at a high level without additional artefacts.
			<p>
			<p><a href="/about">continue &rarr;</a>
			<h2>Featured</h2>
			<p>The <a href="/vis/code-ownership-distribution-map/">Code Ownership Distribution Map</a> provides a unique view into the ownership of code on a project. Does the team practice collective code ownership? Do individual authors work in silos? Where do others contribute? The source code management system contains the answers but it takes a map like this to surface the information.
			<p><a href="/vis/code-ownership-distribution-map/">read more &rarr;</a>
		</div>

		<div class="teaserbox">
			<h2>Site news</h2>
			{% for post in site.posts limit: 3 %}
			<article>
				<h3 class="with-info">{{ post.title }}</h3>
				<p class="info">{{ post.date | date:"%d %b %Y" }}
				{{ post.content }}
			</article>
			{% endfor %}
			<p><a href="/news">more news &rarr;</a>
		</div>

		<div class="teaserbox">
			<h2>Github repos</h2>
		    <div id="githubrepos">
		    	<p class="loading">Updating...</li>
		    </div>
			<p><a href="http://github.com/softvis/">all repositories &rarr;</a>
		    <script type="text/javascript">
		      $(document).ready(function(){
		          github.showRepos({
		              user: '{{site.github_user}}',
		              count: 4,
		              skip_forks: false,
		              target: '#githubrepos'
		          });
		      });
		    </script>
		    <script src="{{ root_url }}/assets/scripts/github.js" type="text/javascript"> </script>
		</div>
	</section>

</div>