Home/

...

/

Make it understandable - meta info

Make it understandable - meta info

You’ve come so far! There’s a US map and a histogram. They’re blue and shiny and you look at them and you go “Huh?”.

The key to a good data visualization is telling users what it means. You can do that with a title and a description. Just tell them. The picture is there to give support to the words. The words are there to tell you what’s in the picture.

Let’s add those words.

We’re adding a dynamic title and description, and a median line on the histogram. It’s dynamic because we’re adding user controls later, and we want the pictures and the words to stay in sync.

At the end of this section, you’ll have a full visualization of the shortened dataset.

widget

Dynamic title

We begin with the title because it shows up first.

We start with an import in App.js and add it to the render method. You know the drill :smile:

Press + to interact
// src/App.js
import CountyMap from './components/CountyMap';
import Histogram from './components/Histogram';
// markua-start-insert
import { Title } from './components/Meta';
// markua-end-insert
class App extends Component {
    state = {
        techSalaries: [],
        countyNames: [],
        medianIncomes: [],
        // markua-start-insert
        filteredBy: {
            USstate: '*',
            year: '*',
            jobTitle: '*'
        }
        // markua-end-insert
    }
    // ...
    render() {
        // ..
        return (
            <div className="App container">
                // markua-start-insert
                <Title data={filteredSalaries}
                       filteredBy={this.state.filteredBy} />
                // markua-end-insert
                // ...
            </div>
        )
    }

Ok, I lied. We did a lot more than just imports and adding a render.

We also set up the App component for future user-controlled data filtering. The filteredBy key in state tells us what the user is filtering by. There 3 options: USstate, year, and jobTitle. We set them to “everything” by default.

We added them now so that we can immediately write our Title component in a filterable way. That means we don’t have to make changes later.

As you can see, the props Title takes are data and filteredBy.

Prep Meta component

Before we begin the Title component, there are a few things to take care of. Our meta components work together for a common purpose – showing meta data. Grouping them in a directory makes sense.

So we make a components/Meta directory and add an index.js. It makes importing easier.

Press + to interact
// src/components/Meta/index.js
export { default as Title } from './Title';

You’re right, using re-exports looks better than the roundabout way we used in Histogram/index.js. Lesson learned.

You need the USStatesMap file as well. It translates US state codes to full names. You should get it from Github and save it as components/Meta/USStatesMap.js ...

Access this course and 1400+ top-rated courses and projects.