Juan David Bolaños Rojas

@jdbr99·5 public vizzes

Making Scatter Plot with D3

This example shows a scatter plot of date-value pairs from a CSV file, with points animating from radius 0 to 5 over one second. It uses D3 v5’s `scalePoint`, `scaleLinear`, `axisLeft`, and `axisBottom`, and applies an SVG `transition` to grow the circles. The y-axis scales values, while the x-axis maps dates as categorical points. Data is loaded via `d3.csv`, and the plot includes labeled axes and a title.

Feb 8, 2020

Loading thumbnail…

Trying d3.enter and path

This example demonstrates a simple scatterplot-like visualization of five data points, where each point is represented as a circle whose radius corresponds to its numeric value from the `mockData` array. The circles are positioned along the x-axis with their centers calculated cumulatively from the data values, and all are aligned at a fixed y-coordinate of 50. The visualization uses D3 v5's `select` and selection `.enter()` API to append SVG circle elements to a 500-pixel-high, 960-pixel-wide SVG canvas, with the circle's `cx` attribute derived from an offset loop and `r` bound directly to its data value. The data is hard-coded in the JavaScript rather than loaded from the provided `data.csv` file.

Feb 6, 2020

Loading thumbnail…

Making Vertical Bar chart with D3

This example shows a vertical bar chart of monthly date-value pairs from a CSV file, with bars animating upward over two seconds to their final heights. The D3 v5 code uses `scaleLinear` for the y-axis, `scaleBand` for categorical x-axis positioning, and `axisLeft`/`axisBottom` for tick marks. The SVG rendering is driven by a custom transition on `rect` elements, which grow from the baseline to the scaled value, while the chart title and axis labels are added as SVG text.

Feb 5, 2020

Loading thumbnail…

Making Bar chart with D3

A bar chart displays monthly values from a CSV file, using horizontal bars where length encodes value and vertical position encodes date. The visualization is built with D3 v5, using `scaleLinear` for the value axis, `scaleBand` for the categorical date axis, and `axisLeft`/`axisBottom` for tick marks. SVG rectangles are rendered from the loaded data, with axes simplified by removing domain and tick lines.

Feb 4, 2020

Loading thumbnail…

Trying out D3.js

A yellow circle with a black outline, eyes, and a downward-curving arc mouth forms a static smiling face. The animation is limited to the eyebrows, which slide down and back up over two seconds using chained `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5 to build the SVG via appended groups and shapes, with elements positioned using explicit `attr` transforms and dimensions read from the SVG's height and width attributes.

Feb 3, 2020