Ian

@ianyxtan·8 public vizzes

Playground ApexCharts

This example displays a horizontal range bar chart comparing the timelines of two individuals, Bob and Joe, across Design, Code, and Test phases. It uses the ApexCharts library to render the visualization, with moment.js formatting the duration labels on each bar, such as “4 days.” The chart features gradient-filled bars, a datetime x-axis, and a top-positioned legend, demonstrating how ApexCharts handles time-based categorical data.

Mar 10, 2023

Loading thumbnail…

Getting started Chartjs

This example displays a simple line chart with six labeled data points and their corresponding values. It demonstrates a minimal setup using the Chart.js library, loaded from a CDN, to render the visualization onto an HTML5 Canvas element. The code initializes a Chart instance via its constructor, passing a configuration object that specifies the line chart type, the dataset labels and numeric values, and options such as enabling the y-axis to start at zero. The page also includes local CSS styling and demonstrates importing libraries via a script tag.

Mar 10, 2023

Loading thumbnail…

timelines

This example demonstrates a versatile D3 timeline component built with SVG, offering over a dozen variations including simple timelines, circular markers, stacked layouts, and interactive features like hover, click, and scroll events. The code implements a custom `d3.timeline` function that supports configurable axes, colors, labels, tick rotation, relative timepoints, backgrounds, and navigation controls. It uses D3 v3's time scales and formatting, along with jQuery for event handling, to render timelines with rectangles or circles as visual elements. The component also handles complex layouts with stacked rows, axis positioning, and color mapping from data.

Mar 10, 2023

Loading thumbnail…

Customizing Axes

This example demonstrates customized chart axes with an SVG bar chart of country populations loaded from a local CSV file. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to create the plot, applying a custom tick formatter that abbreviates large numbers with `format('.3s')` and replaces ‘G’ with ‘B’. The x-axis is styled as a full-length gridline, while the y-axis removes its domain and tick lines for a cleaner look.

Mar 9, 2023

Loading thumbnail…

xAxis with time series

This visualization demonstrates a time series x-axis using D3 v5, displaying hourly timestamps from an InfluxDB CSV dataset loaded via d3.csv. The code constructs a time scale with d3.scaleTime, parses ISO date strings into JavaScript Date objects, and renders a customized bottom axis using d3.axisBottom with a tick format showing month, day, hour, minute, and second. The SVG chart is 5000 pixels wide, and the axis features long tick marks with the domain line removed.

Mar 9, 2023

Loading thumbnail…

bare bones bar chart

A simple bar chart displays population estimates for ten countries, with horizontal bars ordered by country name. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG rectangles and axes. Data loads from a local CSV file and is multiplied by 1000 to reflect actual population figures.

Mar 9, 2023

Loading thumbnail…

Let's make a face with D3.js!

This example shows a stylized cartoon face drawn with D3.js, where the eyes animate horizontally in a playful loop. The face is constructed using SVG circles for the head and eyes, with a centered group transform positioning the features. The code uses D3 v5 selections and transitions, specifically `transition().duration()` to shift the eye group’s `transform` attribute over two seconds. Rendering is done via SVG in a React framework, with hardcoded dimensions and offsets defining the face’s geometry, and no external data source.

Mar 8, 2023

Loading thumbnail…

Play around with d3.js

This example uses D3 v5 and React to build an animated, SVG-based face with eyes that shift horizontally in a looping transition. The code leverages D3 selections, SVG attribute binding via `attr`, and chained `transition().duration()` calls to alternate the eye group’s transform between two positions. The face is centered using a translated `<g>` element, with fixed constants for eye spacing, radius, and brow dimensions. Rendering relies purely on SVG shapes—circles and rectangles—without external data, focusing on animation timing and nested group transformations.

Mar 8, 2023