Trouble with Markdown #31
Description
The Markdown below produces this result.
Set {
'http://i.imgur.com/8L6KII7.png)](https:/codepen.io/bclinkinbeard/pen/przydE?editors=0010)',
'https://codepen.io/bclinkinbeard/pen/przydE?editors=0010)' }
Markdown
# Welcome to D3 Tips
Welcome to the club! No, you didn't swear an oath in your sleep, you've just officially transitioned to my regular email list.
What does that mean? I'm glad you (didn't really) ask...
For over 15 years I've been working with clients and programming on the web, and a lot of that time has been spent visualizing data in one way or another. Since JavaScript is the language of the web, these days my data visualization work happens in D3. In fact, I've been using D3 to some extent since late 2011.
While those many years of practice have given me a deep understanding of the library, they've also faded my memories of what it felt like when I was just starting to learn it. Because of that, I want to teach D3 in a format that allows for two-way communication.
Video lessons are great, but weekly emails allow me to hear directly from you. I've chosen this format specifically so you can directly reply with questions, comments, cheers and jeers, and I will read every single one. In fact there's a good chance you'll inspire a future email!
Every week I'll send out a brief tip or mini tutorial on something related to D3. It could be a specific API, a common pattern, or even just a concept related to data visualization. Whatever it is, the goal is quick and informative.
Very, very occasionally I will also tell you about my products and services. Surprising, I know, but I promise those messages will be few and far between.
There will, of course, be an unsubscribe link at the bottom of every email. If you ever want off the train just click it and you'll never hear from me again. I won't even be mad!
Anyhow, welcome! I am truly thankful you're here.
Before we kick things off, **hit reply and ask (or tell!) me something about D3.** Something you've always wondered, something that never really clicked, or maybe a lightbulb moment you've had.
### And now, on to the tip!
We built a pretty nice bar chart in the D3 in 5 Days series, and it turns out converting it to a column chart is pretty easy!
[](https://codepen.io/bclinkinbeard/pen/przydE?editors=0010)
Adding `display: inline-block;` to our CSS class `bar` will allow the divs to be stacked horizontally, and then we just have a few tweaks to make to our JavaScript.
The first thing we have to do is swap our scales.
```javascript
// the band scale is now our x scale
// since we want to set column width based on the number of bands
const xScale = d3.scaleBand()
.domain(data.map(function(d) { return d.name }))
.range([0, width])
// the linear scale is our y scale now
const yScale = d3.scaleLinear()
.domain([0, 100])
.range([height, 0])
One thing to note is that we've reversed the order of values passed to the range() function. Putting height first in the array is sort of like using scaleFunction.invert() , and it serves a few purposes in this scenario.
The most obvious effect is that it ensures the Y axis runs in the direction we'd expect. Since DOM elements are laid out from the top of the page to the bottom, using a scale without reversing the range would result in an axis with 0 at the top and 100 at the bottom.
Reversing those values also means the scale will calculate the inverse value. So given a height of 400, yScale(75) would return 100 instead of 300. Because of this, yScale is used to calculate the space above each column. The actual column height is calculated by subtracting that value from the overall chart height.
.style('height', function(d) {
return (height - yScale(d[subject])) + 'px'
})
.style('margin-top', function(d) {
return yScale(d[subject]) + 'px'
})This can definitely be a brain bender, so don't worry if it seems confusing. I've used code like this hundreds of times and I still have to stop and think it through almost every time. One thing that might help is playing around with the live example. Re-reverse the range, tinker with the height and top-margin, and see what happens.
Believe it or not, that's it! See you next time!
</details>