archive-org.com » ORG » O » OCKS.ORG

Total: 58

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • Fisheye Distortion
    localized circular nature of the distortion can be seen clearly by applying it to a uniform grid This type of distortion is particularly useful for disambiguating edge crossings in static network layouts edges between distant nodes are distorted more strongly than local ones If you dislike the chaotic appearance of dynamic force layout consider using distortion instead For more network diagrams see my posts on matrix diagrams hive plots and chord diagrams Cartesian Distortion Circular fisheye is only one of many possible distortion functions Two disadvantages of circular distortion are that it compresses rather than magnifies the area near the circumference of the circle and that it requires curved grid lines to show the distortion accurately The latter makes it unsuitable for visualizations that have quantitative position encodings such as scatterplots Sarkar and Brown therefore recommend a different function that magnifies continuously so as to avoid local minification Furthermore they demonstrate applying the distortion to each dimension separately resulting in Cartesian distortion With this technique straight lines parallel to the x or y axis remain straight even after distortion This means you can use standard axes in conjunction with fisheye distortion in scatterplots Fisheye distortion allows you to zoom into

    Original URL path: https://bost.ocks.org/mike/fisheye/ (2016-04-30)
    Open archived version from archive


  • D3 + Leaflet
    using the zoomAnimation option when constructing the map Loading and Projecting GeoJSON Next we load the GeoJSON file using d3 json d3 json us states json function error collection if error throw error code here The load is asynchronous so the remaining code in this example is within the callback function The passed collection is the contents of the us states json file a single FeatureCollection with features for each of the 50 United States and Puerto Rico D3 and Leaflet use different APIs for rendering shapes and projecting points Fortunately it s easy to adapt Leaflet s API to fit D3 by implementing a custom geometric transformation A transform converts an input geometry such as polygons in spherical geographic coordinates to a different output geometry such as polygons in projected screen coordinates Using d3 geo transform it can be implemented as a simple function that projects individual points This code adapts Leaflet s latLngToLayerPoint and LatLng methods to project a single point passing the resulting coordinates to an output geometry stream function projectPoint x y var point map latLngToLayerPoint new L LatLng y x this stream point point x point y Now that we can project points we can create a d3 geo path to convert GeoJSON to SVG var transform d3 geo transform point projectPoint path d3 geo path projection transform We can also create path elements for each of the features using D3 s data join var feature g selectAll path data collection features enter append path The path elements are initially empty later we ll initialize the path data by setting the d attribute feature attr d path The selection attr method computes the path data for each feature The path elements are bound to the associated GeoJSON feature so these features are fed to the

    Original URL path: https://bost.ocks.org/mike/leaflet/ (2016-04-30)
    Open archived version from archive

  • Zoomable Treemaps
    Padding is sometimes used to show the hierarchy via containment though this introduces area distortion Cushion gradients also indicate hierarchy but are somewhat unintuitive or perhaps just ugly The treemap above uses interaction to reveal the hierarchy incrementally clicking on a node zooms in Only two levels of the hierarchy are visible at a time This allows the layout s aspect ratio ideally φ to be optimized for the current

    Original URL path: https://bost.ocks.org/mike/treemap/ (2016-04-30)
    Open archived version from archive

  • Line Simplification
    remarkably intuitive explanation it progressively removes points with the least perceptible change Amazingly simplification often allows the elimination of 95 or more points while retaining sufficient detail for visualization For example the GeoJSON file used to draw the continental United States above can be reduced from 531KB to 27KB with only minor visual changes To determine which point removal incurs the smallest visible change Visvalingam s algorithm computes triangles formed by successive triplets of points along each line the point with the smallest associated triangle is removed After each removal the area of neighboring triangles is recomputed and the process is repeated For example consider this line of six points Ignoring the endpoints the effective area of each point is determined by its associated triangle The purple triangle is the smallest so the fifth point is removed first This removal requires recomputing the area of the adjacent red triangle A min heap is useful for finding the smallest triangle quickly Adjacent triangles can be efficiently repositioned within the heap The green triangle is now the smallest so the third point is removed and the adjacent orange and red triangles are recomputed This process continues until only the endpoints remain There

    Original URL path: https://bost.ocks.org/mike/simplify/ (2016-04-30)
    Open archived version from archive

  • Sankey Diagram
    to target This example is built with D3 s Sankey plugin The plugin takes as input the nodes and weighted links computing positions via iterative relaxation After fixing the horizontal position of each node the algorithm starts from the sources on the left positioning downstream nodes so as to minimize link distance A reverse pass is then made from right to left and then the entire process is repeated several

    Original URL path: https://bost.ocks.org/mike/sankey/ (2016-04-30)
    Open archived version from archive

  • Object Constancy
    of labels Key Functions To achieve object constancy with D3 js specify a key function as the second argument to selection data This function takes a data point as input and returns a corresponding key a string such as a name that uniquely identifies the data point For example the bar chart above defines data as objects State ND Total 641481 Under 5 Years 0 065 5 to 13 Years 0 105 14 to 17 Years 0 053 18 to 24 Years 0 129 16 Years and Over 0 804 18 Years and Over 0 777 15 to 44 Years 0 410 45 to 64 Years 0 260 65 Years and Over 0 147 85 Years and Over 0 028 A suitable key function for this data returns the State property a FIPS code function key d return d State When you join the top ten states to the bars three selections are returned var bar svg selectAll bar data top function d return d State The selection bar is the update selection states that persist across the transition The selections bar enter and bar exit are the enter and exit selections states that are incoming or outgoing respectively For more on these three selections see Thinking with Joins For example when changing from the 18 24 bracket to 14 17 Alaska moves from spot 5 to 1 Since it is in the top ten in both age brackets it is in the update selection An update transition interpolates the transform attribute to translate Alaska smoothly to its new position Simultaneous subtransitions resize the bar and reposition the associated label var barUpdate d3 transition bar attr transform function d return translate 0 y d State barUpdate select rect attr width function d return x d age barUpdate select text attr

    Original URL path: https://bost.ocks.org/mike/constancy/ (2016-04-30)
    Open archived version from archive

  • Nested Selections
    by parent row This makes them more difficult to manipulate on a row or column basis In contrast D3 s nested selections retain the hierarchy To group by row first select the tr elements then select the td elements The concept of nested selections is one of the main differences between D3 and other DOM libraries such as jQuery and Prototype var td d3 selectAll tbody tr selectAll td Now if you want to color the first column red use the index i This ternary expression returns null if i is a truthy value non zero and red if is not By returning null for the other columns the color is inherited from the current stylesheet td style color function d i return i null red You can also access the row index j by adding a third argument to the function Nesting and Data Hierarchical elements are often driven by similarly hierarchical data nested selections are therefore convenient for binding data too To continue the example you might represent the table s associated data as a matrix an array of arrays var matrix 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 To join the numbers to the corresponding table cells first join the outer array matrix to the rows and then join the inner arrays matrix 0 matrix 1 to the cells var td d3 selectAll tbody tr data matrix selectAll td data function d i return d d is matrix i Notice that the data method can either take an array such as matrix or a function that returns an array Arrays are often used with flat selections since flat selections only have one group while nested selections typically require a function The initial row selection is flat since it was created with d3 selectAll var tr d3 selectAll tbody tr data matrix The cell selection in contrast is nested var td tr selectAll td data function d return d matrix i The data operator defines the array of data for each group Here the data function is invoked once per row and successively passed each parent datum Since the parent data is an array of arrays the data function simply returns the inner array for each row of cells Nesting and the Parent Node See Thinking with Joins for a quick overview of D3 s data join concept Nesting selections has another subtle yet critical side effect it sets the parent node for each group The parent node is a hidden property on selections that determines where to append entering elements For example if you attempt a data join on a top level selection you get an error d3 selectAll table tr data matrix enter append tr error The error occurs because the default parent node is the document s root html element and you can t add tr elements directly to the root Instead select a parent before performing the data join d3 select table selectAll tr data

    Original URL path: https://bost.ocks.org/mike/nest/ (2016-04-30)
    Open archived version from archive

  • Hive Plots
    that is position and in the worst case produce an indecipherable hairball Enter Krzywinski s hive plot Hive plots define a linear layout for nodes grouping nodes by type and arranging them along radial axes based on some property of data The explicit position encoding has the potential to better reveal the network structure while communicating additional information Hive plots can also be extended to show aggregate relationships Each node above represents a class in a software library Nodes are divided into three categories The 12 o clock axis the top shows source nodes classes with only outgoing dependencies The bottom left axis shows target nodes with only incoming dependencies The remaining nodes in the bottom right have both incoming and outgoing dependencies these are duplicated to reveal dependencies within this category This grouping immediately reveals much about the different classes The highest level implementations such as layouts and controls are arranged in the top axis while interfaces and internal abstractions are in the bottom right Heavily interconnected classes such as Transitioner and Data are emphasized by numerous links The handful of decoupled classes those with only incoming dependencies are delineated in the bottom left A variation of this design

    Original URL path: https://bost.ocks.org/mike/hive/ (2016-04-30)
    Open archived version from archive



  •