sam-leb

@sam-leb·5 public vizzes

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, displaying countries as red polygons with white strokes against a blue spherical backdrop. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features with `d3.geoPath`. Country boundaries come from the World Atlas TopoJSON dataset (110m resolution), which is loaded asynchronously and converted to GeoJSON using `topojson.feature`. The SVG elements are styled through CSS, with the sphere filled in blue and country borders outlined in black.

Jul 3, 2020

Loading thumbnail…

Let's make a face with D3.js!

A playful SVG face is drawn using D3.js v5, with two colored circles serving as eyes placed on a blank canvas. The example demonstrates basic shape creation and group transformations, using `d3.select` to manipulate the SVG and `svg.append('g')` to organize elements. Circles are added with the `append('circle')` method, positioned via `translate` transforms, and styled with fill and stroke attributes. The code imports `select` and `arc` from the D3 library, though only `select` is actively used to construct this simple, static composition.

Jul 3, 2020

Loading thumbnail…

Number of Data Science Classes by MIT Department

This bar chart displays the number of data science classes offered by the top five MIT departments, using data from MIT’s course catalog. It employs d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with SVG rectangles drawn via D3 selections. The Course 15 bar is highlighted in red, while others render in black, and axes are generated using d3.axisLeft and d3.axisBottom.

Jul 3, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in an SVG canvas using D3.js v5, with select and arc methods constructing the head, eyes, and mouth. The eyebrows, rendered as rectangles, animate upward and back down over two seconds via chained transition().duration() calls, demonstrating staged DOM updates. The face is centered using an SVG group with a translate transform, and the mouth is generated from an arc path with specified inner and outer radii.

Jul 3, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG, demonstrating fundamental D3.js DOM manipulation. The code selects the SVG, appends groups, and builds the face from circles, rectangles, and an arc-generated mouth path. Using D3's `transition()` method, the eyebrow group moves vertically over four seconds, creating a blinking-like effect. The example relies on D3 v5, importing `select` and `arc` from the main bundle, with coordinates based on the SVG's dimensions.

Jul 3, 2020