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

Thu Mar 28 01:37:43 UTC 2013

Hello -- I've followed Stefan's instructions below but treemap still not
displaying on this page -- and no errors are detected. Any suggestions
greatly appreciated: http://openbudgetoakland.org/draft/oak11-13adopted.html

THANKS.

On Mon, Mar 25, 2013 at 12:51 PM, Stefan Wehrmeyer <
stefan.wehrmeyer at okfn.org> wrote:

> 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
>
>

-- 
Adam Stiles
510.280.4862
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.okfn.org/pipermail/openspending-dev/attachments/20130327/70deed5a/attachment.html>