Skip to main content
Log in
N

naziafrin

@naziafrin·6 public vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as a simple SVG visualization. It draws a blue sphere as the globe backdrop and then overlays individual country paths in light green with thin black strokes. The map uses a natural Earth projection and loads geographic data from the World Atlas TopoJSON dataset. The code employs `d3.geoPath` with `d3.geoNaturalEarth1` for projection, and uses `topojson.feature` to convert TopoJSON country boundaries into GeoJSON for rendering. All map elements are drawn as SVG paths inside a 960×500 viewport.

Dec 8, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG Data Set. Each circle represents a car, with its position determined by the car’s horsepower on the x-axis and weight on the y-axis, rendered as red, semi-transparent points. The visualization uses D3 v5’s `csv` loader to fetch data, `scaleLinear` for both axes, and `axisBottom` and `axisLeft` to draw the tick marks and labels. The SVG output includes a title and axis labels, with styling applied via CSS.

Nov 12, 2019
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a cartoon smiley face entirely from SVG primitives, with a yellow circular head, two eyes, and a curved mouth created using the `d3.arc` path generator. The eyebrows, drawn as rectangles, repeatedly move up and down via chained `transition` calls, each lasting two seconds, to create a winking or surprised expression. The code demonstrates fundamental DOM manipulation by selecting the root `<svg>`, appending groups and shapes, and transforming them with translation attributes, all without reading any external data source.

Nov 10, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. Red semi-transparent circles mark each vehicle, with axes labeled and a title displayed in SVG. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to load data, scale positions, and render axes. Data values are coerced to numbers before being plotted, with margins and tick formatting configured through D3's selection and scale methods.

Nov 10, 2019
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a cartoon smiley face entirely from SVG primitives, with a yellow circular head, two eyes, and a curved mouth created using the `d3.arc` path generator. The eyebrows, drawn as rectangles, repeatedly move up and down via chained `transition` calls, each lasting two seconds, to create a winking or surprised expression. The code demonstrates fundamental DOM manipulation by selecting the root `<svg>`, appending groups and shapes, and transforming them with translation attributes, all without reading any external data source.

Nov 10, 2019
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a cartoon smiley face entirely from SVG primitives, with a yellow circular head, two eyes, and a curved mouth created using the `d3.arc` path generator. The eyebrows, drawn as rectangles, repeatedly move up and down via chained `transition` calls, each lasting two seconds, to create a winking or surprised expression. The code demonstrates fundamental DOM manipulation by selecting the root `<svg>`, appending groups and shapes, and transforming them with translation attributes, all without reading any external data source.

Nov 10, 2019