Updating SVG map example from Visualizing Data

Programming Questions

kpowe11

Updating SVG map example from Visualizing Data

in Programming Questions • 2 years ago

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!

PShape svg;
Table data;
float dataMin = -7;
float dataMax = 11;
void setup () {
size(1368, 936);
svg = loadShape("map.svg");
data = new Table("random.tsv");
}
void draw() {
background(255);
noStroke();
smooth();
svg.disableStyle();
int rowCount = data.getRowCount();
for (int row = 0; row < rowCount; row++) {
String abbrev = data.getRowName(row);
PShape state = svg.getChild(abbrev);
if (state == null) {
println("no state found for " + abbrev);
}
else {
float value = data.getFloat(row, 1);
if (value >= 0) {
float amt = norm(value, 0, dataMax);
color c = lerpColor(#FFFFFF, #221177, amt);
fill(c);
}
else {
float amt = norm(value, 0, dataMin);
color c = lerpColor(#FFFFFF, #992211, amt);
fill(c);
}
shape(svg, 30, 30, width - (width*.10), height - (height*.10));
}
}
}

Replies(4)

PhiLho

Re: Updating SVG map example from Visualizing Data

2 years ago

shape(svg, 30, 30, width - (width*.10), height - (height*.10));

Aren't you supposed to display state instead of svg here? Need some size adjustment, I suppose.

kpowe11

Re: Updating SVG map example from Visualizing Data

2 years ago

Yes. Perfect! Do you know why the region that corresponds to the first line in the TSV is not being shaded. Here is the revised code. I've switched to a counties map but haven't changed anything else. I opened the SVG and it appears everything else works.

PShape svg;
Table data;
float dataMin = 0;
float dataMax = 100000;
void setup () {
size(1000, 650);
svg = loadShape("counties.svg");
data = new Table("population.tsv");
}
void draw() {
background(255);
noStroke();
smooth();
int rowCount = data.getRowCount();
for (int row = 0; row < rowCount; row++) {
String abbrev = data.getRowName(row);
PShape state = svg.getChild(abbrev);
if (state == null) {
//println("no state found for " + abbrev);
}
else {
float value = data.getFloat(row, 1);
if (value >= 0) {
svg.disableStyle();
shape(state, 35, 30);
float amt = norm(value, 0, dataMax);
float c = map(amt, 0, 1, 255, 0);
fill(100, c, 100);
}
}
}
PShape state_lines = svg.getChild("State_Lines");
PShape separator = svg.getChild("separator");
svg.disableStyle();
noFill();
stroke(255);
shape(state_lines, 35, 30);
stroke(200);
shape(separator, 35, 30);
}

kpowe11

Re: Updating SVG map example from Visualizing Data

2 years ago

Update:

It's the state_lines and separator that cause the problem when they are set to noFill(); Notice the county in Alabama when the fills are allowed versus when they are not. Peculiar, right? Any ideas?

kpowe11

Re: Updating SVG map example from Visualizing Data

2 years ago

For anyone following along, I figured it out. I was drawing the shape before the fill had been established. Hence, it was applying the fill to the next county in the loop not the current one and was doing the same with the lines drawn (not filling the first county in the sequence). The above maps are consequently also wrong. Here's the final code:

PShape svg;
Table data;
float dataMin = 0;
float dataMax = 50000;
void setup () {
size(1000, 650);
svg = loadShape("counties.svg");
data = new Table("population.tsv");
}
void draw() {
background(255);
noStroke();
smooth();
int rowCount = data.getRowCount();
for (int row = 0; row < rowCount; row++) {
String abbrev = data.getRowName(row);
PShape state = svg.getChild(abbrev);
if (state == null) {
println("no state found for " + abbrev);
}
else {
float value = data.getFloat(row, 1);
if (value >= 0) {
float amt = norm(value, 0, dataMax);
float c = map(amt, 0, 1, 255, 0);
fill(100, c, 100);
svg.disableStyle();
shape(state, 35, 30);
}
}
}
PShape state_lines = svg.getChild("State_Lines");
PShape separator = svg.getChild("separator");
noFill();
stroke(255);
shape(state_lines, 35, 30);
stroke(200);
shape(separator, 35, 30);
}

Top Reply