Kkevingo

@Kkevingo·6 public vizzes

Coordinates Scatterplot

A scatterplot of 14 eye-fixation coordinates plots X and Y positions as steel-blue circles, with a green monotone-x line connecting them in sequence. The circles animate into place with a staggered delay on load, while hovering enlarges a point to red and displays its exact coordinates in a tooltip. Built with D3 v5, the visualization uses `scaleLinear` for axes, `axisBottom`/`axisLeft`, and `transition.attrTween` to animate the line’s stroke-dasharray for a drawing effect.

May 6, 2020

Loading thumbnail…

Coordinates Scatterplot

A scatterplot visualizes fixation coordinates from a data.csv file, plotting x and y positions as steelblue circles that animate into place sequentially. A green path connects the points in data order, repeatedly drawing itself via a stroke-dasharray attrTween. The chart uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line, with hover interactions that enlarge and recolor circles. SVG rendering includes labeled axes and a title.

May 6, 2020

Loading thumbnail…

Coordinates Scatterplot

A scatterplot displays fixation coordinates from a CSV file, with x and y axes labeled and points rendered as steelblue circles. Each point enters sequentially through a 1-second transition with a 100-millisecond delay. A green line connects the points in data order, using a monotone curve and animating its stroke-dasharray via `transition.attrTween` to create a continuous drawing effect. The visualization uses d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft with gridlines, and d3.line for the path, all rendered in SVG.

May 5, 2020

Loading thumbnail…

Line Chart Transition

This example shows a line chart drawing itself with a smooth stroke animation using d3.line and transition.attrTween, which interpolates the stroke-dasharray to simulate a pen-like drawing effect. The chart maps time and value fields from a CSV file (data.csv) to a time-scale x-axis and linear y-axis, rendering axes with d3.axisBottom and d3.axisLeft. The visualization is built with D3 v4, uses SVG elements, and is responsive, redrawing on window resize.

May 4, 2020

Loading thumbnail…

Untitled

This example shows a line chart tracking popularity over time, with an animated drawing effect when new data is loaded. Clicking the "Update Chart" button generates randomized popularity values for the same years and redraws the line using a transition. The visualization uses D3.js scales, axes, and a path generator, with `d3.transition` and `d3.easeSin` to animate the stroke-dashoffset from full length to zero, creating a progressive reveal. The chart is rendered as an SVG element, updating its x- and y-axes and the path’s data binding on each interaction.

May 4, 2020

Loading thumbnail…

Coordinates Scatterplot

This scatterplot displays temporal progression of fixation coordinates from a CSV file. Each circle represents a data point, while a line path connects them in sequence, with an animated stroke-dashoffset effect revealing the trajectory over time. Using D3 v5, the code leverages `scaleLinear`, `axisLeft`, `axisBottom`, `extent`, and `line` to construct the chart. The SVG rendering includes circular points, labeled axes, and a title, with smooth transitions applied via D3’s `.transition()` method for both point placement and path drawing.

May 4, 2020