socialpredict
socialpredict copied to clipboard
openpredictionmarkets
Using d3.js for Chart Design
Rather than using rechart which is fairly limited and does not appear to have step charts, it seems like we should use:
https://github.com/AnyChart/AnyChart
re:
https://docs.anychart.com/Basic_Charts/Step_Line_Chart#:~:text=A%20step%20line%20chart%20is,or%20interest%20rates%20are%20visualized.
https://www.npmjs.com/package/anychart
Ok, here is what I was able to implement. How important is it to have:
- Tooltip which allows user to see exactly what the probability was at any given time?
- Capability to zoom in on past day, past week, past month, past year, all time?
d3 is a good choice.
I can see ticks will need to be adjusted. The usual trick is to add a selection with a resolution (1 min, 5 min, 1h, 1 day) and rescale to this.
In general, you'll need to pick a summary of what happened in a tick to draw it (mean price, hi/lo, close price, etc.). With this in mind, this particular graphic has one issue, which is that it moves in vertical steps -> visual language implies the odds have not moved for a while. This is not true in general.
What do you mean by, "ticks" ?
Yes, I could add a change in resolution button, understood.
The step graph communicates that the probability changes instantaneously at the time of bet, which is effectively true.
FYI, here is the raw data from which this graph was derived:
https://github.com/openpredictionmarkets/socialpredict/blob/stylepage/frontend/src/tests/TestData.js#L23
"probabilityChanges":[
{"probability":0.5,"timestamp":"2023-11-11T04:59:00Z"},
{"probability":0.9761904761904762,"timestamp":"2023-11-11T05:59:00Z"},
{"probability":0.6612903225806451,"timestamp":"2023-11-11T06:14:00Z"},
{"probability":0.7941176470588235,"timestamp":"2023-11-11T06:59:00Z"},
{"probability":0.6639344262295082,"timestamp":"2023-11-11T07:14:00Z"}
],
So the graph is 100% reflecting that json array...e.g. the steps are not at the, "midpoint," but rather at the time of change.
Contrast this to our current graph which uses a rechart line graph, showing sloped changes between points. These sloped changes are misleading because they imply that the probability gradually changed over time rather than instantly.
If you are used to seeing a chart with a ton of volume, then it would look more like gradual changes over time, as the step functions from a zoomed out perspective look more, "smooth," ... if you would like I could generate data which shows this effect with our new step function chart here.
Ticks = markers at the bottom, currently "11 Nov on repeat."
The flat style is accurate but crumbles when there are too many trades; it just becomes impossible to load.
The usual solution is to compute summary statistics and stick' em in line plot or area plot. Or to use financial charts like Candle sticks or Heiken Ashi.
This was implemented but reverted to CanvasJS for the time being because 3ds has performance issues with larger datasets (over ~10000 points or so) and requires further calculations on the back end to be able to average out bins over time. Basically to make this scalable requires a lot more both back and front end design time.