D3 Day 3

Learn D3 in 5 days ¶ #

I recently subscribed to Ben Clinkinbeard’s learn D3.js in 5 days, and am currently on day 3. I read through the first 2 days, and felt fairly comfortable with selecting elements, so I did not follow along on the first two days. I probably should have, but there are only so many hours in the day.

Why Learn D3 ¶ #

D3 is the ubiquitous dynamic visualization library for building custom interactive visualizations on the web. It is a bit low level, and more verbose than many other libraries that build upon it, but if you want full control D3 is the way to go. I have used a few libraries built upon d3 in the past and have been very happy with the results. For now I want to start learning a bit about how d3 works. I know that learning it is going to take a long time, so I want to start working on some simple examples now in order to build my understanding so that I can learn quickly when I am ready to dive in. If I never decide I need to take the deep dive into d3, I think understanding how it works will only help when I am using higher level libraries.

Final Result ¶ #

I cant express how fun it was to build this example. I always saw d3 as being super low level and that I could never build something in it. It was so cool to watch the magic happen in such a short period of time.

Prep ¶ #

Load D3 ¶ #

I am going to load d3 from the cloudflare cdn for simplicity

    script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js'></script>

Base Styles ¶ #

I will use this as by stylesheet throughout the examples.

<style>
  .chart {
    display: block;
    padding: 10px;
    background: peachpuff;
  }

  .bar {
    height: 30px;
    margin: 5px;
    background: teal;
  }
  button {
    background: rgb(240, 196, 211);
    border: none;
    font-size: 1.3rem;
    border-radius: 5px;
    padding: 0.2rem 1rem;
    margin-bottom: 1rem;
  }
  .on {
    background: palevioletred;
  }
</style>

Example one ¶ #

This one is a bit cheaty in that it has the exact number of divs already rendered for us, but it is a good learning point so see how to map data to attributes

By the way this is the first chart that I have ever created with d3, and this silly thing is so exciting!!

Markup ¶ #

<div id="chart1" class='chart'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

JavaScript ¶ #

const data = [90, 270, 152, 42, 83]
d3.select('#chart1')
    .selectAll('div')
    .data(data)
    .attr('class', 'bar')
    .style('width', function (d) {
        return d + 'px'
    })

Result ¶ #

example 1 plot

Example 2 ¶ #

This time we are going to get a bit more dynamic. The divs will be generated on the fly and will update with the press of a button.

Markup ¶ #

<div id="chart2" class='chart'>
    <button class='math' onclick="render('math')">Math</button>
    <button class='science' onclick="render('science')">Science</button>
</div>

JavaScript ¶ #

const data2 = [
    { name: 'Alice', math: 93, science: 84},
    { name: 'Bob', math: 73, science: 82},
    { name: 'James', math: 92, science: 78},
    { name: 'Steve', math: 77, science: 93},
    { name: 'Jordan', math: 80, science: 68},
]

function render(subject) {
    d3.select('#chart2')
        .selectAll('button')
        .classed('on', false)
    d3.select('.' + subject)
        .attr('class', subject + ' on')
    d3.select('#chart2')
        .selectAll('div')
        .remove()
    d3.select('#chart2')
        .selectAll('div')
        .data(data2)
        .enter()
            .append('div')
            .attr('class', 'bar')
            .style('width', function(d) {
                    return (d[subject]-50)*3 + 'px'
                })
}
render('math')

Result ¶ #

example 2 working buttons

Example 3 ¶ #

In Example2 the chart jumped from one state to the next with a complete wipe and redraw in betweeen. In this example we will retain the same bars and only update their width. This will allow us to transition/animate them.

Markup ¶ #

<div id="chart3" class="chart">
  <button class="math" onclick="render3('math')">Math</button>
  <button class="science" onclick="render3('science')">Science</button>
</div>

JavaScript ¶ #

const data3 = [
    { name: 'Alice', math: 93, science: 84 },
    { name: 'Bob', math: 73, science: 82 },
    { name: 'James', math: 92, science: 78 },
    { name: 'Steve', math: 77, science: 93 },
    { name: 'Jordan', math: 80, science: 68 },
]

function render3(subject) {
    d3.select('#chart3')
        .selectAll('button')
        .classed('on', false)
    d3.select('#chart3')
        .select('.' + subject)
        .attr('class', subject + ' on')

    const bars = d3.select('#chart3')
        .selectAll('div')
        .data(data3, function(d) {
            return d.name
        })
    const newBars = bars.enter()
        .append('div')
            .attr('class', 'bar')
            .style('width', 0)
    newBars.merge(bars)
        .transition()
        .style('width', function(d) {
            return (d[subject]-50)*3 + 'px'
        })
}
render3('math')

example 3 nice and smooth

Final Thoughts ¶ #

I express how fun this was. I have always viewed d3 as something so low level I would never be able to touch. The tutorial was super fun and very approachable. Any other resources that I have seen to start learning d3 appear to be very time consuming before you start writing code and digging into it yourself. These examples were great, I was able to get started creating visualizations in no more than 5 minutes of reading. Now that I feel like I have a shallow understanding of how it works I feel better prepared to dive in.