JUST – JavaScript Useful Stuff

I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly change, I had to find a way to make my life easier. That’s why I wrote a group of JavaScript range functions which helps me to create array of different types and formats of data really fast.

just_v1

I just had to put them in some namespace, so “just” was good enough. Coincidentally, JUST can be acronym for JavaScript Useful Stuff, so I’ll probably use it more in the future. I’m still looking word for T, so any suggestion is welcome.

For now, there are 4 functions, arrayShuffle, range, rrange and orange.

just.arrayShuffle

This one should be pretty intuitive since it just shuffle your array. Shuffle algorithm is Fisher-Yates which is common for this task. It receive only one argument which is array and returns shuffled array.

just.range

Range function accept 3 parameters, start, end and step returns array of integer values. First value of array will be start parameter and each next will be incremented by given step until it reach value of end. Similar as Python range function.

just.range(4,15,2);

will return:

[4,6,8,10,12,14]

just.rrange

Random range returns array of random length between given scope where each value of array is random integer between custom scope.

just.rrange([10, 150], [5,10]);

This will return array of 5-10 elements where each value is between 10-150 eg.

[12, 99, 29, 136, 71, 100]

just.orange

This one also returns array, but values are not integer. It will return array of objects created from provided template. It accepts template with values from which new object will be created and number of objects that should be created. It’s the best to explain on example:

// prepare template
 var template = {
    value: [10,1,2],
    name: ['ten ','one','two']
 }

// create array of 3 elements based on template
just.orange(template, 3);

And this will create array of object who will look like this:

[
	{
		value: 10,
		name: 'ten'
	},
	{
		value: 1,
		name: 'one'
	},
	{
		value: 2,
		name: 'two'
	}
]

REAL LIFE EXAMPLE

Recently I started to work on tutorial for creating animated bar graphs and I needed data for testing. I wanted to test how it will look like with random number of elements and with random values. So, I just combine methods described above.

var template = {
	title: just.arrayShuffle(['CSS','JAVASCRIPT','HTML','PHP','MYSQL']),
	value: just.rrange([50,100],[3,20]),
	color: just.arrayShuffle(['#0099FF', '#91D6BC','#E83A25','#DE70A0','#9900FF'])
}
var dataArr = just.orange(template, 3 + Math.random() * 20 );

And I got something like this, so I can iterate and draw graph bars.

[
	{
		color: "#91D6BC",
		title: "HTML",
		value: 54
	},
	{
		color: "#DE70A0",
		title: "PHP",
		value: 81
	},
	{
		color: "#9900FF",
		title: "MYSQL",
		value: 65
	},
	{
		color: "#E83A25",
		title: "JAVASCRIPT",
		value: 70
	}
]

This approach will not be so great for large amount of data. For larger datasets each element should probably be created dynamically when we need it. It should be great if we could use JavaScript Generators for that purpose, but for now they are part of JavaScript 1.7 which is supported in FireFox only.

  • Visualize Twitter connections with Twings (3)
    I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way […]
  • Just Random Color (0)
    Some time ago I was working on app where for each category we had to assign random color in case that user didn't choose one. A few day ago I needed to generate random color again. Instead […]
  • Bigshark – larger buttons on Grooveshark (0)
    GrooveShark is one of the web services which I’m using on daily basis. Actually, I have one computer which I use only to play music from my GrooveShark playlists, while I’m sitting on […]
  • Use Webcam to Create Animated GIF (1)
    Some time ago I saw some online animated gif creator and thought it could be done in JS instead of Flash. We could easily access webcam from browser with the getUserMedia API. Nice […]
  • News Ticker in 4 lines of jQuery (90)
    There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines od jQuery code […]

5 comments on "JUST – JavaScript Useful Stuff"

Printing technology has come a long way in a short period of time.

Apart from the wireless functionality the most important thing to consider is the DPI of the printer (dots
per inch) you can usually rely on this to tell you how good a print you
will get. To sum up this Brother wireless printer HL2270DW Monochrome Printer review, it can definitely be classified as
among the top choices for printers.

best wireless printer on October 17, 2013 at 1:01 pm

Javascript Useful STuff
___________^___________

Sorry, the leading spaces got me again LOL

Gillian on March 26, 2013 at 11:55 am

JUST works just fine without another word…

Javascript Useful STuff
^

It’s an asymmetric Acronym, aka dynamically balanced in motion 😉 It is balanced because the ‘J’ is far from the fulcrum!

Hey the Twang visualizer was a cool idea, I assume that the three colors represent follow-only, followed-only and follow&followed (aka connections?) I fiddled a bit but I still haven’t got the hang how to change which set of circles.

All the best to you sir!

Gillian on March 26, 2013 at 11:53 am

Just nice for school project.

Web dizajn on September 10, 2012 at 5:33 am

JUST: javascript: useful set of tools

Gordon on June 28, 2012 at 10:40 am

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>