Dummy data substituting d3.range() to ES6 array methods

Prototyping or sketching I would often create some some dummy data by using d3.range() and getting an arbitrary array; Something like:

const data = d3.range(10)
// data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

I may map over the array if I need larger intervals:

const data = d3.range(10).map(d => d * 10)
// data = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]

Or map over just to produce random numbers/integers:

const data = d3.range(10).map(() => Math.round(Math.random() * 10))
// data = [8, 1, 9, 8, 8, 2, 7, 3, 10, 4]

Or return an array of objects to test for something like a bar chart:

const data = d3.range(10).map(d => {
return {
category: 'uni-' + d,
value: Math.round(d3.randomUniform(1, 90)())
}
})
/*
data = [
{
"category": "cat-0",
"value": 1
},
{
"category": "cat-1",
"value": 77
},
...
]
*/

But recently I’ve been finding myself prototyping in React without having access to d3, and don’t want to call in a module just for the dummy data or testing, so have been using vanilla JavaScript (ES6) to produce my dummy data as above.

For example substituting d3.range(10):

const data = Array.from(Array(10).keys())
// data =  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Note: (without chaining the keys() method, I’d still get an array, just filled with undefined items). You could also use: fill() to pass in a value, so [...Array(3).fill(8)] would give us [8, 8, 8]

Or a shorter version using the spread operator :

const data = [...Array(10).keys()]
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

So to return an array of objects:

const data = [...Array(10)].map((d, i) => {
return {
category: 'cat-' + i,
value: Math.round(Math.random() * 10)
}
})
/*
data = [
{
"category": "cat-0",
"value": 1
},
{
"category": "cat-1",
"value": 77
},
...
]
*/
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.