Processing Forum

Updating SVG map example from Visualizing Data

[4 Replies]
- 16-Jul-2011 03:45 PM
- Forum: Programming Questions
I'm having trouble updating the SVG map example that matches data from a TSV file to color states. Here's what I have. However, it draws the entire map including the map as the same color including filling the lines separating Alaska and Hawaii.

This is the map:

http://en.wikipedia.org/wiki/File:Blank_US_Map.svg

I also opened it in Illustrator and ensured it was not grouped. <path id="state name">

I also referenced this which helped considerably:

http://forum.processing.org/topic/accessing-svg-world-map-trying-to-modify-but-keeps-coming-up-as-black

Thanks for your help!
1. PShape svg;
2. Table data;
3. float dataMin = -7;
4. float dataMax = 11;
6. void setup () {
7. size(1368, 936);
8. svg = loadShape("map.svg");
9. data = new Table("random.tsv");
10. }
12. void draw() {
13. background(255);
14. noStroke();
15. smooth();
16. svg.disableStyle();
18. int rowCount = data.getRowCount();
19. for (int row = 0; row < rowCount; row++) {
20. String abbrev = data.getRowName(row);
21. PShape state = svg.getChild(abbrev);
22. if (state == null) {
23. println("no state found for " + abbrev);
24. }
25. else {
26. float value = data.getFloat(row, 1);
27. if (value >= 0) {
28. float amt = norm(value, 0, dataMax);
29. color c = lerpColor(#FFFFFF, #221177, amt);
30. fill(c);
31. }
32. else {
33. float amt = norm(value, 0, dataMin);
34. color c = lerpColor(#FFFFFF, #992211, amt);
35. fill(c);
36. }
37. shape(svg, 30, 30, width - (width*.10), height - (height*.10));
38. }
39. }
40. }

Loop through XML data efficiently

[4 Replies]
- 03-Jul-2011 07:43 PM
- Forum: Programming Questions
I'm trying to load data from an XML file once and then again after changing the child to create a heat map. Is there a way to do this without having to create a loop for each for new child? In this case I want a row for each month of unemployment data for every state. Thanks.
1. void setup() {
2. size(600, 600, P3D);
3. background(255);
4. smooth();
5. loadMonth();
6. loadMonth2();
7. }
9. void draw() {
10. }
12. void loadMonth() {
13. pushMatrix();
14. for (int i = 0; i < 50; i++) {
15. XMLElement xml = new XMLElement(this, "unemployment.xml");
16. XMLElement stateData = xml.getChild(i);
17. XMLElement monthlyData = stateData.getChild(1);
18. String monthlyNumber = monthlyData.getContent();
19. float monthlyFloat = float(monthlyNumber);
20. float colorMap = map(monthlyFloat, 0, 15, 255, 0);
21. fill(colorMap);
22. noStroke();
23. translate(10, 0, 0);
24. rect(0, 0, 10, 10);
25. }
26. popMatrix();
27. }
29. void loadMonth2() {
30. pushMatrix();
31. for (int i = 0; i < 50; i++) {
32. XMLElement xml = new XMLElement(this, "unemployment.xml");
33. XMLElement stateData = xml.getChild(i);
34. XMLElement monthlyData = stateData.getChild(2);
35. String monthlyNumber = monthlyData.getContent();
36. float monthlyFloat = float(monthlyNumber);
37. float colorMap = map(monthlyFloat, 0, 15, 255, 0);
38. fill(colorMap);
39. noStroke();
40. translate(10, 0, 0);
41. rect(0, 10, 10, 10);
42. }
43. popMatrix();
44. }

Cycle through rows of external file after interval of time has elapsed

[4 Replies]
- 27-Mar-2011 09:59 AM
- Forum: Programming Questions
Hello,

I'm trying to cycle through an external file and draw points after an interval has passed.

Here is my code:
1. for (int row = 0; row < firstRowCount; row++) {
2. if(millis() > start + 200) {
3. float x = firstLocationTable.getFloat(row, 1) * 2 + 250; // column 1
4. float y = firstLocationTable.getFloat(row, 2) * 2 + 100; // column 2
5. ellipse(x, y, 3, 3);
6. fill(192, 150, 0, 10);
7. }
8. }
This works but loads all rows after the 200ms has passed instead of loading each row after 200ms has elapsed before moving the next row. Any help would be greatly appreciated. Thanks.

Activity Trend