cjhin

D3 Time Series Day/Week/Month

Wanted to create a (daily) time series chart with automatic rollups to weekly/monthly lines AND nice transitions

Solution

The solution I ended up going with is a bit of an optical illusion.

All three views are technically backed by "daily" data.

cjhin

license: gpl-3.0
height: 950
border: no

cjhin

const data = {
  cameos: [
    {
      duration: 10,
      reviewStars: 4,
      likes: 102,
      imgUrl:
        "https://starboard-media.s3.amazonaws.com/v/thumb-5af35885716c190014ebfdb6-00001.jpg",
      talentUserId: "1",
      consumerUserId: "3",

cjhin

Riff on https://bl.ocks.org/cjhin/259f74fc88ab4962ebb4d50308a5e9b3

Which is in turn a riff on https://codepen.io/desandro/pen/vdwMyW

• Original code from Dave DeSandro https://codepen.io/desandro/

cjhin

Playing with https://codepen.io/desandro/pen/vdwMyW

Original code from Dave DeSandro https://codepen.io/desandro/

None of the code was written by me (Chas), I just wanted to play with it in a block.

cjhin

Major League Soccer season data (2005 - 2016)

Another riff on http://bl.ocks.org/cjhin/11ffe8165207693d513ad67f85d43251

This version uses d3 lines + d3 circles/points to create something similar to a bump chart.

How To:

• Hover over a point to view data for that club/season.

cjhin

Yeah it's bad pun sorry...

Playing with pie charts, base code from mbostock: https://bl.ocks.org/mbostock/3887235

Data

From National Priorities Project https://www.nationalpriorities.org/interactive-data/taxday/ Their data and sources: https://www.nationalpriorities.org/analysis/2017/tax-day-2017/tax-day-2017-notes-and-sources/

cjhin

Major League Soccer season data (2006 - 2016)

Slight riff on http://bl.ocks.org/cjhin/11ffe8165207693d513ad67f85d43251

This version uses d3 force layouts (and d3v4) to make it easier to read the nodes/circles. The catch is that b/c the force layout pushes the nodes horizontally, it's no longer possible to show as many years.

For now, this just shows a condensed chart of the past 10 years, theoretically at least one solution would be to make the chart "horizontally" scrollable"

cjhin

cjhin