5

Here's a link to a previous question answered that I think has a great deal to do with mine. I just need some additional clarification on it.

I am creating a periodic table and what I'd like to do is set up a color gradient and then have the individual squares have a color in that gradient based on a certain property. For example, if my color gradient was to go from light red to dark red (actual colors unimportant right now), and I'm displaying the melting points of the elements in the table, I'd like those with the lower bp's to be lighter red and those with the higher bp's to be darker red; in other words, I need to map my bp range (approx -400 to +1500) to the values ot the colors in the gradient range. I don't want the colors equally distributed...if two elements have close to the same melting points, I'd like for them to be nearly identical. It's a one-to-one correspondence.

In the question referenced, I understand how the gradient is created, but what I don't understand is how I get the values I have for the melting points and use the function to generate where that value falls on the gradient. I don't understand where that's done or how I link my array of values to the color array.

Currently, I'm using the function provided in the link and then trying to take the output and use it to generate the background color of my div. The input I'm using is the same as defines the "$Variable" in the last line.

<div id="Helium" style="background-color:<?php echo $color; ?>;" class="element group18 period1">
  <span class="number"> <?php echo $row[2]['atomicNumber']; ?> </span><br>
  <span class="symbol"><?php echo $row[2]['symbol']; ?></span><br>
  <span class="name"><?php echo $row[2]["$NameLanguage"]; ?></span><br>
  <span class="molmass"><?php echo $row[2]["$Variable"]; ?></span></div>

Thank you for all the help. I do appreciate the time.

Community
  • 1
  • 1
user2752439
  • 77
  • 3

1 Answers1

1

Let's set some arbitrary starting and ending values, say, pure red (#FF0000) for high melting point, and pure blue (#00FF00) for low melting point.

For the sake of simplicity, let's say that the periodic table only has melting point values between 10 and 500 (I know it doesn't but it shouldn't be a huge change).

We can map where the melting point is along that by doing this:

$mp=440;
$max=500;
$min=10;
$position=($mp-$min)/($max-$min);
$highColor=hexdec("FF0000"); //converts to decimal for multiplication
$lowColor=hexdec("00FF00");
$newColor=intval($position*($highColor-$lowColor)+$lowColor);
$newColorStr=dechex($newColor);
scrblnrd3
  • 7,228
  • 9
  • 33
  • 64
  • This looks understandable to me. Thank you. I think I know what I need to do now. I appreciate the help. I think what I need to do is place this into a function and output the value. – user2752439 Dec 14 '13 at 16:13
  • Hey, I just tried it, and I'm getting results!!! I need to figure this out the details for myself, but thank you so much again for the nudge in the right direction!!! I owe you a pizza!! – user2752439 Dec 14 '13 at 16:38
  • Pizza would be great. Don't be surprised if I take you up on that someday! – scrblnrd3 Dec 14 '13 at 16:39