Skip to main content
Log in
J

joanoliper

@joanoliper·10 public vizzes

Loading thumbnail…

FreedomCorp Dashboard

The FreedomCorp Dashboard presents a multi-panel view of sales call data for the fictional company FreedomCorp. A stacked area chart shows contributions from four regional teams over time, while bar charts display average revenue, call duration, and units sold by product category, and a donut chart shows the distribution of calls by company size. A timeline with a brush allows users to filter the date range across all charts. The visualization uses the D3.js library for data processing and rendering, including `d3.stack`, `d3.area`, and `d3.nest`, and includes animated transitions via `d3.transition`.

Jan 26, 2020
Loading thumbnail…

Sharpe Scatter Plot

This scatter plot visualizes the trade-off between volatility and return for a portfolio sample, with each circle representing a data point from a CSV file. The chart uses D3 v5’s `scaleLinear` and `axisBottom`/`axisLeft` to position points and render axes, while SVG circles with steelblue fill and partial opacity show the distribution. Axis labels and a title clarify the metrics, and gridlines created via `tickSize` aid in reading values. The rendering relies on SVG appended to an HTML container.

Jan 26, 2020
Loading thumbnail…

Sharpe Scatter Plot

This scatter plot visualizes the trade-off between volatility and return for a portfolio sample, with each circle representing a data point from a CSV file. The chart uses D3 v5’s `scaleLinear` and `axisBottom`/`axisLeft` to position points and render axes, while SVG circles with steelblue fill and partial opacity show the distribution. Axis labels and a title clarify the metrics, and gridlines created via `tickSize` aid in reading values. The rendering relies on SVG appended to an HTML container.

Sep 25, 2019
Loading thumbnail…

Sharpe Scatter Plot

This scatter plot displays investment-grade corporate bond values over time, with each point representing a daily observation. The chart uses a linear time scale on the x-axis for dates and a linear scale on the y-axis for bond values, with all points rendered as steelblue circles. The visualization is built with D3 v5, utilizing `scaleLinear`, `axisBottom`, and `axisLeft` from the D3 API to construct the axes, while the data is loaded from a CSV file and rendered as SVG circles.

Sep 23, 2019
Loading thumbnail…

World Population Area Chart

This area chart displays world population growth over time, with the x-axis representing years and the y-axis showing population in billions. The chart uses an area generator with a basis curve to create a smooth filled path beneath the population trend line. The visualization is built with D3 v5, employing `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and axis components to render the SVG. Data is loaded from a local CSV file containing yearly population figures, and axis labels and tick formatting are customized for readability.

Sep 23, 2019
Loading thumbnail…

Sharpe Scatter Plot

This scatter plot shows the relationship between the volatility and return of a portfolio, with each data point representing a specific observation. The title "Sharpe Ratio" and the axis labels indicate that the visualization is designed to explore the trade-off between risk and reward, enabling viewers to identify optimal investment opportunities. The visualization is built using D3 v5, with the `scaleLinear` function mapping the data to plot coordinates on a canvas. The chart renders as an SVG, and the code uses `select('svg')` to target the canvas, `axisLeft` and `axisBottom` to generate axes, and `csv('data.csv')` to load the input data containing the return and volatility values. Circles are appended to the SVG for each data point, with a steelblue fill and semi-transparent opacity.

Sep 19, 2019
Loading thumbnail…

Scatter Plot

This scatter plot visualizes portfolio asset allocations, plotting each asset’s allocation value along the x-axis against its asset name on the y-axis. The chart uses `d3.scaleLinear` for the x-scale and `d3.scalePoint` for the categorical y-scale, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously from a CSV file using `d3.csv`, and circles are rendered in an SVG container.

Sep 19, 2019
Loading thumbnail…

Bars

This bar chart displays the allocation of assets in a portfolio, with horizontal bars representing values from $100 million to over $500 million. The visualization uses d3.scaleBand for the categorical asset labels on the y-axis and d3.scaleLinear for the numerical allocation values on the x-axis. Data loads from a CSV file, and SVG rendering includes formatted tick labels that convert values to billions using d3.format with a custom .3s suffix replacement from G to B.

Sep 19, 2019
Loading thumbnail…

Bars

This bar chart displays the asset allocation percentages of a portfolio sample, with each bar labeled by asset type. It uses D3 v5’s `scaleLinear` and `scaleBand` to map allocation values and asset names, respectively, and renders an SVG with axes via `axisLeft` and `axisBottom`. Data is loaded from `data.csv` using the `csv` method, and bars are appended as `rect` elements with widths proportional to allocation. The chart is styled with a steelblue fill for the bars and includes a left margin for the categorical labels.

Sep 19, 2019
Loading thumbnail…

Bars

This bar chart displays population counts for six countries, with horizontal bars sorted by the data’s order rather than by value. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisLeft`/`axisBottom` for ticks. Data loads from a CSV via `d3.csv`, with numeric population values parsed before rendering as SVG rectangles. The chart’s styling applies a steelblue fill to each bar.

Sep 19, 2019