38 lines
4.3 KiB
HTML
38 lines
4.3 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<title>Zk | 2010-11-01 10:12:04</title>
|
||
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||
<meta name="viewport" content="width=device-width" />
|
||
<meta charset="utf-8" />
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<header>
|
||
<h1>Zk | 2010-11-01 10:12:04</h1>
|
||
</header>
|
||
<article class="content">
|
||
<p><span class="tag">blog</span> <span class="tag">fossil</span> <span class="tag">diary</span></p>
|
||
<p>I just realized that I posted this to Twitter and not anywhere else; whoops!</p>
|
||
<p>Anyhow, I’m an avid reader of <a href="http://flowingdata.com">FlowingData</a>, because Nathan Yau, the man behind it, does some pretty awesome stuff. Â His visualizations are clear and still aesthetically pleasing, and his concepts are always nice. Â Of particular interest to me, when I first started reading, was <a href="http://your.flowingdata.com">your.flowingdata</a> which is a means to track your own life through Twitter - for example, you can tell it when and how far you ride your bike every day and have it automatically generate a visualization of distances ridden over time.</p>
|
||
<p>Recently, however, he posted a little challenge of sorts. Â Given a dataset, we, the readers, were to visualize it our own way and draw some conclusions from our visualizations (that, after all, being the point of visualizations). Â I’d never done anything like that before for various reasons. Â I didn’t want to learn a new domain-specific language such as R that would then require me to edit my results in the form of an image in some other program such as Gimp or Inkscape. Â Also, Gimp and Inkscape have some quirks that I’m still learning, and I didn’t want to have to chose between learning those and buying Adobe CS. Â However, I have been working quite a bit with Javascript recently, so it seemed to make sense that, when I found two libraries - <a href="http://code.google.com/p/flot/">Flot</a> and <a href="http://vis.stanford.edu/protovis/">Protovis</a> - for visualization in JS that I go ahead and use one of these ‘Visualize This’ challenges to learn one of them. Â It’ll definitely be helpful in the future.</p>
|
||
<p>The most recent <a href="http://flowingdata.com/2010/10/20/visualize-this-sexual-health-data-from-national-survey/">challenge</a> was visualizing data from the National Survey of Sexual Health and Behavior. Â Given a small set of data - percentage of respondents in different age groups admitting to engaging in nine different behaviors over the past year - I worked hard to learn Protovis from scant documentation in order to pull together a visualization. Â Since it takes place over three ‘slides’ and has text to go along with it, I’ll let it speak for itself <a href="http://mjs-svc.com/rand-bin/sex/">here</a>.</p>
|
||
<!--more-->
|
||
|
||
<p>I think I did fairly well, given the fact that I wound up doing exactly what I didn’t really want to - learn a new DSL. Â Granted, this one will be useful in my web design in the future! Â With the time limitation of a due date and the fact that I was learning as I went, I didn’t quite pull off exactly what I wanted, and the trends I was interested in looking after weren’t as apparent I was hoping. Â The problem was mostly due to inadequate documentation on Protovis - much of the documentation that wasn’t simply API documentation was either examples or brief write-ups about concepts in statistics as the applied to Protovis. Â I learned most from the examples, after I learned some of the basics from the API docs.</p>
|
||
<p>I’ll probably find another dataset somewhere that interests me in order to visualize it soon, but I also expect that I’ll be implementing the visualization process in my own projects as well. Â I’ve got <em>lots</em> of ideas.</p>
|
||
</article>
|
||
<footer>
|
||
<p>Page generated on Data Visualization: Aging Sexuality</p>
|
||
</footer>
|
||
</main>
|
||
<script type="text/javascript">
|
||
document.querySelectorAll('.tag').forEach(tag => {
|
||
let text = tag.innerText;
|
||
tag.innerText = '';
|
||
tag.innerHTML = `<a href="/tags.html#${text}">${text}</a>`;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|