[openspending-dev] Launching OS for Oakland, Calif.

Mon Mar 25 19:51:46 UTC 2013

Hi Adam,

you already created a Treemap visualisation here:

http://openspending.org/oakland_adopted_budget_fy2011-12/views/test-treemap

Have a look at the source code for the embed site:

http://openspending.org/oakland_adopted_budget_fy2011-12/embed?widget=treemap&state=%7B%22drilldowns%22%3A%5B%22Department%22%2C%22Program%22%5D%2C%22year%22%3A2011%2C%22cuts%22%3A%7B%7D%7D&width=700&height=400

So on the JavaScript part there is:
 - jQuery
 - openspendingjs/prod/boot.js
 - some configuration to OpenSpending (scriptRoot, separators)
 - openspendingjs/lib/widgets.js
 - openspendingjs/app/bob/bob.js
 - openspendingjs/widgets/treemap/main.js
 - some simple configuration objects (state, context)
 - and then just: new OpenSpending.Treemap($('#widget'), context, state);

Hope this helps.

Cheers
Stefan

On 24.03.2013, at 20:28 , Adam Stiles <adam.d.stiles at gmail.com> wrote:

> Stefan (or anyone who can help),
> 
> As a test, I'm trying to make this data set appear in a custom site:
> http://openspending.org/oakland_adopted_budget_fy2011-12
> 
> My assumption was that I needed the OS JS file:
> https://github.com/openspending/openspendingjs
> 
> Can someone tell me:
> 
> - What other files are needed in my directory
> 
> - What code (html, JS, CSS) is required on the page itself to load a
> treemap of that dataset (or point me to a simple example)
> 
> At some point, it would be really useful to people creating custom
> sites to have one "template" for adding treemap, bubbletree, etc.
> There are many more complicated examples, but unless I'm missing it,
> there doesn't seem to be a documentation or example for this basic
> application.
> 
> This post came very close, but not quite enough info for the someone
> with only basic JS skills:
> http://openspending.org/blog/2013/03/20/How-to-Embed-Open-Spending-Databases-to-Your-Own-Website.html
> 
> Thanks!
> 
> Adam
> 
> 
> 
>> 
>> Then it's just a matter of glueing the widgets and custom maps together.
>> Unfortunately, currently the widgets are only documented through example use, not through tutorials
>> 
>> Here's another example of using the treemap and datatable I recently built for Berlin:
>> https://github.com/okfde/haushaltberlin/
>> http://okfde.github.com/haushaltberlin/
>> 
>> To make a custom site using the OpenSpending API and widgets, you need to have a certain proficiency in JavaScript and be ready to read some code.
>> 
>>> - How do I make each level (click) on the visual generate a unique URL (or whatever is required to have comments specific to each level of the visual)?
>> 
>> You can use #! URLs according to the Disqus Docs:
>> http://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
>> 
>> Cheers
>> Stefan
> 
> 
> 
> -- 
> Adam Stiles
> 510.280.4862
> 
> _______________________________________________
> openspending-dev mailing list
> openspending-dev at lists.okfn.org
> http://lists.okfn.org/mailman/listinfo/openspending-dev
> Unsubscribe: http://lists.okfn.org/mailman/options/openspending-dev