Skip to content

Instantly share code, notes, and snippets.

@codingforpleasure

codingforpleasure/.block

Last active February 10, 2019 22:44
Show Gist options
  • Save codingforpleasure/c68dd2b41ca7b823f6ebb932d1e8a7d5 to your computer and use it in GitHub Desktop.
Save codingforpleasure/c68dd2b41ca7b823f6ebb932d1e8a7d5 to your computer and use it in GitHub Desktop.
Download ZIP
Animated Bar Chart
Raw
.block
license: mit
Raw
README.md

Built with blockbuilder.org

Credit goes to Ben Clinkinbeard's "Learn D3 in 5 Days" course

This is the finished product of the course.

And here are the notes I took throughout the course:

Day 1

d3 Overview

  • Can build d3 visualizations in HTML and / or SVG
  • SVG graphics provide resolution independence - looks good anywhere
  • SVG graphics do not participate in normal browser layout flow

Core Concepts

  • D3: Data Driven Documents
  • declarative = what, not how
  • style, attributes, properties can be defined as functions of data

Selections

  • returns array of elements

Scales

  • provid domain and range
  • scaleLinear(), e.g.

Day 2

Selections

  • Can select by tag name, id, class name
  • can be scoped d3.select('#foo').selectAll('p')

Element CRUD

selection.attr

  • can be used as getter or setter
  • setter version: .attr('name', value)
  • value can be a function whose form looks like:
function(d, i, nodes){

}
  • d is datum, i is index, nodes is array of nodes in selection
  • this is bound to actual DOM element (not true if you use arrow function)

selection.style

selection.property

selection.classed

  • .classed(names[, value]) - can specify space-separated list of class names

selection.text

  • similar to selection.html (used to set innerHtml)

selection.append('type')

  • Will create a new element and append it to last child of each node in selection

selection.insert

  • Can be used to specify placement of where element is appended

selection.remove

Handling Events

selection.on('type', listener)

Day 3

Joining Data and Selections

  • The enter() selection represennts data items in need of DOM elements

Dynamic Charts

  • key function
    • second argument to selection.data
    • 'key' to reusing elements instead of deleting them
    • without a key function, data is assigned by index

The Data Join

  • Data points joined to existing elements produce the UPDATE selection
  • Leftover data produce the ENTER selection
  • Leftover elements produce the EXIT seletcion

Day 4

D3 Scales

Fundamentals

  • Have a domain and a range
  • d3.scaleX returns a scale function
  • REVERSIBLE
    • Can swap domain and range OR
    • Use the invert method
const decimalToPercent = d3.scaleLinear()
    .domain([0, 1])
    .range([0, 100])

decimalToPercent.invert(50) // 0.5

Outliers

  • There is nothing stopping someone from inputted a value greater than the defined domain
  • If you need to limit it, you can call the clamp method
const percentToDecimal = d3.scaleLinear()
    .domain([0, 100])
    .range([0, 1])
    .clamp(true)

percentToDecimal(-10) // 0
percentToDecimal(150) // 1
percentToDecimal(200) // 1

Scales in practice

  • Making your charts fill available space
  • bandScale is a good way to calculate width (or height in this case) of bars
    • domain is set of values that can be coerced to string
    • range would be the space you want the chart to take up

Day 5

Axes

Axes come from scales

  • D3 has built-in methods for axes
  • Axis consistents of path element with g elements for "ticks"
  • selection.call is used to invoke a method and pass the selection to and then return the selection

Moving axes into view

  • SVG's default position is top left
  • Need to use transform attribute to position axes

d3 Margin Convention

  • Reserve margins on sides of chart for axes
  • Subtract margins when defining width and height

forked from mell0kat's block: Animated Bar Chart

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>d3 in 5 Days - Aniamated Bar Chart</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div id="chart">
</div>
<button onclick="render('math')">Math</button>
<button onclick="render('science')">Science</button>
<script src="index.js"></script>
</body>
<style type="text/css">
#chart {
padding: 10px 10px 20px 50px;
position: relative;
margin-top: 20px;
}
.bar {
background-color: teal;
height: 20px;
margin-top: 2px;
}
</style>
</html>
Raw
index.js
const data = [
{ name: 'Alice', math: 93, science: 84 },
{ name: 'Bobby', math: 81, science: 97 },
{ name: 'Carol', math: 74, science: 88 },
{ name: 'David', math: 64, science: 76 },
{ name: 'Emily', math: 80, science: 94 }
]
const margin = { top: 10, right: 10, bottom: 20, left: 50}
const width = 600 - margin.left - margin.right
const height = 400 - margin.top - margin.bottom
const xScale = d3.scaleLinear()
.domain([0, 100])
.range([0, width])
const yScale = d3.scaleBand()
.domain(data.map(d => d.name))
.range([0, height])
const svg = d3.select('#chart')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.style('position', 'absolute')
.style('top', 0)
.style('left', 0)
const axisContainer = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
axisContainer.append('g')
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(xScale))
axisContainer.append('g')
.call(d3.axisLeft(yScale)) // we don't have to move this at all now
const render = (subject) => {
const bars = d3.select('#chart')
.selectAll('div')
.data(data, d => d.name)
const newBars = bars
.enter() // returns enter select for data that need DOM elements
.append('div')
.attr('class', 'bar')
.style('width', 0)
// combine the selections so you can act on them together
newBars.merge(bars)
.transition()
.style('width', d => `${xScale(d[subject])}px`)
.style('height', d => `${yScale.bandwidth() - 2}px`)
.delay(5000)
}
render('math')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment