My First Line Chart !

The data used to plot the chart bellow shows some simulated trades made by an algorithmic strategy in a brazilian stock asset. The data includes the intraday market price of this asset, the purchases and sales made throughout the day, and if each trade made money or not. All these information is organized by hour.

I decided to plot the market price using a line chart since the dataset is a time series. Following the examples given by this article, I described how each information was encoded in the next session.

I would like to allow the reader explores each trade made by the strategy and, at the same time, get a sense of how well the stategy was that day, even though without plotting a P&L Line Chart.

This chart was made using D3.js library and I included several features to help the user visualize better all the informations. You can check the code source on my GitHub.

I made a natural decision to encode the data about the Price and Time, as far as it is a time-series. The trade was enconded as triangles to show if it was a Buy(up) or a Sell (down). As I would like to highlight the performance that day, I colored when each trade made money (green) or not (red).

Since there are many data encoded at this chart, I included gridlines to help the reader norrowing the focus to some areas, as sugested on this article. I also included a zoom behaviour to allow the reader explore better the data.

1. Here is how I dealt with the D3 zoom behavior;
2. Here is where I understood why use a clip path;
3. I learned how to limiting the Zoom and Pan on this bl.ock;
4. I learned how to deal with grid lines here;
5. I learned how to draw triangles here;
6. And finally, I understood how to rescale my SVG here;
7. I didn't use it, but it is really nice =).

1. include sketch
2. point some interesting code that I included as the auto re-scale and the zoom behaviour.
3. Include context to the chart (legend)
4. Correct the reset behaviour