Raphael.js map default fill colors - javascript

I am trying to familiarize myself with raphael.js. I want to create a USA map that already has default colors for each state and those colors stay there.
Here is what I came up with.
If you look at AK, I'm getting the default color loaded, but if I highlight another state, the default color for AK disappears. I want AK - and other states - to stay the same color.
Specifically, I don't know what is clearing out my AK full color. I think part of this statement is clearing out the fill cover when I mouseover a different state:
for (var state in aus) {
//aus[state].color = Raphael.getColor();
(function (st, state) {
st[0].style.cursor = "pointer";
st[0].onmouseover = function () {
current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
st.animate({fill: st.color, stroke: "#ccc"}, 500);
st.toFront();
R.safari();
document.getElementById(state).style.display = "block";
current = state;
};
})(aus[state], state);
}
Any ideas where I might be going wrong?

It's been a while since I worked with Raphael.js but I think this is the line resetting your state:
current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
Try replacing #333 with st.color or whatever that state's color is. If my assumptions are correct that would be something like aus['AK']??? You might have to capture the previous state's color. Let me know if that doesn't work and I can take a closer look.
Good Luck.

Drop your SVG of the USA into..
this
You can optionally remove OR LEAVE IN the mouseover code which is also generated.

Bryan Allo touches on part of my problem, but ultimately it is the animation code that is causing problems. I never figured out how to animate to similar color hue and ditched the following code completely: st.animate({fill: st.color, stroke: "#ccc"}, 500);
The end result is a site that lets users create their own presidential race predictions by state. Here it is.

Related

Issue with backward and forward to change colors in JavaScript

i am having this problem when i try to change colors in my small app. But first, i am trying to make a small app to generate random colors and save them to be able to use a backward and forward button.
I'll put a link to codepen if you want to see it in action and understand it way better.
Link: random colors app
My problem: after generating two colors and i click backward i get the same color (Yes, i know that i'm using a .pop() method to get current color), and i have to click it twice to see the change.
So, my question. Should I use another "logic" to get my colors instead of .pop() and .push() methods?
I'll appreciate all the help!
Here's why you're having this issue! Took me a little to figure it out...
When you generate a new color, you're immediately setting the new color as your current color. And what happens after? You're pushing it to the backwardStack array!
This means that when you turn RED, then GREEN...
Generate RED, set as current color, then immediately push RED to backward stack
Generate GREEN, set as current color, then immediately push GREEN to backward stack
Backward should only be available once at least 1 color has passed, not immediately upon adding a color. Meaning that you should...
// Reverse the order of these actions!
// Action 1
changeColor(hexColor);
currentColor = hexColor;
console.log("Current color: " + currentColor);
// Action 2
if (currentColor) {
backwardStack.push(currentColor);
}
//----------------------
// Action 2
if (currentColor) {
backwardStack.push(currentColor);
}
// Action 1
changeColor(hexColor);
currentColor = hexColor;
console.log("Current color: " + currentColor);
Which basically says:
Before I set a current color, do I have a current color? If yes, push to the backwardStack. If I have no current color, don't push to the backwardStack and still set my current color. That means on the first color generate, the backward button should not become clickable.
This is also the reason why every time you generate a color, the backward button has to then be pushed twice!
Hopefully this helps.

How do you fill specific countries using d3.geo with canvas?

I created my own pre-projected topojson file, and I am trying to change the fillstyle of a specific country in my canvas. http://bl.ocks.org/anonymous/fea6cfde1184e2f10de8 is my code/example. I tried to catch the specific country code and set a fill for that country (Germany in this case). However, it fills a bunch of other countries in for some reason as well. I suspected it might be a shared borders issue, but some countries that do not share a border get filled as well.
Also interesting is that if I do not render the borders for the other countries as in http://bl.ocks.org/anonymous/3256fe09efaa8d2ebc96 the fill works, but obviously all the borders disappear. Am I simply not understanding how canvas fills work? Is there a different way to highlight a specific country? It has occurred to me that I can use a mask to fill in a specific country, but that seems like an awfully roundabout way to do it.
Note, I am aware that it is way simpler to do using SVG/CSS, but I would really like to get it working in canvas.
As in this example, you need to draw all the borders first, then just fill the region you want:
var isDEU = null;
for (var i = 0; i < geoJson.features.length; i++) {
if (geoJson.features[i].id == "DEU") {
isDEU = geoJson.features[i];
}
context.save();
canvasPath(geoJson.features[i]);
context.stroke();
context.restore();
}
context.fillStyle = "#f00"
context.beginPath();
canvasPath(isDEU);
context.fill();
Example here.

How can I rotate this cube properly with Javascript or Jquery?

Made a 3d cube. When a button is clicked, it rotates 50 deg left or right. I want it rotate an additional 50deg further when I click the same button. How do I achieve this? Here is my code right now:
//code to rotate cube
var rotateCube = document.getElementById('cube');
var moveLeft = document.getElementById('button-one');
var moveRight = document.getElementById('button-two');
moveLeft.onclick = function() {
rotateCube.style.webkitTransform = "rotateY(-50deg)";
}
moveRight.onclick = function() {
rotateCube.style.webkitTransform = "rotateY(50deg)";
}
in full here:
http://jsfiddle.net/camlatimer/6xp2dwe7/1/
I've searched around. There are examples like this one:
http://paulrhayes.com/experiments/cube-3d/
But I'm new to programming (2 months of fiddling with javascript in my free time) and don't understand much. I thought I could complete my objective pretty easily, but I'm stuck. I don't want to use any plugins. Just want to learn to really program things on my own. Any help would be appreciated.
LcSalazar is correct in regards to handling to rotation state of your cube, but my impression is that you're also interested in animating the rotation? If so, you'll want to check out CSS animations to handle those in-between states. This question covers dynamic values in CSS keyframed animations, which might be a bit beyond your current knowledge of CSS/JS, but spend some time with it and you'll be surprised how quickly it starts making sense.
Good luck!
The problem is with your premise:
"When a button is clicked, it rotates 50 deg left or right"
Actually, when a button is clicked, you are setting the rotation to be exactly -50deg or 50deg. It's an absolute assignment, not an increment.
In order to increment (since the rotation property is assigned by a text composed value), you'd need to store the value in a way where you can control it. For example, storing it in an external variable, and use it to increment the final value.
Something like this:
See working example
//Here's where you will store the actual value
var rotationValue = 0;
moveLeft.onclick = function() {
rotationValue -= 50;
rotateCube.style.webkitTransform = "rotateY("+ rotationValue +"deg)";
}
moveRight.onclick = function() {
rotationValue += 50;
rotateCube.style.webkitTransform = "rotateY("+ rotationValue +"deg)";
}

javascript easelJs onPress enlarge image circle

Working with javascript and the Easeljs lib and createjs, i need some help.
my program draws some circles and fills them with color. also with a Ticker they are moving and with some if statements they are bouncing from the walls of the window.
The circles are created dynamicly and the amount of circles is different everytime.
Now I need to implement a feature so that the circles will enlarge when you press them. They should get their radius +1px bigger every 30 ms. I don't know how to do that.
1. Do u use onPress for this?which callbacks do i need to use and how will i find out if the mouse is released and the circle can stop growing?
2. do i need to delete circleObject from my circlesArray or is it enough to delete it from the stage and draw them again?
I'm desperate for help, i would be glad if someone could give me some clues!
Greetings T
With the information you provided I would refer you to take a look at this EaselJS Example on github: https://github.com/CreateJS/EaselJS/blob/master/examples/DragAndDrop_hitArea.html
The onPress-Method is used there in a way that you could probably almost copy as is.
Yours could look like this:
function(target){
target.onPress = function(evt) {
target.grow = true; //or a grow-factor or so
evt.onMouseUp = function(ev) {
target.grow = false;
}
}
}(circle);
and in your tick-function you look through all circles, check for their grow==true and increase their radius if so
And 2:
Your circleObjects all are a createjs.Shape right? You don't have to delete them from the stage or from the array, you can use circle.graphics.clear(); and then redraw the circle with the new radius.

set background color in chart

I am using a theme, but i want to set background color around the chart to white or transparent or something.
I am trying this code:
var myTheme = dojox.charting.themes.PlotKit.orange;
myTheme.fill= "white";
chart10.setTheme(myTheme);
chart10.addPlot("default", {
type: "Pie",
labelOffset: -30,
radius: 150,
startAngle: 45,
font: "normal normal 10pt Tahoma",
fontColor: "black",
labelWiring: "grey",
labelStyle: "columns",
htmlLabels: true,
plotarea: { fill: "#000" }
});
But this code didn't works, none alteration is visible.
How can i set the color background ?
I believe you have to set both the chart.fill and plotarea.fill properties.
myTheme.chart.fill= "white";
myTheme.plotarea.fill = "white";
If you do console.debug(myTheme) you can inspect all the properties of the theme object. I usually have to experiment a little before I find the right ones.
I know this is old, but I had a situation where I was creating a pie chart and needed to change the background color behind the pie chart. I tried this solution, but it didn't work because I wasn't assigning a theme. I am creating it this way:
var pieChart = new Chart("myDIV");
pieChart.addPlot("default", {type: "Pie"});
pieChart.addSeries("Series A", pieString);
My pieString is where I am combining my variables together to form the pie. Basically, I concatenate a series of statements like this:
{y:200, tooltip: "layer", color:"red", text: "myText"}
I join those strings together and assign it to my pieString variable.
When I set up my chart, I got a standard white background behind it, which doesn't work well for my colored background since I wanted it to blend. There are two rectangles that make up the background. You can change the larger and furthest back one through pieChart.fill = "something", but the inner one didn't change.
The way I solved this for me is like this.
function ClearChartBackground() {
var sumDivRects = document.getElementById("chartDIV").getElementsByTagName("svg")[0].getElementsByTagName("rect"); //so I am getting the rectangles that are part of my chart div
var firstRect = sumDivRects[0];
var secondRect = sumDivRects[1];
firstRect.attributes.item(1).value = "0";
secondRect.attributes.item(1).value = "0";
//this drills down to the 'fill-opacity' attribute that can then be changed to make it transparent
}
As you can see in my photo, the original background was white, which doesn't work well on my gray background. After running my function, it is changed to transparent.
I am posting this because it took me a pretty long time to find out how to change this since I am having Dojo render it for me. I came across this post, but I didn't get much help from it since I wasn't doing a theme.
dojox.charting.themes.Claro.chart.fill = "#F1F1F0"
dojox.charting.themes.Claro.plotarea.fill = "#F1F1F0"
dojox.charting.themes.Claro.chart.stroke = "#F1F1F0"
// Set the theme
chart.setTheme(dojox.charting.themes.Claro);
Using Jquery, you can do something like this:
$("#chartNode svg rect:eq(0)").attr("fill", "0");
$("#chartNode svg rect:eq(0)").attr("fill-opacity", "0");
So, basically you are accessing the element and changing the attribute manually. It is not very efficient way to do with, but it will do the trick.

Categories

Resources