requirebin sketch

100%

requirebin sketch

✓ Published0🌍 Public

Last edited Oct 4, 2016

Created on Oct 4, 2016

This example visualizes the maximum cumulative exposure of a stock position over time by parsing trade data from CSV. Using Papa Parse to process the input, it converts buy and sell events into a chronological sequence, calculates the running total of shares held, and measures the longest duration at maximum exposure. The result is a concise summary of peak holdings, computed from simple long/short trade records.

AI-generated description

Similar vizzes

Loading thumbnail…

requirebin sketch

This example demonstrates a data-package loading workflow using the chi-datapackage library within a Vue-based requirebin sketch. It shows how to fetch a datapackage from a GitHub URL, normalize its resources and schemas, and load its data. The code then programmatically adds a new CSV resource containing the values `A,B,C` and `1,2,3`, updating the package state. State changes are logged to the console, illustrating the store’s reactive `onStateChange` and `onError` callbacks. The example highlights the chi-datapackage API’s promise-based pipeline for loading, normalizing, and processing tabular data resources.

HHypercubed

57% match

Loading thumbnail…

Fork of dataset

This example displays a horizontal bar chart of trading volumes for various Brazilian stock tickers, sourced from a local CSV file and rendered as SVG. The chart ranks the top 20 securities by volume, with bars extending from left to right and volume labels on the x-axis. The code uses D3.js imports such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the visualization, while data is loaded via the `csv` function. The rendering is handled through SVG elements within a 960x500 pixel canvas, with styling applied via CSS classes.

Mmanvithareddykarra

56% match

Loading thumbnail…

stock

This visualization animates the high prices of banking stocks over time, first drawing each stock’s line progressively, then transforming the chart into a horizon graph by stacking and compressing multiple area layers with distinct fill colors. It uses D3 v3’s `d3.svg.line`, `d3.svg.area`, and `d3.svg.axis` to render SVG paths, with transitions driven by `d3.timer` and `setTimeout`. Data is loaded from a CSV file via `d3.csv`, nested by symbol, and sorted by maximum price.

SSheela2930

56% match

Loading thumbnail…

sell-strat

The visualization explores investing strategies for the NASDAQ Composite index, showing how different buy/sell thresholds impact long-term returns. It uses a line chart with a logarithmic y-axis to display price over time, overlaid with green and red segments marking periods of holding and cashing out. A color-coded heatmap grid allows interactive exploration of parameters by hovering or dragging to adjust the buy/sell change percentage and the time window. The chart is rendered with D3 (SVG) and updated on drag, with a transparent canvas for performance. Data comes from the St. Louis Fed's FRED series.

11wheel

56% match

Loading thumbnail…

Fork of dataset

This example displays a horizontal bar chart ranking the top 20 traded stocks on the B3 exchange by volume, using data from a local CSV file. The chart encodes the stock code on the y-axis and the trading volume on the x-axis. Built with D3 v5, the code imports specific functions like `scaleLinear`, `scaleBand`, and `axisBottom` to construct the visualization. The rendering is done through SVG elements, with bars styled in steelblue and custom axes, demonstrating a clean presentation of the dataset.

BBaji-2000

56% match

Loading thumbnail…

requirebin sketch

This example demonstrates a tokenizer in action, parsing a string of mathematical and symbolic notation to identify and categorize each token as a string, bracket, symbol, or whitespace. The visualization shows the parsed output in the console as the tokenizer processes the input. The code uses the `tokenizer` library, adding rules with regular expressions to define token types, and ignores whitespace during parsing. The source data is a hardcoded string containing mixed symbols and numbers, rendered through the console log output.

HHypercubed

55% match

Loading thumbnail…

scatterplot

This scatterplot displays the top 20 traded volumes on the B3 stock exchange, using a categorical y-axis for stock codes and a quantitative x-axis for volume. The code loads D3 v5 via UNPKG and uses `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG. Data values are parsed and multiplied by 1000 before plotting, with formatted tick labels using `format('.3s')`.

RRomersims

55% match

Loading thumbnail…

requirebin sketch

This example demonstrates how to load and manage a data package using the `chi-datapackage` library within a Vue application. It shows the flow of loading a remote dataset, dispatching actions, and updating application state through the `barracks` framework's model, effects, and reducers. The visualization is driven by `index.js`, which uses `dp.load` to fetch a JSON data package from GitHub, then triggers a `replacePackage` reducer to update the state. The code also logs state changes and actions via lifecycle hooks, illustrating a functional reactive pattern for handling data-driven charts.

HHypercubed

55% match