Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

new post

  • Loading branch information...
commit 0f79063cc5751733cb6837fc7f6aaa1ccc8823a7 1 parent f828e9a
@sboak authored
Showing with 156 additions and 12 deletions.
  1. +44 −0 _posts/2011-08-23-css3-radios.textile
  2. +77 −11 atom.xml
  3. +35 −1 css/screen.css
View
44 _posts/2011-08-23-css3-radios.textile
@@ -0,0 +1,44 @@
+---
+layout: post
+title: "CSS3 Radio Buttons & Checkboxes"
+---
+
+h1. "{{ page.title }}":{{ page.url }}
+
+Restyling form elements is usually pretty painful, requiring javascript and some ugly CSS - so when I stumbled across this solution the other day I was impressed:
+
+<div class="css3_menu">
+ <label class="heading">Radios:</label>
+ <div class="buttonset" id="display_direction">
+ <input type="radio" name="option" id="option1"/><label for="option1">Radio 1</label><input type="radio" name="option" id="option2"/><label for="option2">Radio 2</label><input type="radio" name="option" checked="checked" id="option3"/><label for="option3">Radio 3</label>
+ </div>
+</div>
+
+<div class="css3_menu">
+ <label class="heading">Checks:</label>
+ <div class="buttonset" id="display_direction">
+ <input type="checkbox" name="check" id="check1"/><label for="check1">Check 1</label><input type="checkbox" name="check" id="check2"/><label for="check2">Check 2</label><input type="checkbox" name="check" checked="checked" id="check3"/><label for="check3">Check 3</label>
+ </div>
+</div>
+
+It's a pure CSS3 override of radio button and checkbox styles - no javascript, no unnecessary styling or tricks in the markup.
+
+
+It's a pretty simple trick - you just hide the radio button itself and conditionally style its label when selected. In the markup, just make sure each input element has a label associated with it using the "for" attribute like so:
+
+pre. <input type="radio" name="option" id="option1"/>
+<label for="option1">Option 1</label>
+
+And use the following CSS to hide the radio button or checkbox and style the label when the input element is "checked":
+
+pre. .css3_menu .buttonset input[type=radio],
+.css3_menu .buttonset input[type=checkbox] {
+ display: none;
+}
+.css3_menu .buttonset input[type=radio]:checked + label,
+.css3_menu .buttonset input[type=checkbox]:checked + label {
+ background-color: #0FB913;
+ color: white;
+}
+
+I've put the complete example code on "JSFiddle":http://jsfiddle.net/stephenboak/fUVkR/.
View
88 atom.xml
@@ -1,28 +1,94 @@
----
-layout: nil
----
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Stephen Boak Blog</title>
<link href="http://blog.stephenboak.com/atom.xml" rel="self"/>
<link href="http://blog.stephenboak.com/"/>
- <updated>{{ site.time | date_to_xmlschema }}</updated>
+ <updated>2011-08-07T19:54:57-07:00</updated>
<id>http://blog.stephenboak.com/</id>
<author>
<name>Stephen Boak</name>
<email>stephen.boak@gmail.com</email>
</author>
- {% for post in site.posts limit:10 %}
+
<entry>
- <title>{{ post.title }}</title>
- <link href="http://blog.stephenboak.com{{ post.url }}"/>
- <updated>{{ post.date | date_to_xmlschema }}</updated>
- <id>http://blog.stephenboak.com{{ post.id }}</id>
- <content type="html">{{ post.content | xml_escape }}</content>
+ <title>Easy as (a) Pie</title>
+ <link href="http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html"/>
+ <updated>2011-08-07T00:00:00-07:00</updated>
+ <id>http://blog.stephenboak.com/2011/08/07/easy-as-a-pie</id>
+ <content type="html">&lt;h1&gt;&lt;a href=&quot;/2011/08/07/easy-as-a-pie.html&quot;&gt;Easy as (a) Pie&lt;/a&gt;&lt;/h1&gt;
+&lt;p&gt;Through my work at &lt;a href=&quot;http://www.boundary.com/&quot;&gt;Boundary&lt;/a&gt; I&amp;#8217;ve started playing with the &lt;a href=&quot;http://mbostock.github.com/d3/&quot;&gt;D3&lt;/a&gt; visualization library, trying to build some interesting visualizations for our real-time network monitoring dashboard. I&amp;#8217;ve really been enjoying D3 and Mike Bostock, the creator, has been extremely helpful to me and lots of others in the &lt;a href=&quot;http://groups.google.com/group/d3-js&quot;&gt;d3-js Google Group&lt;/a&gt;. Since the library is new, I hope the series of experiments I post here can be helpful in spreading some knowledge and awareness of the library.&lt;/p&gt;
+&lt;h2&gt;What You&amp;#8217;re Building&lt;/h2&gt;
+&lt;p&gt;My first experiment is an animated pie chart meant to visualize a breakdown of incoming network traffic by port. Here is the completed pie chart:&lt;br /&gt;
+&lt;div id=&quot;easy-as-pie-chart&quot;&gt;&lt;/div&gt;&lt;/p&gt;
+&lt;p&gt;I&amp;#8217;ve also posted the complete source code on &lt;a href=&quot;http://jsfiddle.net/stephenboak/hYuPb/&quot;&gt;JSFiddle&lt;/a&gt;. I&amp;#8217;m aware that there are some compatibility issues, both in my code and in the D3 libraries, with older browsers. For now I&amp;#8217;m simply going to hope that you can see everything here correctly.&lt;/p&gt;
+&lt;h2&gt;Building the Visualization&lt;/h2&gt;
+&lt;p&gt;For the sake of brevity I&amp;#8217;ll skip over some of the details, but feel free to &lt;a href=&quot;mailto:stephen.boak@gmail.com&quot;&gt;contact me&lt;/a&gt; with any questions.&lt;/p&gt;
+&lt;p&gt;There are a couple of D3 helper functions that I use. The first is &lt;a href=&quot;https://github.com/mbostock/d3/wiki/Pie-Layout#pie&quot;&gt;pie layout&lt;/a&gt;, which will take an incoming data array and give you back an object with the necessary angle and radius parameters to construct an arc.&lt;/p&gt;
+&lt;pre&gt;//D3 helper function to populate pie slice parameters from array data
+var donut = d3.layout.pie().value(function(d){
+ return d.octetTotalCount;
+});&lt;/pre&gt;
+&lt;p&gt;The second is a function to return a color value from an &lt;a href=&quot;https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20&quot;&gt;ordinal scale of 20&lt;/a&gt; preset colors:&lt;/p&gt;
+&lt;pre&gt;//D3 helper function to create colors from an ordinal scale:
+var color = d3.scale.category20();&lt;/pre&gt;
+&lt;p&gt;For this demo I&amp;#8217;m using a random number generator to return an object with two keys, port and octetTotalCount, meant to represent the breakdown of bits coming from each port:&lt;/p&gt;
+&lt;pre&gt;function fillArray() {
+ return {
+ port: &quot;port&quot;,
+ octetTotalCount: Math.ceil(Math.random()*(arrayRange))
+ };
+}&lt;/pre&gt;
+&lt;p&gt;The next few blocks of code set up the &lt;span class=&quot;caps&quot;&gt;SVG&lt;/span&gt; object, some groups to store content in, and the static content that will display until the first data pulse loads:&lt;/p&gt;
+&lt;pre&gt;var vis = d3.select(&quot;#easy-as-pie-chart&quot;).append(&quot;svg:svg&quot;)
+ .attr(&quot;width&quot;, w)
+ .attr(&quot;height&quot;, h);
+ .
+ .
+ .
+ var totalUnits = center_group.append(&quot;svg:text&quot;)
+ .attr(&quot;class&quot;, &quot;units&quot;)
+ .attr(&quot;dy&quot;, 21)
+ .attr(&quot;text-anchor&quot;, &quot;middle&quot;) // text-align: right
+ .text(&quot;kb&quot;);&lt;/pre&gt;
+&lt;p&gt;Next is the beginning of the update() function, which runs each time new data comes in (here I&amp;#8217;ve set the update function to run every 1500ms). First I generate new random data &amp;#8211; I wanted this visualization to handle varying numbers of ports as well as a large range of incoming values, so both the size and values of the array are variable:&lt;/p&gt;
+&lt;pre&gt;function update() {
+ arraySize = Math.ceil(Math.random()*10);
+ streakerDataAdded = d3.range(arraySize).map(fillArray);&lt;/pre&gt;
+&lt;p&gt;The part of the visualization I had the most trouble with was getting the pie slices to animate/tween properly while handling the varying array size and range. First, you need a good understanding of how D3 handles this variation &amp;#8211; a good primer is Mike Bostocks &lt;a href=&quot;http://mbostock.github.com/d3/tutorial/circle.html&quot;&gt;Three Little Circles&lt;/a&gt; tutorial, explaining data binding, as well as the enter() and exit() operations. Below, I&amp;#8217;m updating path arcs whenever data exists, and adding and removing arc segments as needed:&lt;/p&gt;
+&lt;pre&gt;//DRAW ARC PATHS
+paths = arc_group.selectAll(&quot;path&quot;).data(filteredPieData);
+paths.enter().append(&quot;svg:path&quot;)
+ .attr(&quot;stroke&quot;, &quot;white&quot;)
+ .attr(&quot;stroke-width&quot;, 0.5)
+ .attr(&quot;fill&quot;, function(d, i) { return color(i); })
+ .transition()
+ .duration(tweenDuration)
+ .attrTween(&quot;d&quot;, pieTween);
+paths
+ .transition()
+ .duration(tweenDuration)
+ .attrTween(&quot;d&quot;, pieTween);
+paths.exit()
+ .transition()
+ .duration(tweenDuration)
+ .attrTween(&quot;d&quot;, removePieTween)
+ .remove();&lt;/pre&gt;
+&lt;p&gt;The tweening of the pie pieces is done through two functions I wrote, one to handle adjustment of sizes (pieTween) and the other to handle removal of pie pieces (removePieTween). The pieTween function looks at the previous angles of each piece and interpolates angles between them. The removePieTween function interpolates between the piece&amp;#8217;s final value and 360° (or 2*Pi radians).&lt;/p&gt;
+&lt;p&gt;Nearly identical tweening operations are used for the tick marks and labels of the chart.&lt;/p&gt;
+&lt;h2&gt;Improvements&lt;/h2&gt;
+&lt;p&gt;There are a few things I&amp;#8217;m still trying to improve about this chart:&lt;/p&gt;
+&lt;ul&gt;
+ &lt;li&gt;I&amp;#8217;d like to add a piece to the filterData() function that will persist entry position in the array, so that if a particular port is represented through time it&amp;#8217;s position in the array does not change.&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul&gt;
+ &lt;li&gt;When there are a few small values near each other the labels overlap. I&amp;#8217;d like to add some functionality that will adjust label positions so that the text doesn&amp;#8217;t do this.&lt;/li&gt;
+&lt;/ul&gt;
+&lt;p&gt;If you&amp;#8217;ve got some ideas on how to make either of these improvements, or any other ideas to improve the visualization (or to represent this data in an even more creative way), I would love to hear from you, as would the rest of the team at &lt;a href=&quot;mailto:jobs@boundary.com&quot;&gt;Boundary&lt;/a&gt;.&lt;/p&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;/js/pie-random.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;window.onload = drawPie;&lt;/script&gt;</content>
<author>
<name>Stephen Boak</name>
<uri>http://blog.stephenboak.com/about.html</uri>
</author>
</entry>
- {% endfor %}
+
</feed>
View
36 css/screen.css
@@ -122,7 +122,7 @@ header, footer, nav, article, time { display: block; }
font-size: 14pt;
}
-/* CHART STYLES **********************************/
+/* CHART STYLES ********************************/
#easy-as-pie-chart {
background-color: #ffffff;
background: -moz-radial-gradient(50% 50%, circle closest-side, #ffffff 0%,#e5e5e5 100%);
@@ -152,4 +152,38 @@ header, footer, nav, article, time { display: block; }
#easy-as-pie-chart .value{
font-size: 12px;
font-weight: bold;
+}
+
+/* CSS3 RADIO STYLES ***************************/
+.css3_menu {
+ height: 30px;
+ line-height: 30px;
+ margin: 1.5em 0;
+}
+.css3_menu .heading {
+ color: gray;
+ display: inline-block;
+ height: 30px;
+ line-height: 30px;
+ margin-right: 10px;
+}
+.css3_menu .buttonset {
+ display: inline-block;
+}
+.css3_menu .buttonset input[type=radio], .css3_menu .buttonset input[type=checkbox] {
+ display: none;
+}
+.css3_menu .buttonset input[type=radio]:checked + label, .css3_menu .buttonset input[type=checkbox]:checked + label {
+ background-color: #0FB913;
+ color: white;
+}
+.css3_menu .buttonset label {
+ background-color: #262626;
+ display: inline-block;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 8px;
+}
+.css3_menu .buttonset label:hover {
+ background-color: gray;
}
Please sign in to comment.
Something went wrong with that request. Please try again.