Re: Digest for d3-js@googlegroups.com - 24 Messages in 11 Topics

35 views
Skip to first unread message

Adnan Khan

unread,
May 24, 2013, 9:01:44 AM5/24/13
to d3...@googlegroups.com


On Friday, 24 May 2013 at 11:00 PM, d3...@googlegroups.com wrote:

Group: http://groups.google.com/group/d3-js/topics

    mirba <mirb...@gmail.com> May 24 05:47AM -0700  

    Hi all,
    this is my first question in this group, and I'm quite new to q3.js as
    well. Up to now I've been able to find an answer to all my problems
    searching here and there, but I haven't found anything for this one, yet.
     
    There's this very nice map projection for USA that shows Alaska and other
    places moved to the bottom of the map (albers USA).
     
     
    I'm making several choropleth maps for nuts 2010 europe (the official way
    europe is divided in smaller region), and I will need to do something
    similar, showing Guyana, and some islands groups in different rectangles to
    the bottom or to the right of the map.
     
    Plus I would need to show a zoom of Malta, so that you can actually see
    what color the choropleth is for it.
     
     
    This is an example of my paths, extracted from a geojson, once they've been
    computed by q3.js:
    ....
    <path id="ITI3" class="nut cat2" d="M519.439374985861..."></path>
    <path id="ITI4" class="nut cat2" d="M496.3654726267817,575.02..."></path>
    <path id="LT00" class="nut cat1" d="..."></path>
    <path id="MT00" class="nut cat4" d="Z"></path>
    <path id="LV00" class="nut cat1" d="M637.95Z"></path><path id="MT00"
    class="nut cat3" d="M517.0753838465" fill="#000"></path>
    ...
     
     
     
    the id for the nuts region I'll need to move and resize are
    FR91 (south america)
    FR92 (south america)
    FR93 (south america)
    FR94 (somewhere close to madagascar)
    MT00 (malta)
    PT30
    PT20
    ES70
     
    What do you suggest to do?
    Do I need to create several different layers for each of them at creation
    time, is it better to take albers USA projection and modify it accordingly
    or to transform them somehow after the path has been created? Or maybe
    something else I haven't yet thought about?
     
    Thanks,
    Miriam
     
    <https://lh5.googleusercontent.com/-6QihmZoSgwE/UZ9g9ObZhcI/AAAAAAAAACM/5bX9UoRFeOk/s1600/somethinglikethis.png>

     

    Nacho Caballero <nach...@gmail.com> May 24 04:55AM -0400  

    The problem is that you are setting tickValues manually, instead of letting
    the x and y scale do it for you. Try commenting it out: //
    .tickValues(tickValues)
     
    var x = d3.scale.linear().rangeRound([0,
    width]).domain(d3.extent(tickValues));
     
    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    // .tickValues(tickValues)
    .tickFormat(function(d) {
    var ret = bpToChrMBP(d);
    return ret.chr;
    });
     
    You also don't need the make_x_axis function (same for y axis). Check out
    this zoomable scatterplot example:
    http://bl.ocks.org/ameliagreenhall/raw/d30a9ceb68f5b0fc903c/
     
     

     

    Matt Vincent <mattjv...@gmail.com> May 24 07:23AM -0400  

    I'm not sure why you point to this example. This doesn't limit the panning at all. Also, I need to explicitly set the tick values as I need the chromosome names associated to those tick values displayed and not randomly chosen by the axis/tick mechanisms.
     
    Matt
     

     

    hai2...@gmail.com May 24 02:03AM -0700  

    Hi,
     
    I have a table which contain the Application details. I have bound the data
    to the table. Now when i click on first column, i want to select a set of
    data from another csv which matches the row data. I am using filter for
    this. but it is not working.
     
     
     
    Code :
     
     
     
    d3.text(file, function(datasetText) {
    parsedCSV = d3.csv.parseRows(datasetText);
    var sampleHTML = d3.select("#TableContents")
    .append("table")
    .style("border-collapse", "collapse")
    .style("border", "2px black solid")
    .attr("style", "margin-left: 20px")
    .selectAll("tr")
    .data(parsedCSV)
    .enter().append("tr")
    .selectAll("td")
    .data(function(d){return d;})
    .enter().append("td")
    .style("border", "1px black solid")
    .style("padding", "5px")
    .text(function(d){return d;})
    .style("font-size", "12px")
    .on("click", function(){AppTableClick(this)});
    });
     

     
    function AppTableClick(a)
    {
    if (a.cellIndex ==0) // get the data from the first column
    {
    if(a.innerHTML!='Application')
    {

    d3.text(fileRef, function(datasetText) //file ref is the file that
    contains details of the application selected
    {

    parsedCSVref = d3.csv.parseRows(datasetText);

    var sampleHTMLref = d3.select("#AppCompcontents")
    .append("table")

    .filter(function(d){ return d.Application == a.innerHTML})
    //trying to filter based on the data selected by clicking
    .style("border-collapse", "collapse")
    .style("border", "2px black solid")
    .attr("style", "margin-left: 20px")
    .selectAll("tr")
    .data(parsedCSVref)

    .enter().append("tr")
    .selectAll("td")
    .data(function(d){alert(d);return d;})
    .enter().append("td")

    .style("border", "1px black solid")
    .style("padding", "5px")
    .text(function(d){return d;})
    .style("font-size", "12px");
    });
    }
    }
    }

     

    Tom Herold <hero...@gmail.com> May 23 07:27AM -0700  

    Hi,
     
    I would like to draw my elements differently based on wether the underlying
    data object has an attribute or not. For instance, I have edge objects in
    graph. Some of these have comments, some do not. Is there a way to control
    my drawing code, based on wether the "comment" attribute is present?
     
    Code (in Coffescript):
     
    @paths = @paths.data(@edges)
     
    #add new edges
    path = @paths.enter().append("svg:path")
    path
    .attr(
    class : "edge"
    d : (data) -> data.getLineSegment()
    )
    .style("marker-end", "url(#end-arrow)")
    * .append("svg.circle") if datum().comment != undefined ???*
    * .attr(....)*
     
    #update existing ones
    @paths.attr(
    d : (data) -> data.getLineSegment()
    )
     
    #remove deleted edges
    @paths.exit().remove()

     

    Andy Thornton <thor...@gmail.com> May 23 09:31AM -0500  

    Make your attribute a function of the data. As an example:
     
    .append('circle')
    .attr('fill', function (d) { return d.comment ? 'red' : 'black';})
     
    Andy
     
     

     

    Tom Herold <hero...@gmail.com> May 23 07:35AM -0700  

    That is not really what I want. I want to append an object (or not)
    depending whether the attribute is present.
     
    On Thursday, May 23, 2013 4:31:44 PM UTC+2, Andrew Thornton wrote:

     

    Tom Herold <hero...@gmail.com> May 23 08:12AM -0700  

    Almost, right. What about the third circle in your demo? I still would like
    to draw all cirlces regardless of the "comment" attribute. But those
    circles that have it should get additional svg element. (e.g. callout
    combined from text and another circle)
     
    Any ideas?
     
    On Thursday, May 23, 2013 5:08:06 PM UTC+2, Andrew Thornton wrote:

     

    Ian Johnson <enj...@gmail.com> May 23 08:47AM -0700  

    You can do
    .each (d,i) ->
    if d.comment
    d3.select(this).append('circle')...
     
    But you may have an issue appending a circle to a path element. You
    probably want to put both in a group <g> element.

     

    Tom Herold <hero...@gmail.com> May 23 10:06AM -0700  

    I suppose I could use .each(). But wouldn't that defeat the whole purpose
    of enter() and exit()?
     
    But you may have an issue appending a circle to a path element. You
    > probably want to put both in a group <g> element.
     
    Surely, I would that.
     
    On Thursday, May 23, 2013 5:47:20 PM UTC+2, Ian Johnson wrote:

     

    Tom Herold <hero...@gmail.com> May 24 01:23AM -0700  

    Well, well. Thank you very Mr. Ian Johnson! I guess that is exactly what I
    was looking for! I appreciate your effort.
     
    On Thursday, May 23, 2013 7:52:52 PM UTC+2, Ian Johnson wrote:

     

    Pepijn Olivier <olivier...@gmail.com> May 24 10:20AM +0200  

    Hi Marc,
     
    About the blurred path that fits tightly within the original path: Do you
    know of a method with which I can extract some coördinates of the path?
    (like top, left and right).
     
    If I'd have that, I could just draw the shadow myself, in this case it
    would be nothing more than just 2 dark lines.
     
    Pepijn
     
     

     

    Ian Johnson <enj...@gmail.com> May 23 11:29AM -0700  

    I tried spending a few minutes looking through the code but you have a lot
    going on, including some testing stuff.
     
    It might be best to extract a simplified version into bl.ocks.org or
    tributary.io to focus on your specific problem. in doing so you will likely
    come to a clearer understanding, as well as make it accessible for the fine
    folks on this list to help.
     
     
     
    --
    Ian Johnson - 周彦
    http://enja.org

     

    William Andrews <william...@gmail.com> May 23 11:01AM -0700  

    Hello,
    I am trying to emulate the functionality found in this example:
    http://bl.ocks.org/dem42/3878029
    but instead with the zoom being applied to the y-axis.
     
    I think I am close as I can get the Y-axis itself to redraw and
    transition appropriately, but redrawing the lines isn't working.
     
    I suspect the issue is with this code:
     
    svg.selectAll('.path')
    .data(data)
    .enter()
    .append('path')
    .attr('d', function (d) {
    return line(d.values);
    })
    .attr('class', 'path')
    .attr('clip-path', "url(#clip)")
    .attr('stroke', function (d) {
    return d.color;
    });
     
    it works when drawing the chart with lines initially but doesn't seem to
    work in the onSliderChange handler
     
    complete code is here:
    http://jsfiddle.net/willzofsteel/EAZLM/
     
    Thank you! :)
     
    -William

     

    William Andrews <william...@gmail.com> May 23 11:23AM -0700  

    nevermind figured it out.
     
    I don't need to enter() in the second call, i just need to select and set
    the 'd' attribute.
     
    On Thursday, May 23, 2013 11:01:55 AM UTC-7, William Andrews wrote:

     

    dms <dinar...@gmail.com> May 23 09:45AM -0700  

    Thank you Chris !
     
    Sometime ago I'd seen this example, but trying to find it again yesterday
    wasn't easy !
    Thank you very much for your time.
     
    I do appreciate.
     
    Cheers.,
     
    On Wednesday, May 22, 2013 8:30:51 PM UTC-7, Chris Viau wrote:

     

    dms <dinar...@gmail.com> May 23 09:47AM -0700  

    That's the line that does all the trick:
     
    .defined(function(d) { return d.y != null; })
     
     
    but, are there a way of NOT sending positions with null values, so I avoid sending tons of null data to my visualization ?
     
     
    On Wednesday, May 22, 2013 8:30:51 PM UTC-7, Chris Viau wrote:

     

    ma...@m00s3jaw.net May 23 07:24AM -0700  

    Do you have an example that does this?
     
    On Wednesday, June 29, 2011 12:49:31 PM UTC-4, Mike Bostock wrote:

     

    Tom Herold <hero...@gmail.com> May 23 07:13AM -0700  

    I use a jQuery plugin for mousewheel
    handling: https://github.com/brandonaaron/jquery-mousewheel
    Just attach it to the website body and update your lever on the event
    handler. Works pretty well. Make sure you dont use "delta" value directly.
    I am under the impression that the value increases/decrease at a different
    speed for mice from various manifacturers.
     
    Something like this: (Coffeescript)
     
    $("body").on "mousewheel", (evt, delta, deltaX, deltaY) =>
     
    evt.preventDefault()
    if deltaY > 0
    @changeZoomSlider(0.1)
    else
    @changeZoomSlider(-0.1)
    ------------------------------------------------------------------------------------
    changeZoomSlider : (delta) ->
     
    $slider = $(".zoom-slider input")
    sliderValue = parseFloat($slider.val())
    $slider.val( sliderValue + delta )
     
    On Wednesday, May 22, 2013 11:59:50 PM UTC+2, John Delacour wrote:

     

You received this message because you are subscribed to the Google Group d3-js.
You can post via email.
To unsubscribe from this group, send an empty message.
For more options, visit this group.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Reply all
Reply to author
Forward
0 new messages