Data Visualization with D3, React, visx and Typescript: 2 – Data Basics

It’s not every day that you have a perfect dataset to work with, most of the time you’ll need to apply transformations to properties to get it right for your visualization. This is pretty simple, and usually it’s the first thing you do when you thi…


This content originally appeared on DEV Community and was authored by Pedro Filho

It's not every day that you have a perfect dataset to work with, most of the time you'll need to apply transformations to properties to get it right for your visualization. This is pretty simple, and usually it's the first thing you do when you think about a chart.

Let's say that you have something like this to build a single line chart

[
    {
        name: "Bitcoin",
        price: 10,
        base: "USD",
        date: '1560507303',
        creator: "Satoshi Nakamoto",
    },
    {
        name: "Bitcoin",
        price: 12,
        base: "USD",
        date: '1592129703',
        creator: "Satoshi Nakamoto",
    }
]

I need an X and an Y, and I already have it, right? But you need the date to be something more human-friendly, and the price, you want it to be in cents, not dollars. How would you do it?

const format = d3.time.format('%B %d, %Y')

const data = rawData.map(oldData => ({
    price: oldData.price * 100,
    date: format.parse(oldData.date)
}))

But this isn't very functional, right? We should do something better for it! What if we create a function to transform A to B? Something like this

const format = d3.time.format('%B %d, %Y')

const getPrice = price => price * 100
const getDate = date => format.parse(oldData.date)

Then you can use it like this:

const data = rawData.map(oldData => ({
    price: getPrice(oldData.price),
    date: getDate(oldData.date)
}))

Then, you would have something like this in the end

[
    {
        price: 1000,
        date: 'June 14, 2019'
    },
    {

        price: 1200,
        date: 'June 14, 2020'   
    }
]

Nice, right?

This is what we call accessors, and they are really helpful to get and transform data inside your dataset.

I hope you liked it! For the next chapter, I'll talk about D3, so stay tuned!


This content originally appeared on DEV Community and was authored by Pedro Filho


Print Share Comment Cite Upload Translate Updates
APA

Pedro Filho | Sciencx (2021-10-06T20:31:14+00:00) Data Visualization with D3, React, visx and Typescript: 2 – Data Basics. Retrieved from https://www.scien.cx/2021/10/06/data-visualization-with-d3-react-visx-and-typescript-2-data-basics/

MLA
" » Data Visualization with D3, React, visx and Typescript: 2 – Data Basics." Pedro Filho | Sciencx - Wednesday October 6, 2021, https://www.scien.cx/2021/10/06/data-visualization-with-d3-react-visx-and-typescript-2-data-basics/
HARVARD
Pedro Filho | Sciencx Wednesday October 6, 2021 » Data Visualization with D3, React, visx and Typescript: 2 – Data Basics., viewed ,<https://www.scien.cx/2021/10/06/data-visualization-with-d3-react-visx-and-typescript-2-data-basics/>
VANCOUVER
Pedro Filho | Sciencx - » Data Visualization with D3, React, visx and Typescript: 2 – Data Basics. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/06/data-visualization-with-d3-react-visx-and-typescript-2-data-basics/
CHICAGO
" » Data Visualization with D3, React, visx and Typescript: 2 – Data Basics." Pedro Filho | Sciencx - Accessed . https://www.scien.cx/2021/10/06/data-visualization-with-d3-react-visx-and-typescript-2-data-basics/
IEEE
" » Data Visualization with D3, React, visx and Typescript: 2 – Data Basics." Pedro Filho | Sciencx [Online]. Available: https://www.scien.cx/2021/10/06/data-visualization-with-d3-react-visx-and-typescript-2-data-basics/. [Accessed: ]
rf:citation
» Data Visualization with D3, React, visx and Typescript: 2 – Data Basics | Pedro Filho | Sciencx | https://www.scien.cx/2021/10/06/data-visualization-with-d3-react-visx-and-typescript-2-data-basics/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.