javascript - d3.js Time arcs app -
i've looking construct curved timeline application.
in example - trying build time chart represented curved line ticks.
i may have these charts placed side side in concentric manner
- so outer arc represents start/end of duration film - time in divided ticks.
- an inner chart runs parallel (next time chart) representing chapters in film.
_ data represent user journey - instead of duration age. instead of chapters session data logged on/off. ring inside represent other interaction data against time - dating information.
i've coded charts in way - ticks represented inside or outside.
http://jsfiddle.net/nyeax/235/
currently data hard coded follows - advised way of transcribing data timestamp - should data bridged create kind of data being inputed?
"data": [ { "segments": [ { value: 5, color: "#2c2c2e" }, { value: 100, color: "#2c2c2e" }, { value: 5, color: "#2c2c2e" }, { value: 100, color: "#2c2c2e" }, { value: 5, color: "#2c2c2e" }, { value: 100, color: "#2c2c2e" }, { value: 5, color: "#2c2c2e" }, { value: 100, color: "#2c2c2e" }, { value: 5, color: "#2c2c2e" } ] } ]
* latest code * duration chart - jsfiddle.net/nyeax/393
chapter chart - jsfiddle.net/nyeax/394
i've built on top of handle dates , bridge data gaps - http://jsfiddle.net/nyeax/363/
so lets being used show session data or person's event calendar.
{ starttime: "1/3/2014 11:00:00", endtime: "2/3/2014 11:00:00" }, { starttime: "6/3/2014 11:00:00", endtime: "7/3/2014 11:00:00" }, { starttime: "8/3/2014 11:00:00", endtime: "9/3/2014 11:00:00" }
so 3 records - indicate blips(indents). troughs calculated previous start times, next end times - gaps bridged. handy in showing how active user - last time logged in , how long. suppose time scale data needs represent minutes/seconds opposed days. keen @ enhancements kind of chart. how label , labels should sit - how animated.
Comments
Post a Comment