I'm a linguist, not a geographer, and a first-time poster here.

I have some data about the use of a particular phrase in England between the years of 1225 and 1500. I have geolocations for the places where various manuscripts (MSs) were produced. I have the year (roughly) of the MSs, and I have token counts of the phrase in each MS. There are about 100 MSs, and thousands of tokens, but only tens of locations.

I want to produce a map with a slider that controls the year. I want a dot to appear in the MS location in the year when the MS is produced, and the size of the dot should grow as the number of tokens from that location accumulates over time.

So, if there was one MS in London in 1250 with 10 tokens, a small dot should appear at London when the slider is at 1250. As the slider is moved to 1275, the dot should remain stable. In 1300, a new MS is produced with 20 more tokens, so the area of the dot should now grow.

I've produced this in CartoDB, but it's not quite right. The number for the slider should show the year, not just an integer from 1-64, and I can't vary the sizes of the dots.

Is there something I can fix here or is there a better tool for doing this? I'm not married to any one platform, but as I said, I'm not a geographer, and I'm also not a web designer.

  • Does it have to be a webmapping solution? – underdark Jan 11 '15 at 16:59
  • I suppose it doesn't have to be. – Brett Reynolds Jan 11 '15 at 17:03
up vote 6 down vote accepted

Yep, it is totally possible! Here are two examples with the same dataset, one is for changing intensity over time,

https://team.cartodb.com/u/andrew/viz/32ff4f28-7e51-11e4-9555-0e853d047bba/public_map

The second is more like you request (I think) and shows cumulative amount over time

http://team.cartodb.com/u/andrew/viz/a0a551a0-9b41-11e4-856f-0e853d047bba/embed_map

Imgur

The way I did the second one is using Torque in the CartoDB editor

Imgur

After selecting the default Torque, I changed some things with the CartoCSS. The full CartoCSS is as follows,

/** torque visualization */

Map {
-torque-frame-count:512;
-torque-animation-duration:30;
-torque-time-attribute:"fromdate";
-torque-aggregation-function:"sum(1)";
-torque-resolution:16;
-torque-data-aggregation:cumulative;
}

#crime_incident_reports{
  comp-op: source-over;
  marker-fill-opacity: 1;
  marker-line-color: #FFF;
  marker-line-width: 0;
  marker-line-opacity: 0;
  marker-type: ellipse;
  marker-width: 1;
  marker-fill: #F84F40;
}
#crime_incident_reports[value>10]{
  marker-width: 2;
}
#crime_incident_reports[value>50]{
  marker-width: 3;
}
#crime_incident_reports[value>100]{
  marker-width: 4;
}
#crime_incident_reports[value>150]{
  marker-width: 5;
}
#crime_incident_reports[value>200]{
  marker-width: 6;
}
#crime_incident_reports[value>250]{
  marker-width: 7;
}
#crime_incident_reports[value>300]{
  marker-width: 8;
}

The key bits are.

-torque-aggregation-function:"sum(1)"; which means that the value for any cell will just be the sum of all the events in that cell. If instead you wanted to sum a particular column, you could change it to sum(your_column_name) and it works the same.

-torque-resolution:16; is the size of each cell in space. I made it pretty big here so that they never overlap if you zoom in and out, but I can still make the biggest marker pretty large (8px radius, or 16px diameter matches the size of the torque resolution).

-torque-data-aggregation:cumulative; is key to keeping the dots on the page

I then just setup each step of my bubble size corresponding with some value in the cell. The result of my sum(1) call above that I pointed out, is stored in a variable called ``value``` that I can use in my styling. So the following,

#crime_incident_reports[value>250]{
  marker-width: 7;
}

Is just saying that if there were more than 250 events in a cell at my given point in time, draw the bubble with a 7px radius.

Hope that helps.

  • This is almost perfect. It won't allow me to change the value of -torque-time-attribute; It's currently cartodb_id, and nothing else is accepted. – Brett Reynolds Jan 15 '15 at 16:03
  • You need to have a date or numeric formatted column, or it wont recognize it. My guess is that you have a date that is formatted in a string column. In your table view, just go to that column and click where it says "string" and it will give you a drop down to change it to date – andrewxhill Jan 15 '15 at 21:47
  • Yes, I had that thought too, but it is already set to 'number'. – Brett Reynolds Jan 16 '15 at 8:21
  • i guess i don't follow then. if you just use the wizard, not the cartocss yet, can you select your column from the dropdown? – andrewxhill Jan 17 '15 at 12:13
  • Yes, I've tried that too to no effect. All I get by the slider is the integers 0, 1, 2, etc. It will let me select it, but the display doesn't change. – Brett Reynolds Jan 17 '15 at 12:45

It sounds to me that you want to make some custom modifications to how the UI behaves. To do this you need to load your visualization through the client-side library CartoDB.js and implement the behaviour you describe above. Of course this requires some knowledge of javascript, and time.

In case you have not seen them have a look at the following resources:

  • I don't know javascript, but I can certainly have a look at it. This gives me a useful direction to follow in case nothing canned is available. – Brett Reynolds Jan 13 '15 at 7:01

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.