Comments (7)
Yes, the way I typically solve this is I just pick an arbitrary day (typically January 1, 1900 due to the default behavior of d3-time-format), and then map all of my dates to that day. The simplest way of doing that (in D3 3.x) is something like this:
var parseTime = d3.time.format.utc("%H:%M").parse;
var midnight = parseTime("00:00"); // "Mon, 01 Jan 1900 00:00:00 GMT"
Then, make a time scale for the day:
var x = d3.time.scale.utc()
.domain([midnight, d3.time.day.utc.offset(midnight, 1)])
.range([0, width]);
The result:
I’m not sure it’d be possible for a scale to do this for you automatically, since it’s more of a data-processing step to pick a consistent representation for time-of-day (given that JavaScript only provides a natural representation for absolute time). I suppose you could standardize those arbitrary intervals, though, and then maybe do some modulus arithmetic so that any date passed to the scale outside the standard interval was converted. At any rate, the current solution doesn’t feel terrible.
There’s an interesting (and common!) problem with this particular use case, which is that by aggregating the data in UTC, you blur the local pattern slightly since the local time zone offset changed over the course of data collection. That can only be fixed by changing how the raw data was aggregated, though, since at this point the counts have already been assigned to the wrong bins.
from d3-scale.
Thank you for this explanation and example. It makes total sense. Indeed, using JavaScript Dates to represent relative time does not feel terrible. I'm learning lots of things from studying this example, like passing negative values to tickSize, and how to measure text. Also, that's a great point about using local times before aggregation to show the pattern more clearly.
I noticed that your normalization does not account for the aggregation over 521 Twitter users. The Y axis shows the number of tweets per hour summed over that whole group, but if you divide by 521 when assigning d.rate
, then the Y axis would be the average tweets per hour per user.
As a side note, the Vega-Lite project has relative time units in its roadmap.
Closing the issue, as I think the fundamental answer here is "it’s more of a data-processing step to pick a consistent representation for time-of-day (given that JavaScript only provides a natural representation for absolute time)". Thanks again.
from d3-scale.
I noticed that your normalization does not account for the aggregation over 521 Twitter users.
Right. I’m plotting the rate of Eric’s feed (i.e., the number of tweets he needs to read every hour to not miss out). You could divide by the number of followers to estimate their average tweet rate (i.e., how often one of his followers typically tweets), but I doubt that this rate follows a normal distribution so I don’t think the average would tell you much. It’s more likely it follows a power law, with some users tweeting far more frequently than others and being responsible for a disproportionate part of his feed.
from d3-scale.
Haha what a great article on "Fear of Missing out"! I never heard that term before.
I see what you mean. Interesting insight that tweet rates probably follow a power law. Thanks for clarifying.
from d3-scale.
@mbostock Yes, not too far from a power law, although the people at the top aren't as prolific as you'd expect, and there are a bunch of people credited with one tweet that I've never even heard of, so I don't know what they're doing in my API responses.
There's probably a better way to model it but it's not jumping out at me.
from d3-scale.
Neat, Eric. Thanks for sharing!
from d3-scale.
Nice! I wonder if those one-tweet people are from those "Promoted" tweets that Twitter injects into everyone's feed.
from d3-scale.
Related Issues (20)
- scaleDiverging for domain [1,1,0] produces wrong results HOT 1
- get HEX color HOT 1
- d3.scale.quantile() error in 7.3.0 that works in 3.5.5 HOT 1
- ScaleTime ticks reset at the beginning of the month HOT 1
- Time Scale: How could one provide a custom irregular spacing of ticks? HOT 1
- d3.scaleTime() axis ticks are not aligned with scale outputs? HOT 2
- Not too nice ticks for big domains HOT 3
- Difficult debugging on invalid scale.range arguments
- Invert function does not work correctly on scaleTime HOT 2
- d3 dependency tree depends on a security vulnerable version of d3-color HOT 2
- Security vulnerability fix for d3-color required in 2.x
- Possible Bug in log implementation HOT 1
- Microseconds are not supported? HOT 1
- Snyk checks request a fixed version of d3-color HOT 1
- Update d3-interpolate dependency to v3 HOT 5
- Numerical instability with invert HOT 1
- Feature request: exp scale
- Feature proposal: logit scale
- scaleTime() ticks issue HOT 2
- The default tickFormat with a collapsed domain lacks sufficient precision
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-scale.