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".
  • The Wealth & Health of Nations
    y and population radius of 180 nations over the last 209 years Nations are colored by geographic region mouseover to read their names As Tom Carden noted there s a surprising amount of work that goes into making something look simple For one data collected in recent years is consistent while data prior to 1950 is sparse although potentially misleading these visualizations use linear interpolation for missing data points The

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


  • Towards Reusable Charts
    can replace raw properties with getter setter methods that allow method chaining This gives the caller a more elegant way of constructing charts and also allows the chart to manage side effects when a configuration parameter changes The chart may also provide default configuration values Here we create a new chart and set two properties var myChart chart width 720 height 80 Modifying an existing chart is similarly easy myChart height 500 As is inspecting it myChart height 500 Internally the chart implementation becomes slightly more complex to support getter setter methods but convenience for the user merits additional developer effort And besides this pattern becomes natural after you ve used it for a while function chart var width 720 default width height 80 default height function my generate chart here using width and height my width function value if arguments length return width width value return my my height function value if arguments length return height height value return my return my To sum up implement charts as closures with getter setter methods Conveniently this is the same pattern used by D3 s other reusable objects including scales layouts shapes axes etc Implementation The chart can now be configured but two essential ingredients are still missing the DOM element into which to render the chart such as a particular div or document body and the data to display These could be considered configuration but D3 provides a more natural representation for data and elements the selection By taking a selection as input charts have greater flexibility For example you can render a chart into multiple elements simultaneously or easily move a chart between elements without explicitly unbinding and rebinding You can control exactly when and how the chart gets updated when data or configuration changes for example using a transition rather than an instantaneous update In effect the chart becomes a rubber stamp for rendering data visually The simplest way of invoking our chart function on a selection then is to pass the selection as an argument myChart selection From the API reference call invokes the specified function once passing in the current selection The call operator is identical to invoking a function by hand but it makes it easier to use method chaining Or equivalently using selection call selection call myChart Internally a call based chart implementation looks something like this You could also design your chart function to work directly with selection each but selection call is more general and has precedent with the brush and axis components function my selection selection each function d i generate chart here d is the data and this is the element Examples To make this proposal concrete consider a simple yet ubiquitous use case time series visualization A time series is a variable that changes over time We can visualize this as an area chart where the x and y axes respectively encode time and value as position To hold the chart this page has an initially empty p paragraph

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

  • Thinking with Joins
    the data join Data points joined to existing elements produce the update inner selection Leftover unbound data produce the enter selection left which represents missing elements Likewise any remaining unbound elements produce the exit selection right which represents elements to be removed Now we can unravel the mysterious enter append sequence through the data join First svg selectAll circle returns a new empty selection since the SVG container was empty The parent node of this selection is the SVG container This selection is then joined to an array of data resulting in three new selections that represent the three possible states enter update and exit Since the selection was empty the update and exit selections are empty while the enter selection contains a placeholder for each new datum The update selection is returned by selection data while the enter and exit selections hang off the update selection selection enter thus returns the enter selection The missing elements are added to the SVG container by calling selection append on the enter selection This appends a new circle for each data point to the SVG container Thinking with joins means declaring a relationship between a selection such as circle and data and then implementing this relationship through the three enter update and exit states But why all the trouble Why not just a primitive to create multiple elements The beauty of the data join is that it generalizes While the above code only handles the enter selection which is sufficient for static visualizations you can extend it to support dynamic visualizations with only minor modifications for update and exit And that means you can visualize realtime data allow interactive exploration and transition smoothly between datasets Here s an example of handling all three states var circle svg selectAll circle data data circle

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

  • Will It Shuffle?
    each element i being placed in position j at the end of a random shuffle Red cells represent negative bias green cells represent positive bias A good shuffling algorithm is unbiased you should see a uniform grey matrix with only a bit of white noise A bad algorithm will show streaks in the matrix indicating an un even distribution For more details read my previous post on the Fisher Yates

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

  • Path Transitions
    old points left and add a new point resulting in a new path path d M0 6L1 4L2 5 path The old path had three control points and the new path has three control points so the naïve approach is to interpolate each control point from the old to the new 0 0 0 6 1 6 1 4 2 4 2 5 Since only the y values change this interpretation results in a vertical wiggle When you tell D3 to transition between two paths it takes exactly this simple approach it finds numbers embedded in the associated path data strings pairs them in order and interpolates Thus the transition interpolates six numbers for the three control points and produces the same wiggle To eliminate the wiggle interpolate the transform rather than the path This makes sense if you think of the chart as visualizing a function its value isn t changing we re just showing a different part of the domain By sliding the visible window at the same rate that new data arrives we can seamlessly display realtime data The relevant code is only slightly changed from the original excerpt push a new data point onto the back data push random redraw the line and then slide it to the left path attr d line attr transform null transition attr transform translate x 1 pop the old data point off the front data shift Here x is a quantitative scale that encodes the x position The value of x 1 is about 24 which is the distance between control points in x When a new data point arrives we redraw the line instantaneously and remove the previous transform if any The new data point is thus initially invisible off the right edge of the chart Then we animate

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

  • Fisher–Yates Shuffle
    elements dwindle you ll keep randomly picking elements that have already been shuffled Watch how those duplicate selections in red cause the shuffle to crawl to a halt Here s what the implementation looks like in JavaScript not that you should use it function shuffle array var copy n array length i While there remain elements to shuffle while n Pick a remaining element i Math floor Math random array length If not already shuffled move it to the new array if i in array copy push array i delete array i n return copy This is bad and we can do better You can avoid duplicate selection by picking only remaining elements pick a random number in the range 0 m 1 where m starts at n and decreases by one with each iteration In other words m represents the number of remaining cards to shuffle Compact the remaining deck as you move cards so that you can easily pick out the next card for shuffling function shuffle array var copy n array length i While there remain elements to shuffle while n Pick a remaining element i Math floor Math random n And move it to the new array copy push array splice i 1 0 return copy This works pretty well but it still has relatively poor quadratic performance The problem is that when you remove each element from the original array array splice you have to shift all the subsequent elements down to compact the array On average that s n 2 elements to shift per element to shuffle giving O n 2 But here s an interesting if obvious insight the number of shuffled elements n m plus the number of remaining elements m is always equal to n This means we can do the

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

  • Les Misérables Co-occurrence
    Given this two dimensional representation of a graph a natural visualization is to show the matrix However the effectiveness of a matrix diagram is heavily dependent on the order of rows and columns if related nodes are placed closed to each other it is easier to identify clusters and bridges This example lets you try different orderings via the drop down menu This type of diagram can be extended with

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

  • Uber Rides by Neighborhood
    analyzing the frequency of rides between various neighborhoods in San Francisco However I wondered if an alternative network visualization might better reveal patterns or anomalies in the data Complex networks a k a hairballs are hard to visualize well This dataset is particularly interesting because it has directed edges For example there are twice as many rides from South of Market to Downtown than in the opposite direction You can t see directionality in the original visualization because only a single edge is drawn between each node Or perhaps the smaller edge is occluded by the larger one Some alternatives I considered A matrix diagram visualizes the adjacency matrix of the network by showing a two dimensional grid each cell in the grid encodes the relative frequency of rides from neighborhood i to neighborhood j These are great for finding clusters with appropriate sorting and central components and for looking at individual connections Unlike a node link diagram though you can t use geography for positioning A chord diagram arranges the nodes neighborhoods radially drawing thick curves between nodes The thickness of the curve encodes the frequency of rides between two neighborhoods Like matrix diagrams chord diagrams reveal asymmetries if

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



  •