Skip to content

Instantly share code, notes, and snippets.

@a17levine

a17levine/d3txstate.md

Last active Aug 29, 2015
Embed
What would you like to do?
D3 Talk at Texas State - Nov 5

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

People to follow

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.