D3 Talk at Texas State - Nov 5

d3txstate.md

d3.js // tx state

Nov 5, 2014

Slides link: Slides here

Screencast link: Coming soon

Download your playground

Download files from GitHub repo

Exercise 0 - Check out D3 examples

Example site

Exercise 1 - Make an SVG circle

On the playground make a plain-Jane circle. Make it green with a diameter of 100px.

Remember you have to give your SVG element dimensions first.

Exercise 2 - Find the Texas State logo SVG

Go out on Google and find the SVG for the Texas State Logo. Then mess around with it in the Chrome developer tools. Delete letters etc.

Try zooming into it as far as you can go. Vector graphics for the win! No pixely edges!

Exercise 3 - Create this bar chart and study the code

Try changing the data. What do you notice about the chart as you change data. Why is this happening?

HTML

Throw this into the stage element I provided in index.html.

<div class="row stage">
	<div class="chart"></div>
</div>

CSS

This goes in to css/mycss.css

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

JS

This goes in js/mycode.js

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

Exercise 4 - Turn this chart into a life expectancy chart

Ok, time to take the gloves off. Here's where you show me your data skills.

Make this chart into a life expectancy chart for the USA.

Requirements

• The tooltip must tell you the exact value of the life expectancy.
• The color of the states must be redder for the lower the number and greener for the higher the number. D3 scales can help you achieve this computationally but you can do it with another method if you'd like.

Helpful Links

• Square's Intro to D3
• D3 Google Group
• Thinking with Joins
• Three little circles - Basic Element Manipulation
• D3 Vienno on YouTube

People to follow

• Mike Bostock - The man, the myth, the legend. Creator of d3, Graphics Editor at the New York Times. @mbostock
• Andrew Thornton - Runs Austin D3 Meetup. @encodingpixels