Blakles posted:

Is it possible to build a string representing a JSON object element, then pass that string as the object to be searched in a foreach statement? The code below isn't working and I'm thinking it's because the obj variable is being built as a string, but how do I convert it to a JSON object reference?

Wheany posted:

So maybe this is what you want

JavaScript code:

while (url_parts.length) {
	current_part = url_parts.pop();
	current_obj = current_obj[current_part];
}

Dangerllama posted:

I'm hoping this is the right thread for this,

I'm trying to learn Angular (and just generally get better at JS) by mucking about with an ad-hoc project. The gist is that you select your city, a restaurant type, and a few other criteria in order to generate a stereotypical Yelp review. Unfortunately, I'm pretty sure I'm going about it the wrong way.

I cloned the stock Angular app template and started generating controllers, partials, and the back-end JSON (my repo is here, please ignore some of the DRY violations). Basically, I'm reading from various JSON docs (cities.json, restaurants.json, ratings.json, reviews.json) and, based on a user's selections (pick a city, click next, pick a restaurant type, click next, etc), creating the view accordingly. That ultimately leaves me with a review partial that has a filter for every user selection:

code:

...
{{ intro }} 
<span id="city" ng-repeat="city in cities | filter:data['city_id']">{{ city.name }}</span>, 
{{filler1}}
<span id="foodtype" ng-repeat="restaurant in restaurants | filter:data['cuisine_id']">{{ restaurant.cuisine }}</span>
...

So basically, the default view lists every city, but then angular filters out every one but the city that the user previously selected. Case in point: If I load the #/review route without having selected any user data, it just spits out all the cities, food types, etc. because nothing has been filtered out.

I presume the alternative solution would be to add some logic in the controller that creates scoped variables like $scope.city_name and $scope.cuisine_type, changing the above to:

code:

 ...
{{ intro }} 
{{ city_name }},
{{filler1}}
{{ cuisine_type }}
...

But that seems like it'll lead to a bunch of fat controllers and doesn't use any of the directive-based coolness of Angular. So I suppose my question is: How does one go about deciding what goes in a filter vs what should be pared down at the controller level before it gets to the HTML/template?

TildeATH posted:

Is there enough interest among goons for a d3.js thread? I use it quite a bit for data viz but also for mapping and traditional DOM manipulation instead of jQuery and think it's pretty awesome.

TildeATH posted:

Is there enough interest among goons for a d3.js thread? I use it quite a bit for data viz but also for mapping and traditional DOM manipulation instead of jQuery and think it's pretty awesome.

TildeATH posted:

Is there enough interest among goons for a d3.js thread? I use it quite a bit for data viz but also for mapping and traditional DOM manipulation instead of jQuery and think it's pretty awesome.

Alligator posted:

As an aside, if you've got some resources you found particularly useful when starting out (besides the examples) I'd love to see them, I'm stumbling through my first few projects with d3 right now.

EAT THE EGGS RICOLA posted:

I can contribute to a d3.js thread if someone else starts one. It owns.

EAT THE EGGS RICOLA posted:

I can contribute to a d3.js thread if someone else starts one. It owns.

Tres Burritos posted:

I'm using/learning highcharts at work right now, can you compare / contrast?

Dolex posted:

You could build recreate highcharts with D3.

D3 is a low-ish level SVG toolkit that also includes some helper functions for common data visualization problems (scale, transition, axes, etc)

D3 doesn't do anything for you (though the d3.layout.* kinda does). You are expected to have an understanding of the SVG spec, how the DOM works, and a fair bit of functional javascript.

People complain about the learning curve of D3, when they are really complaining about the learning curve of more advanced javascript features, and the obtuse and unforgiving SVG spec.

Having said that, D3 is immensely powerful and fantastic to use once you have gotten over the initial learning period.

I use D3 in my day job building web-based data analysis tools for a cloud security company.

If you are serious about web based interactive visualization you would be doing yourself a service to learn how to use D3.

TildeATH posted:

It's really something. Because it requires a modern browser, you end up using really clean JavaScript and you can even ditch jQuery. The new OpenStreetmap editor is written entirely in D3:
https://github.com/openstreetmap/iD/

Kobayashi posted:

Can you say more about this? I'm aware of D3, but I'm mostly interested in it as a way to get familiar with clean, modern JavaScript. What techniques are used by D3 that allows it to get away from jQuery?

TildeATH posted:

a bunch of other graphical, interactive bits that I think are no longer optional.

Munkeymon posted:

I have a comment in the last line of one of my scripts that helps Chrome not be useless for debugging it when it's loaded dynamically (downloaded and exec'd, basically):

JavaScript code:

//@ sourceURL=anything.whatever

Some versions of IE (at least IE 9) are interpreting this line, as in running it as part of the script. Does anyone know what the everloving gently caress is up with this?

Edit: I think it only happens when the script is included on a page with a doctype that triggers compatibility mode. Maybe. Need to look into it more.

LP0 ON FIRE posted:

I'm trying to simply copy an array of arrays into an array using the example:

teamRedVelArrays = velArraysBackup.slice(0);

This doesn't seem to make my array of arrays change to the backup or vise-versa. Is it different for an array of arrays?

Munkeymon posted:

I'm just curious as to what you mean by this. Pretty much every demo they link to is some kind of graph, with the exception of a rather neat photo accordion thing that's kind of a niche application.

Munkeymon posted:

I guess I'll have to learn how an SVG DOM works to do anything more interesting with it than jQuery already does? Not opposed to learning, just annoyed that it's yet another obtuse spec that I'll just end up writing my own mini-library to paper over until 'd4js' comes out and does it better

TildeATH posted:

Well, by that I meant that charts and maps and "interactive infoviz" should and can be everywhere. I find that everyone wants a map, and if I can keep one more crappy Google Map with a bunch of crappy pastel markers from coming into existence, then I'm happy. But as far as using D3 for non-graphical stuff, I mean that it's just as easy to make buttons, divs, and list elements using selection and data binding. And if you take a look at the undo implementation in iD (the Open Street Map editor) or better the behaviors:
https://www.mapbox.com/osmdev/2013/02/27/id-architecture-part-2/

..then you can see how D3's behaviors have a lot more to do with general web development than with infoviz. Or you can look at something like:

https://kindred.stanford.edu

Which has a bunch of infoviz, but also has lists and tables and all that and only uses D3 for it all. Or realize that Mike Bostock now works for the New York Times and so the various amazing poo poo coming out of NYT lately has a lot of D3 DNA in it. The real problem with D3 examples is that everyone thinks that D3 is for one-offs or it's a replacement for Flash.


I think, and I'm really out of my depth when it comes to jQuery, since I was never a jQuery master, that D3 is useful precisely because modern JavaScript isn't a steaming pile of poo poo, and so when you're using it, you're only using it for the data-binding, behaviors, custom events, and of course awesome maps and stick-and-circle diagrams.

I think D3 is actually going to be as big for the modern web as jQuery was for the old one.

Munkeymon posted:

That said, D3's Enter/Exit examples have me somewhat confused. (run on an empty page)

code:

//works fine but I'm not sure how selecting nonexistent elements does anything?
d3.select('body').selectAll('p')
    .data([12,3,65,87,45,6,18])
    .enter().append('p')
    .text(function(d){return "I'm " + d});

d3.select('body').selectAll('p')
    .enter().append('p')
    .data([12,3,65,87,45,6,18])//error - something about there being no enter method on an array
    .text(function(d){return "I'm " + d});

d3.select('body') //12 gets bound to the body, I guess? At any rate, it doesn't show up
    .data([12,3,65,87,45,6,18])
    .enter().append('p')
    .text(function(d){return "I'm " + d});

I guess I'm trying to treat it too much like jQ?

https://github.com/mbostock/d3/wiki/Selections#wiki-d3_selectAll posted:

Selections are arrays of elements—literally. D3 binds additional methods to the array so that you can apply operators to the selected elements, such as setting an attribute on all the selected elements. One nuance is that selections are grouped: rather than a one-dimensional array, each selection is an array of arrays of elements. This preserves the hierarchical structure of subselections.

Suspicious Dish posted:

hi my name is method chaining and i make code unreadable. what's a variable?

Kobayashi posted:

^ I remember closures from school, but that was a decade ago and I haven't really coded much since then. How does the "num" parameter get passed in that last example? Stated another way, I'm having trouble intuiting the the way values are flowing through that chain.

quote:

selection.text([value])
...if value is a function, then the function is evaluated for each selected element (in order), being passed the current datum d and the current index i, with the this context as the current DOM element. The function's return value is then used to set each element's text content...

A MIRACLE posted:

JavaScript code:

d3.select('body').
  selectAll('p').
  data([12, 3, 65, 87, 45, 6, 18]).
  enter().
  append('p').
  text(myNumber);

Kobayashi posted:

^ I remember closures from school, but that was a decade ago and I haven't really coded much since then. How does the "num" parameter get passed in that last example? Stated another way, I'm having trouble intuiting the the way values are flowing through that chain.

TildeATH posted:

Dots after always makes more sense, but it looks so wrong because nobody does it.

Suspicious Dish posted:

hi my name is method chaining and i make code unreadable. what's a variable?

Helado posted:

TildeATH posted:

Method chaining can be frustrating, especially with D3 where a selection is the function being returned until you enter/exit, in which case enter/exit is the function being returned, or if you append, in which case the append function is being returned, or on Tuesdays, or in words like neighbor and weigh...


Dots after always makes more sense, but it looks so wrong because nobody does it.

Kobayashi posted:

^ I remember closures from school, but that was a decade ago and I haven't really coded much since then. How does the "num" parameter get passed in that last example? Stated another way, I'm having trouble intuiting the the way values are flowing through that chain.

Kobayashi posted:

^ I remember closures from school, but that was a decade ago and I haven't really coded much since then. How does the "num" parameter get passed in that last example? Stated another way, I'm having trouble intuiting the the way values are flowing through that chain.