J

jlspangl

@jlspangl·60 public vizzes

Loading thumbnail…

my Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by their income group using an ordinal color scale. Users can click on legend items to highlight or filter specific categories, with unselected groups fading to 20% opacity. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for geographic rendering, while d3.zoom enables pan and zoom interactions. Data comes from the World Atlas TopoJSON dataset, combined with TSV metadata for country attributes. The visualization is built with D3 v5 and rendered as SVG elements, with hover effects that turn countries red.

Loading thumbnail…

Interactive Filtering of Choropleth Map

A choropleth map colors countries by economic classification using an ordinal color scale and the D3 geoNaturalEarth1 projection. Users click legend items to filter the map’s displayed categories, with non-selected legend entries and map countries dimmed to 20% opacity. The visualization relies on d3.geoPath, d3.zoom for panning, and topojson to convert world-atlas TopoJSON data into GeoJSON features.

Loading thumbnail…

Map with Selectable Countries

This example shows a choropleth map where clicking a country highlights it and dims all others, with a color legend on the side. It uses the d3.geoPath and d3.geoNaturalEarth1 projections to render the world map, while d3.scaleOrdinal and d3.schemeSpectral define the color encoding. Country data comes from world-atlas TSV and TopoJSON files, and interactions trigger re-rendering with updated opacity and stroke styles. The map supports zooming via d3.zoom.

Loading thumbnail…

Melting Data for Multiple Lines

This chart shows projected population growth by region from 1950 to 2100, with each line representing a different world region and colored via a categorical scale. The data is sourced from UN population estimates, loaded from two CSV files and melted into a tidy format. The visualization uses d3.line with curveBasis to smooth the paths, d3.nest to group data by region, and d3.scaleTime and d3.scaleLinear for axes. A custom colorLegend component renders circles and labels in SVG, while axis gridlines and a title complete the layout.

Loading thumbnail…

Melting Data for Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with a category10 color scheme to distinguish each city as a separate line. Rendering with SVG, the code employs d3.line with curveBasis for smooth paths, d3.nest to group data by city, and a custom colorLegend function. A small multiple of circles on the legend indicates which city corresponds to which colored line.

Loading thumbnail…

Line chart with multiple lines

A line chart displays one week of temperature data for multiple cities, with each city represented by a colored line. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time and temperature, while `nest()` groups the data by city and `line()` with `curveBasis` smooths each series. Color-coded lines are sorted by their final temperature values, and a custom `colorLegend` function renders a categorical legend. The data originates from Data Canvas - Sense Your City, showing temperatures in Celsius.

Loading thumbnail…

Fork of Color and Size Legends2

This example demonstrates two reusable legend components for D3 v5: a color legend using an ordinal scale mapping fruit names to colors, and a size legend using a square-root scale with five ticks. Both render as SVG groups with circles and text labels, positioned via transforms. The colorLegend component encodes categorical data with colored circles, while the sizeLegend uses scaled circle radii and offsets text based on each value’s radius. The code imports `scaleOrdinal` and `scaleSqrt` from D3, and uses selection joins to update or remove legend items dynamically.

Loading thumbnail…

Circles on a Map

This example displays world population estimates for 2018 using circles sized proportionally to population on a Natural Earth map. Country boundaries are rendered with `d3.geoPath` and a `geoNaturalEarth1` projection, while population data is loaded from a UN CSV file and topojson. A `scaleSqrt` size legend and `d3.zoom` for panning are included. Hovering reveals country names and formatted population values via SVG titles.

Loading thumbnail…

Circles on a Map

This example displays a world map with colored circles positioned over each country, where the circle color encodes the economy category from the UN World Population Prospects dataset. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath, and d3.geoCentroid to place the circles, with a d3.scaleOrdinal color scale and a custom color legend. The map renders in SVG, supports zooming via d3.zoom, and uses topojson for geographic data processing and CSV loading for population statistics.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot allows users to explore the relationships between different numeric attributes of cars from the auto-mpg dataset by selecting which columns appear on the x- and y-axes through dropdown menus. The visualization, built with D3 v5, uses scaleLinear, extent, axisBottom, and axisLeft to render the axes and data points as semi-transparent red circles. When a menu selection changes, the scatter plot updates, animating the circles to their new positions over two seconds using a transition with per-element delays.

Loading thumbnail…

Scatter Plot With Menus

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point representing a vehicle. The visualization uses d3.scaleLinear to map data values to screen coordinates, d3.axisBottom and d3.axisLeft to render the axes, and SVG circles for the data points. A dropdown menu is created using a helper function that appends a select element, though the menu does not yet affect the chart. The code loads CSV data asynchronously and converts string values to numbers before rendering.

Loading thumbnail…

choropleth map

A world map rendered as a choropleth uses color to encode each country’s economy classification. Built with D3 v5 and topojson, the visualization loads geographic data from a 50m world-atlas JSON and TSV files, then projects it using `geoNaturalEarth1`. The `scaleOrdinal` color scale applies the `schemeSpectral` palette, while a custom legend displays the categories. Hovering turns a country red, and zooming is supported via the `zoom` event handler.

Loading thumbnail…

color and size legends

This example demonstrates how to build separate color and size legends in D3 v5. The color legend uses a `scaleOrdinal` with a domain of fruit names mapped to distinct colors, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends are rendered as SVG groups via reusable functions that append circles and text labels. The size legend calculates tick values using `sizeScale.ticks(numTicks)` and positions text based on each circle’s radius plus an offset.

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and then by subregion. The tree layout uses a horizontal orientation, with country names rendered as text nodes that decrease in font size with increasing depth. The code employs D3 v5 APIs including `tree`, `hierarchy`, `linkHorizontal`, and `zoom` to construct the SVG visualization, with data loaded from a JSON file containing the regional groupings.

Loading thumbnail…

Blank Canvas

This example presents a minimalist blank canvas: a single rounded rectangle fills the entire browser window as a static SVG shape. The visualization demonstrates the basic setup of an SVG-based D3 scene, sizing the drawing area to the viewport and rendering one straightforward geometric element. The code uses D3 v5's `select` function to target the SVG element, then appends a rectangle with a 40-pixel corner radius, with the page styled to remove margins and prevent scrolling.

Loading thumbnail…

blank canvas

A blank white canvas fills the browser viewport, rendered as a single rounded rectangle. The visualization demonstrates a minimal starting point for D3-based projects, showing an empty SVG surface with no data or interactive elements. The code uses D3 v5's `select` function to access the SVG element, reads its width and height attributes, and appends a `rect` with a 40-pixel corner radius using `svg.append`. A fixed-position CSS body ensures the canvas remains centered and non-scrollable.

Loading thumbnail…

cheap tricks for interactive map

This interactive map displays world countries on a natural Earth projection, using light green fill with a darker sphere background. Hovering highlights individual countries in red, while zoom and pan are enabled through d3.zoom. The visualization constructs country polygons with d3.geoPath and topojson.feature, deriving country names from world-atlas TSV data. The title attribute on each path reveals the country name on hover. Libraries include D3 v5 and TopoJSON, with data sourced from the world-atlas package.

Loading thumbnail…

cheap tricks for interaction

This example displays a world map using a natural Earth projection, where each country is rendered as a light green SVG path and the ocean appears as a blue sphere. Hovering over a country highlights it in red. The visualization loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON with topojson.feature, and draws it using d3.geoPath and d3.geoNaturalEarth1. Interaction is implemented via a CSS :hover rule on the country paths, which changes their fill color without any JavaScript event handlers.

Loading thumbnail…

Cheap Tricks for Interactive Map

This interactive map displays world countries using a natural Earth projection, with ocean and land masses distinguished by color. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, then uses d3.geoPath with the geoNaturalEarth1 projection to render country boundaries as SVG paths. Hovering over any country changes its fill color from light green to red, providing immediate visual feedback for user interaction. The implementation combines d3.json, topojson.feature, and d3.select to manage data loading and DOM manipulation.

Loading thumbnail…

Cheap Tricks for Interactive Map

This interactive world map visualizes country boundaries on a natural Earth projection, with a blue sphere background distinguishing ocean water. It uses D3.js version 5 with topojson to load and render GeoJSON features from the World Atlas 110m dataset. Countries appear as light green SVG paths with subtle black strokes, generated via `d3.geoPath()` and `geoNaturalEarth1()`. The sphere outline is drawn by passing a sphere GeoJSON object to the path generator.

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A bowl of fruit rendered as five red apples animates as they are eaten and replaced by a lemon, while hovering over any fruit highlights it with a black outline. The example uses d3-selection’s data join and transitions to smoothly shrink and remove exiting circles, update fruit types, and re-render on mouseover and mouseout events. The fruit bowl is built with SVG circles, with colors and radii assigned via d3.scaleOrdinal, and state management handled through a custom render function in plain JavaScript.

Loading thumbnail…

Bowl of Fruit - Click to Select

A dynamic SVG shows a bowl of fruit where apples and lemons animate in and out as data updates. Clicking any fruit selects it, highlighting it with a black stroke. The code uses d3.scaleOrdinal for color and radius mappings, with d3 transitions animating circle positions and radii over one second. Predefined setTimeout events remove apples, mutate one apple into a lemon, and filter out another fruit to demonstrate enter, update, and exit selections.

Loading thumbnail…

Fork of Fork of bowl of fruit

A fruit bowl renders five apples as red circles with labels on an SVG canvas. D3 version 5 uses data joins with enter, update, and exit selections to animate transitions: an apple disappears after one second, the third apple turns into a lemon after two seconds, and another apple is removed after three. The `fruitBowl` function uses `scaleOrdinal` for color and radius mappings, while circles and text elements update their positions and attributes dynamically.

Loading thumbnail…

Fork of bowl of fruit

A basket of fruit demonstrates animated data joins in D3 version 5. The visualization shows a row of apples and lemons, with circles and text labels representing each fruit. Using the `fruitBowl` module with `d3.scaleOrdinal` for color and radius, the code handles enter, update, and exit selections via `selection.merge` and `selection.exit`. Timed updates over three seconds remove apples, change one apple to a lemon, and filter another apple, illustrating dynamic SVG transitions with keyed data.

Loading thumbnail…

bowl of fruit

A bowl of fruit demonstrates animated data joins with D3 using ordinal scales to map fruit types to colors and radii. Apples appear as red circles, lemons as yellow ones, with text labels below each shape. The visualization uses `selection.data()` with a key function to track fruit identities, then applies enter, update, and exit selections as fruits are removed or changed over timed intervals. The code employs `scaleOrdinal`, `range`, and SVG rendering with `attr` and `merge` operations.

Loading thumbnail…

Fork of bowl of fruit

A fork of a fruit bowl demonstrates animated data joins in D3 version 5, showing apples and lemons as colored circles with labels that transition when fruits are eaten or replaced. The visualization uses `d3.scaleOrdinal` for color and radius mapping, and employs `selection.data` with key functions, `enter`/`merge`/`exit` patterns, and `transition` with a one-second duration to smoothly update positions and sizes. SVG rendering updates at timed intervals, removing apples, swapping one for a lemon, and filtering based on index.

Loading thumbnail…

Fork of bowl of fruit

This example demonstrates animated transitions of fruit shapes in an SVG bowl using D3 v5. Circles representing apples and lemons enter, update, and exit with sequential timing, showing how data joins and key functions track object identity. The code uses `d3.scaleOrdinal` for color and radius mappings, `d3.selectAll` and `selection.merge` for enter-update handling, and `transition.duration` to animate circle positions and radii over one second. Fruits are stored as an array with random IDs, and `setTimeout` triggers state changes like removing or replacing items.

Loading thumbnail…

Fork of bowl of fruit

This example demonstrates D3.js data joins by rendering a bowl of fruit as SVG circles that update over time. A row of five apples initially appears, then one apple is removed, and another is replaced with a lemon, triggering enter, update, and exit selections. The `render` function uses `selection.selectAll('circle')`, `.data()`, `.merge()`, and `.exit().remove()` to handle dynamic changes, with `scaleOrdinal` mapping fruit types to colors and radii.

Loading thumbnail…

bowl of fruit

A bowl of fruit demonstrates data joins in D3.js v5 by rendering five circles as apples, then updating the visualization over time as one apple is removed and another becomes a lemon. The SVG circles are bound to an array of fruit objects using `selection.selectAll`, `data`, `enter`, `merge`, and `exit`. D3 scales, `scaleOrdinal`, map fruit types to fill colors and radii, while `setTimeout` triggers re-renders to show enter, update, and exit transitions.

Loading thumbnail…

World Population Area Chart

This area chart displays global population growth over time, using a smooth, filled curve to emphasize the dramatic upward trend. The visualization is built with D3 v5, leveraging `d3.area` with `curveBasis` for the path, and `d3.scaleTime`/`d3.scaleLinear` for axes. Data comes from a CSV of yearly world population figures, parsed and rendered as an SVG. Gridlines and formatted tick labels (e.g., billions) enhance readability, while the maroon fill highlights the area under the curve.

Loading thumbnail…

Fork of Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature readings in San Francisco, plotting time on the x-axis against temperature in Celsius on the y-axis. Each data point is rendered as a semi-transparent SteelBlue circle, with the title “A Week in San Francisco” displayed above the chart. The visualization is built using D3 v5, employing `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles for data points. Data is loaded from a CSV file fetched via a Gist URL, with timestamps parsed as `Date` objects.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over time, with each red circle representing a data point positioned by timestamp on the x-axis and temperature on the y-axis. The chart uses D3 v5 to load CSV data from a GitHub gist, apply linear scales with `d3.scaleLinear`, and render axes via `d3.axisBottom` and `d3.axisLeft`. Grid lines and labeled axes clarify the relationship, while the title and styled text come from SVG elements and CSS.

Loading thumbnail…

LinePlot of Temperatures in San Francisco

This visualization displays global population changes from 1950 to 2015, using a line chart rendered with SVG. The chart maps years on the x-axis and population counts on the y-axis, with grid lines for readability. Data comes from the World Population by Year 2015 dataset. The code uses D3 v5 methods including `area`, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `curveBasis` to generate the filled area path, with axis labels and a title styled via CSS.

Loading thumbnail…

LinePlot of Temperatures in San Francisco

This line plot shows daily temperature variations in San Francisco over a week, with time on the x-axis and temperature on the y-axis. It uses d3.scaleTime and d3.scaleLinear to map the data, d3.axisBottom and d3.axisLeft for labeled axes with grid lines, and SVG circles to mark each measurement. The data is loaded as CSV and parsed with JavaScript Date objects. The chart also includes a title and formatted axis labels, following a clean, minimalist style.

Loading thumbnail…

Temerature in SF scatterplot

This scatterplot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The chart uses red, semi-transparent circles to represent individual data points, with grid lines and clearly labeled axes for readability. Built with D3 v5, the code employs `scaleLinear` for both axes, `axisLeft` and `axisBottom` to generate ticks, and SVG rendering for output. The data is loaded via D3's `csv` function from an external URL, and margins are applied to position the title and axis labels.

Loading thumbnail…

Cars Scatter Plot

A scatter plot displays the populations of the ten most populous countries, with each country represented as a circle along the y-axis and its population on the x-axis. The visualization uses d3.csv to load the data, d3.scaleLinear for the x-scale, and d3.scalePoint for the y-scale, with axes generated by d3.axisLeft and d3.axisBottom. The chart includes a title, axis label, grid lines, and formatted tick labels using d3.format. Data originates from the 2018 United Nations World Population Prospects estimate.

Loading thumbnail…

Fork of Customizing Axes jls

This horizontal bar chart displays the populations of the world’s ten most populous countries, based on 2018 United Nations estimates. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for bar widths and `d3.scaleBand` for category spacing. Axes are customized with `d3.axisLeft` and `d3.axisBottom`, applying tick formatting via `d3.format` to abbreviate large numbers in billions. The chart includes a title, axis labels, and grid lines, with data loaded from a CSV file.

Loading thumbnail…

Customizing Axes

This example shows the ten most populous countries in 2018 as a horizontal bar chart, with population values converted to billions and labeled on a custom x-axis. The chart uses D3 v5’s `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG rectangles, while the axes are styled by removing domain lines and tick marks via `selectAll`. Population data comes from the United Nations’ World Population Prospects 2017 estimate, and the tick labels are formatted with `d3.format`.

Loading thumbnail…

Fork of D3 Starter jls

This example displays the static text “Hello D3 version 6” centered on a blank page. It serves as a minimal starter template, demonstrating how to initialize a D3 v6 project. The code uses the `select` function from the D3 library to target the page’s body and applies the `.text()` method to set its content. The page loads D3 via a CDN script tag and runs a separate JavaScript bundle for the actual rendering logic.

Loading thumbnail…

Fork of Fork of Bar Chart3

This bar chart displays the population of nine U.S. states based on 2018 estimates from the United Nations World Population Prospects. The horizontal bars use a linear scale for the number of residents and a band scale for state names, with axis helpers adding labeled ticks. The SVG is rendered using D3 v5, with data loaded from a CSV file and numeric values parsed before drawing rectangles.

Loading thumbnail…

Fork of Bar Chart

This bar chart displays population figures for ten countries, with each bar’s width proportional to its population using a `d3.scaleLinear` for the x-axis and a `d3.scaleBand` for the y-axis to position countries. Data is loaded from a CSV via `d3.csv`, with population values converted from strings to numbers. The chart renders as SVG rectangles inside a fixed 960×500 viewport, using D3 v5’s data join to append elements. The code omits vertical bar positioning, leaving the default y-coordinate, while the x-scale domain spans from zero to the maximum population.

Loading thumbnail…

Bar Chart

The bar chart displays population data for the ten most populous countries, with each bar’s height representing the population size. The visualization uses D3.js v5 to load CSV data via the `csv` function, convert population values to numbers, and render rectangles as bars. The chart’s scaling is set up with `scaleLinear` and `max`, though the actual bar height calculation is incomplete, showing only an initial scaling setup.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This fork of “Let’s make a face with D3.js!” displays a smiling face whose eyebrows animate with a subtle upward motion. The example uses basic D3.js v5 selections and attribute manipulation to build SVG shapes directly in the browser. It binds the computed dimensions from the surrounding `svg` element and applies transformations to the eyebrow elements, demonstrating fundamental DOM operations without complex data binding. A linked YouTube tutorial accompanies the code, which relies on `d3.select` and `attr` methods.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js

This example draws a cartoon face in SVG using D3 version 5. It builds the head, eyes, eyebrows, and mouth from primitive shapes, positioning them with coordinate math and an SVG transform. The code uses D3’s `select` to target the element, `arc` to generate the mouth path, and a chained `transition()` call to animate the eyebrows up and down over two seconds. A yellow circle, black eye circles, and gray eyebrow rectangles are styled via attributes.

Loading thumbnail…

Fork of Let's make a face with D3.js

A yellow SVG face is drawn with D3.js v5, featuring two large eyes and an open mouth rendered as an arc path. The face uses `d3.select` and `d3.arc` to construct the shapes on an SVG canvas. The code includes a commented-out animated eyebrow section that would use `transition` to move eyebrows up and down, though the active version shows only static features. All elements are positioned using SVG transform attributes, with the face centered on a 960×500 viewport.

Loading thumbnail…

Fork of Shapes with SVG jls

This example shows nested SVG shapes stacked to demonstrate hierarchical grouping and transform inheritance. The visualization places circles and rectangles inside `<g>` elements, with successive groups translating downward and applying fills, strokes, and explicit overrides for individual shape colors. A separate group containing a line and a path is styled via CSS using the `.lines` class, which sets stroke color and width. The code uses raw SVG markup within an HTML page, leveraging React as the framework and scaling the entire composition with a `scale()` transform.

Loading thumbnail…

Shapes with SVG

This example shows how to draw basic SVG shapes—circles, rectangles, and a line—on an HTML page. It demonstrates grouping with `<g>` elements to apply shared fill and stroke styles, and shows how individual shapes within a group can override those properties. The code uses raw SVG markup embedded directly in the HTML, with attributes like `transform`, `fill`, and `stroke-width` controlling appearance and position. No JavaScript libraries are used; rendering relies entirely on the browser’s native SVG support.

Loading thumbnail…

Fork of HTML Cars Report and Shapes with SVG jls

This example displays a set of basic SVG shapes—two circles and two rectangles—positioned on a 960×500 canvas. It demonstrates how to define shapes and apply fill colors using SVG attributes. The first circle and rectangle rely on default black fill, while the second pair use explicit red and green hex values. The page is styled with CSS, setting a monospace font and hiding overflow, while the shapes are rendered directly inline in HTML without any JavaScript libraries or data sources.

Loading thumbnail…

HTML Cars Report and Shapes with SVG

This example shows a basic set of geometric shapes—two circles and two rectangles—rendered in an SVG canvas. It demonstrates how to apply inline styling directly to SVG elements, with one circle filled red and one rectangle filled with a specific green hex color, while the other shapes use the default black fill. The code uses raw HTML with CSS from an external stylesheet and JavaScript, though no JavaScript logic is present. It serves as a minimal introduction to SVG shape creation and styling without any charting or data-visualization libraries.

Loading thumbnail…

Car Report

This example demonstrates a simple text-based report of cars filtered by price, displaying each vehicle’s year, make, model, and cost. It shows asynchronous data loading with a Promise-based `getCars` function, ES6 module imports and exports, and string formatting via `formatCar`. The code uses `JSON.parse` to parse hardcoded car data and `textContent` to update the HTML `<pre>` element. It highlights modular JavaScript organization in VizHub without any charting or visualization libraries.

Loading thumbnail…

Fork of Cars Report

This example demonstrates a JavaScript module-based workflow for generating a text report of used cars filtered by price. It shows a loading message, then displays a formatted list of cars under $2,000, including year, make, model, and price. The code uses `JSON.parse` to load an embedded car dataset, `Promise` with `setTimeout` to simulate an asynchronous API call, and `Array.filter` and `map` combined with string template literals to build the output. The report is rendered directly into an HTML `<pre>` element.

Loading thumbnail…

Fork of Hello VizHub jls

This example demonstrates how to load D3 via UNPKG and use ES6 modules with D3’s `select` function to set text content in a page. It imports a string from a local module and uses `select('#message').text(message)` to render it. The code shows basic HTML structure and CSS styling for centered, large text. It is a minimal demonstration of D3’s DOM manipulation and module import patterns in a VizHub project.

Loading thumbnail…

Fork of Let's make a face with D3.js

A stylized, animated face rendered in SVG with D3.js v5. The face is built from primitive shapes—a yellow circle for the head, black circles for eyes, and an orange arc for a mouth—all centered within a 960x500 canvas. The animation is driven by D3's transition system, which moves the eyebrows upward and back over two seconds each. The code demonstrates modular imports from `d3`, including `select` and `arc`, and uses `arc()` to generate the mouth path with specified inner and outer radii and angular extents.

Loading thumbnail…

Fork of Fork of Smiley Face Part II jls

This example shows a yellow smiley face rendered as a full-screen SVG graphic, with two black eyes positioned symmetrically around the center and no mouth drawn. The face is built using React 16.9 and ReactDOM, creating nested `<circle>` elements inside an SVG container. The code calculates the face radius from the window height and uses absolute positioning via a `<g>` transform to center the graphic. The rendering approach relies on React’s virtual DOM to declaratively define the SVG structure, with dimensions and offsets set as JavaScript constants. The eyes are simple filled circles, while the face outline uses yellow fill with a black stroke.

Loading thumbnail…

Fork of Smiley face part 1

A yellow circular face with black outline, two black eyes, and a half-mouth arc represents a partial smiley face centered on an SVG canvas. The visualization uses React to render the SVG elements and d3.arc to construct the mouth path with specified inner and outer radii and angular ranges. The face is drawn with hardcoded dimensions, including eye offsets and radius values, with no animation or interaction.

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a full-window smiley face rendered as an SVG, with a yellow circle, two dark eyes, and a black stroke outline, all positioned relative to the center of the viewport. It uses React and ReactDOM to create each SVG circle element, computing coordinates from the window dimensions and drawing the face without a mouth. The stroke is applied with a width of 20 pixels, and the face scales its radius based on the window height minus half the stroke.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face whose eyebrows animate upward and downward in a continuous loop. The SVG face is constructed using D3’s `select` and `append` methods to create circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows’ motion is achieved through chained `transition().duration(2000)` calls, which toggle the `transform` attribute between two vertical offsets. The code relies on D3 v5 and uses raw SVG attributes for positioning and styling.

Loading thumbnail…

Fork of Smiley face part 1

A smiley face is drawn halfway, with a green circular face outlined in red, two black eyes, and an open mouth formed by an arc. The visualization uses React to render SVG elements, while D3’s `arc` generator computes the mouth path based on specified inner and outer radii and angles. The code defines fixed dimensions and offsets for the face, eyes, and mouth, producing a static graphic without interaction or animation.

Loading thumbnail…

smileyface_js1

This example demonstrates a minimal D3 version 6 setup by rendering the text "Hello D3 version 6" centered on a blank page. It uses the `select` method from the D3 library to target the `body` element and apply the text via `.text()`. The visualization is purely text-based, with no data or charts, and serves only as a starting point for working with D3 v6. The page loads D3 from a CDN and runs the script from an external bundle.

Loading thumbnail…

happy face

This visualization displays a simple, static smiley face constructed from three SVG circles on a green background. The face features a large green circle as the head with black stroke, and two smaller black circles positioned as eyes. The code uses raw SVG elements within an HTML file, with coordinates set for a 960x500 canvas. It does not include a mouth, matching the title's note that it is only halfway towards a complete smiley face. The rendering approach relies entirely on inline SVG markup.