Skip to main content
Log in
N

nikomc

@nikomc·9 public vizzes

Loading thumbnail…

D3: Removing values from a chart

Twenty vertical bars show a dataset of twenty values, rendered as an SVG bar chart with numeric labels. Clicking the text above the chart removes the first value from the array and updates the chart, using `d3.scaleBand` and `d3.scaleLinear` to recompute domains, `dataset.shift()`, and `transition()` with `duration(500)` to animate the remaining bars and labels into their new positions. The bars exiting the chart slide off the right edge before being removed.

Apr 3, 2020
Loading thumbnail…

A bar chart that adds data with mouse-click

Clicking the text updates a bar chart with a new random dataset. The bars and their value labels smoothly transition to reflect the new data, with the y-scale dynamically adjusting to the maximum value. The chart is rendered as an SVG using D3 v5, and the update is driven by a `d3.select("p").on("click")` handler, using `transition().delay()` and `ease(d3.easeCubicInOut)` for animation. The y-axis uses a linear scale while the x-axis uses a band scale.

Apr 3, 2020
Loading thumbnail…

D3: Transitioning points to randomized values, plus rescaled axes!

Clicking the text triggers a full update of a D3 v5 scatterplot: 50 circles transition to new random coordinates while the linear scales and axes recalculate to fit the new domain. The circles briefly enlarge and turn magenta during the transition, then shrink back to black. The code uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and chained `transition()` calls, with a clip-path masking any points outside the chart area. The dataset is generated on the fly in JavaScript, and rendering is SVG with animation.

Apr 2, 2020
Loading thumbnail…

D3: Time axis, prettier

This example shows a time-based scatterplot of daily amounts, with vertical grid lines and circular markers positioned along a date axis. The visualization uses D3 v5 and loads data from a CSV file via `d3.csv`, parsing date strings with `d3.timeParse` and formatting axis labels with `d3.timeFormat`. Axes are created using `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleTime` and `d3.scaleLinear` handle the positioning. The SVG rendering draws lines and circles for each data point, making the temporal trend of the amount values immediately apparent.

Mar 31, 2020
Loading thumbnail…

D3: Scaled scatterplot, using a square root scale for circle areas

This example shows a random dataset of 50 points rendered as circles in a scatterplot, with circle area scaled by the y-value using `d3.scaleSqrt`. The SVG chart includes linear x- and y-axes styled with teal strokes and bold labels. The code loads D3 v5 and uses `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for ticks, and randomly generated numbers for the data. The `aScale` maps the y-domain to a radius range of 0 to 10, while padding keeps the axes visible. No labels are drawn, as the text elements are commented out.

Mar 31, 2020
Loading thumbnail…

D3: A simple scatterplot with SVG

This example shows a simple scatterplot of ten data points, each rendered as an SVG circle and labeled with its coordinates. The chart uses the D3.js library (version 3) to programmatically build the visualization: first, the code creates an SVG canvas via `d3.select` and `.append("svg")`, then uses `.selectAll("circle").data(dataset).enter()` to map the 2D array of `[x, y]` values to circle positions and radius sizes. Red text labels are added in a similar declarative manner, with font styling applied through attribute setters. The raw coordinate pairs come from a hardcoded dataset, and the circle radius is computed from the data point’s height, creating a visual encoding of magnitude.

Mar 31, 2020
Loading thumbnail…

Bar Chart without index.js

This example shows a simple bar chart of five values rendered as SVG rectangles, with each bar labeled by its numeric data value. The chart is built using D3 v5’s data join pattern (`selectAll`, `data`, `enter`, `append`) to create `rect` and `text` elements. Bars are sized proportionally to the dataset, with fixed chart width and height variables, and include padding between bars. The SVG is appended directly to the body, styled with inline attributes for color, font, and text alignment. The dataset is hardcoded, and no external data source is used.

Mar 31, 2020
Loading thumbnail…

Make a Bar Chart with D3.js

A horizontal bar chart displays population figures for the five most populous countries, sourced from World Population Prospects 2017. The chart renders population values on the x-axis and country names on the y-axis using SVG. The code uses D3 v5 methods including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Population data is loaded from a local CSV file and multiplied by 1000 before being scaled, with bars styled in steel blue.

Mar 30, 2020
Loading thumbnail…

Make a Bar Chart with D3.js

A horizontal bar chart displays population figures for the five most populous countries, sourced from World Population Prospects 2017. The chart renders population values on the x-axis and country names on the y-axis using SVG. The code uses D3 v5 methods including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Population data is loaded from a local CSV file and multiplied by 1000 before being scaled, with bars styled in steel blue.

Mar 30, 2020