G

Geolffrey S Mena

@geolffrey·60 public vizzes

Loading thumbnail…

Fork of Organization Graph Diagram

This graph diagram visualizes the interconnected organizations within the Kenneth Rainin Foundation, using colored nodes and links to distinguish four main groups and their sub-entities. It employs D3's force-directed layout, combining `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes dynamically. Links are drawn as SVG lines, while nodes are circles with labels, all rendered in an SVG container. The network is built from a custom dataset, with node sizes varying by hierarchy, and users can drag nodes to interact with the simulation.

Loading thumbnail…

Fork of D3 Git History Streamgraph

This visualization shows a streamgraph of commit activity across the many D3 repositories, with each layer representing a package and thickness reflecting weekly commit counts with smoothing applied via the `array-blur` library. Layer order follows the time of first commit, revealing the early dominance of the monolithic d3 repo and the explosion of packages around the 4.0 release. Built with D3 v6, it uses `d3.stack()` with `stackOffsetWiggle` and `stackOrderAppearance`, plus `d3-area-label` for labels. Data comes from a JSON file of all D3 commits, rendered as SVG paths with an axis and hover effects.

Loading thumbnail…

Fork of Grakn D3 Force Graph

This example visualizes a graph of entities and attributes from a Grakn knowledge graph, rendered as an interactive force-directed network. Using d3.forceSimulation, forceLink, and forceManyBody, nodes are positioned and connected by links, with SVG rectangles and text labels styled by node type. The code includes a custom right-click context menu (createContextMenu) that appears at the cursor position, offering placeholder actions. Zooming is enabled via d3.zoom, and node dragging is supported through d3.drag, all within a React-based setup using D3 v4.

Loading thumbnail…

Smiling Face

A yellow circle with two smaller black circles forms a smiling face. The visualization renders static SVG shapes in a React application. The code uses React and ReactDOM, with the SVG elements defined directly in the HTML file. The face is created using three circle elements with specified radii and positions, styled with yellow fill and black stroke.

Loading thumbnail…

Smiling Face

A smiling face rendered as yellow SVG circles with black outlines. The static graphic uses a large circle for the face and smaller circles for the eyes, positioned on a 960×500 canvas. The index.html file includes React and ReactDOM production libraries, while the page loads bundle.js for potential interactivity, though the current SVG markup is plain HTML without any dynamic behavior.

Loading thumbnail…

Smiling Face

A yellow circle with a black outline forms the face, and two smaller black circles serve as the eyes. The example demonstrates a static smiling face without a mouth, created using basic SVG shapes within an HTML page. It uses the SVG `<circle>` element to draw the head and eyes, with inline styling for colors and stroke width. The rendering relies on SVG's declarative syntax, and the page has a hidden overflow and zero margin for a clean display.

Loading thumbnail…

React Hooks Bowl of Fruit

A row of apples rendered as SVG circles demonstrates React Hooks state management. The `FruitBowl` component maps fruit data to circles, using D3's `scaleOrdinal` for color and radius scales. React's `useState` tracks the selected fruit, and clicking a circle updates its selection, toggling a black stroke. The example uses D3.v5 for scales and React 16.8's Hooks API within a static fruit array.

Loading thumbnail…

Book LRND3 v4 Chapter4

This example demonstrates various D3.js v5 scale and shape techniques using SVG rendering. It creates a chart with ordinal scales mapping 30 data points to point and band positions, displaying symbols and colored rectangles with d3.schemeCategory10 and schemeSet1-3. The visualization also plots the Weierstrass function using linear, identity, power, and log scales with d3.line paths. Additional elements include sine wave paths, areas with curve interpolation, arcs using d3.arc, and custom symbol shapes.

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how D3.js data joins and transitions can create an animated fruit bowl, with apples and lemons that appear and disappear over time. The code uses d3.scaleOrdinal for color and radius mapping, while d3.select and selection.merge handle enter, update, and exit states. SVG circles and text elements render each fruit, and transition().duration() animates position changes and removals. The visualization cycles through three timed updates: removing a fruit, changing one apple to a lemon, and filtering out another item, showing dynamic data binding with the fruitBowl module.

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates D3.js update patterns for animating changes to a fruit bowl. Apples and lemons transition smoothly when fruits are removed or change type, with circles scaling and repositioning over one-second intervals. The `fruitBowl` module uses `scaleOrdinal` for color and radius mapping, while `transition().duration(1000)` animates enter, update, and exit selections. Data binds to SVG groups via `selection.data` with an id-based key function, and JavaScript `setTimeout` triggers the staged modifications.

Loading thumbnail…

Let's make a face with D3.js

A live SVG animation demonstrates data joins with D3.js v5, showing a row of five apples that shrink, disappear, and transform into lemons over timed intervals. The example uses `selectAll().data()` with enter, update, and exit selections, `transition().duration()`, and `scaleOrdinal` for color and radius mapping in a custom `fruitBowl` module. Periodic `setTimeout` calls mutate the fruits array, triggering re-renders that animate the changes smoothly.

Loading thumbnail…

Let's make a face with D3.js

A short animated scatterplot demonstrates D3.js update patterns by rendering a bowl of fruit as colored circles that change radius and position over time. Using `d3.scaleOrdinal` for color and radius mapping, the example appends, transitions, and removes circles with `selection.merge` and `transition.duration`. The data array mutates through timed `setTimeout` calls, removing items, changing a fruit’s type from apple to lemon, and filtering out a selection, all while the SVG updates smoothly with enter, update, and exit selections.

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how D3.js can animate changes to a fruit bowl visualization over time, showing apples and lemons as colored circles on an SVG canvas. The fruitBowl module uses d3.scaleOrdinal to map fruit types to colors and radii. Through d3.select and data joins, the code updates the scene at one-second intervals, removing a fruit, changing one apple to a lemon, and filtering out another item. The visualization highlights D3's enter, merge, and exit selections for dynamic data binding.

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a dynamic fruit bowl visualization rendered as SVG circles, showing five apples that shrink to four and transform one into a lemon through timed transitions. The code uses D3.js v5 selection methods (`selectAll`, `enter`, `merge`, `exit`) with the `fruitBowl` module applying ordinal scales for color and radius via `scaleOrdinal` from d3. Data updates occur through `setTimeout` callbacks in `index.js`.

Loading thumbnail…

Let's make a face with D3.js

A data-driven update pattern renders a bowl of fruit as colored circles, transitioning from six red apples to a lemon over time. Using D3.js v5, the example demonstrates data joins with `selection.data`, `enter`, `merge`, and `exit` methods within a custom `fruitBowl` function. A `scaleOrdinal` maps fruit types to fill colors and radii, while `setTimeout` triggers sequential state changes—removing one apple and mutating another to a lemon—to show how the visualization reacts to data updates. The SVG is selected and populated from a static `index.html` file.

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a simple animated face made from D3.js circles, where fruits represent facial features. It shows five apples initially, then removes one apple and changes another into a lemon, updating the circle sizes and colors accordingly. Using D3 v5 APIs like `d3.range`, `d3.scaleOrdinal`, and selection methods like `selectAll`, `enter`, `merge`, and `exit`, it dynamically redraws the SVG circles in response to data changes. The visualization uses ordinal color and radius scales to map fruit types to red or yellow hues and varying sizes.

Loading thumbnail…

Let's make a face with D3.js

A D3.js v5 example demonstrates data-binding and enter/exit updates by rendering a row of fruit as SVG circles. Five apples appear initially, then one is removed after a second, and a third apple becomes a lemon after two seconds, illustrating dynamic updates to the DOM. Using `d3.select`, `scaleOrdinal`, and `range`, the code maps fruit types to fill colors and radii, with all circles positioned via `attr` and removed via `.exit().remove()`.

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how data binding and updates with D3 v5 can make a face out of fruit circles. The code uses `d3.select`, `scaleOrdinal` for color and radius, and joins circle elements to an array of fruit objects. Initially five apples render; after one second, a fruit is removed via `fruits.pop()`, and after two seconds, one apple becomes a lemon, updating the visualization with enter, update, and exit selections.

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a simple data-join workflow in D3.js, rendering a row of five red circles as “apples” and then removing them one by one over time. The code uses `d3.select`, `d3.range`, and the `data()` method with `enter()` and `exit()` selections to manage SVG circle elements dynamically. It also relies on `setTimeout` to trigger two successive updates, showing how `exit().remove()` cleans up removed data points. The visualization is rendered as an SVG inside a fullscreen, dark-themed page with large circular shapes.

Loading thumbnail…

Let's make a face with D3.js

A single SVG contains a row of five red circles, representing apples, which are drawn using D3.js’s `select`, `range`, and `append` methods. The code initially renders all five fruits, then after a one-second timeout, it removes one from the end of the data array and re-renders the visualization. This shows how D3’s enter and exit selections manage dynamic updates to the scene, with the circle positions computed via an index-based formula. The example uses D3 v5 and the SVG rendering approach.

Loading thumbnail…

Let's make a face with D3.js

Five red circles appear in a row on a dark blue canvas, resembling a simple face when viewed together. The example demonstrates the D3.js v5 selection API, using `select` to target the SVG element and the `range` function to create an array of fruit objects. The `render` function appends circles with the D3 `selectAll` and `data` methods, then removes one circle after the initial render by calling `fruits.pop()` and re-rendering, showing the exit selection in action. The rendering is SVG-based, with styling from the included stylesheet.

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates the fundamental D3.js data-join pattern by rendering a row of red circles that function as a face. The code uses `d3.select` and `d3.range` to generate an array of fruit objects, then binds that data to SVG circles with `selectAll().data().enter()`. After an initial render, `fruits.pop()` removes one data element, and the `exit()` selection turns that circle black to visualize the removal. The SVG canvas measures 960×500 pixels, with circles spaced 120 pixels apart.

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to create a simple face-like pattern using D3.js by rendering five red circles across the center of an SVG canvas. The visualization uses fruit objects as the data source, with each fruit type assigned to a circle. The code leverages D3’s `select`, `range`, and `enter().append()` methods to bind data and generate circle elements, setting their `cx` positions based on index and `cy` to the vertical center. The resulting static composition highlights basic data-binding and SVG shape creation in D3 v5.

Loading thumbnail…

Let's make a face with D3.js

A playful SVG face built from five apples, each represented as a circle with fixed facial features, demonstrates basic D3.js shape creation and data binding. The code uses `d3.select` and `d3.range` to generate an array of fruit objects, then renders them inside a static 960×500 SVG canvas. The face’s layout is hardcoded through SVG attributes rather than a force simulation or scales, and the styling relies on an external Ubuntu font and dark background. This example highlights how D3 v5 can manage simple data-to-element mappings without interactive transitions.

Loading thumbnail…

Let's make a face with D3.js

This example draws a simple face using SVG shapes created with D3.js v5. The visualization uses the `select` and `arc` methods from the D3 library to generate the facial features, including eyes and a mouth, within an SVG container sized 960 by 500 pixels. The page is styled with a dark blue background and a large Ubuntu font, though the face itself is the main focus. The code demonstrates basic D3 SVG rendering without any data binding or interactivity.

Loading thumbnail…

Let's make a face with D3.js

A face rendered in SVG displays yellow circular head, eyes, eyebrows, and a mouth. D3 v5 code builds the face using `d3.select`, `d3.arc` for the mouth path, and appended `circle` and `rect` elements. Eyebrows animate with `transition.duration()`, moving them downward and back over two seconds each way, while the head and features remain static against a dark blue background.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays one week of temperature data for San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Each data point is rendered as a semi-transparent steel-blue circle. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft with grid lines. The data originates from the Data Canvas - Sense Your City project.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the 2019 populations of the ten most populous countries, with horizontal bars ranked from China down to Mexico. The visualization uses D3 v5 with an SVG rendering, employing `scaleLinear` for the population axis and `scaleBand` for country categories. Axis labels and a title are added via D3’s axis components. Population values are parsed from a CSV file and formatted in billions using D3’s `format` function. Data originates from the World Population Prospects 2019 report.

Loading thumbnail…

Religions of Largest 20 Countries

This interactive stacked bar chart displays the estimated 2010 religious breakdown of the 20 most populous countries, with each bar segmented by religion and colored using a categorical scale. Hovering over a bar reveals a tooltip with exact population figures, while hovering over the legend highlights corresponding segments by dimming others. The visualization uses D3 v3 with `d3.layout.stack` for stacking, `d3.svg.axis` for axes, and `d3.legend` for the color legend. Data originates from Pew Research’s Global Religious Landscape, processed into a CSV of country, religion, and population values, rendered as an SVG animation.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot shows temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis using a time scale and linear scale, respectively. The data is loaded from a CSV file and parsed into numeric and date formats. D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` render the axes, while circles are drawn on an SVG canvas with semi-transparent styling. Grid lines are generated via tick sizes, and axis labels are added manually.

Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

Loading thumbnail…

Religions of Largest 20 Countries

This interactive stacked bar chart displays the estimated 2010 religious breakdown of the 20 most populous countries, with each bar segmented by religion and colored using a categorical scale. Hovering over a bar reveals a tooltip with exact population figures, while hovering over the legend highlights corresponding segments by dimming others. The visualization uses D3 v3 with `d3.layout.stack` for stacking, `d3.svg.axis` for axes, and `d3.legend` for the color legend. Data originates from Pew Research’s Global Religious Landscape, processed into a CSV of country, religion, and population values, rendered as an SVG animation.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each circle representing a vehicle. The chart uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while `extent` determines the domain from the data. The SVG rendering includes grid lines via tick sizes and a rotated y-axis label. Data comes from the auto-mpg dataset loaded with `csv`, and parsed numeric values feed the scales. Circles are rendered semi-transparent red with a fixed radius, and margins position the chart within a 960x500 viewport.

Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2019 estimates from the World Population Prospects. The visualization uses D3 v5 with d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render horizontal bars in SVG. Population values are multiplied by 1000 to reflect actual counts. The chart encodes country names on the y-axis and population on the x-axis, with steelblue rectangles representing each nation’s population.

Loading thumbnail…

Bar chart

This example shows a bar chart comparing workstation states for four crews, with each crew’s data split across work, stop, and idle segments over a time-scaled horizontal axis. The visualization uses a band scale for categories and a time scale for dates, with ordinal color encoding for the segments. It loads data from a CSV file and renders as static SVG rectangles, though the chart’s axes and tooltips are not fully wired in the provided code. The implementation relies on D3 v5 primitives such as `scaleTime`, `scaleBand`, `scaleOrdinal`, and `csv`.

Loading thumbnail…

Time Line

This timeline visualization displays the projected start and end dates for a series of project phases, from Induction through Tag, spanning late 2019 into early 2020. The chart uses an SVG canvas with D3 v5’s `scaleBand` for the categorical phase labels and `scaleLinear` for the date range. Data is loaded from a CSV file. The code builds a horizontal bar chart, using `axisBottom` for the time axis and custom tick formatting, and applies a reusable group `g` to position elements within specified margins.

Loading thumbnail…

Bar chart

This bar chart shows the distribution of work, stop, and idle time for four different crews, with time plotted on a time-based x-axis and crews on a categorical y-axis. It uses D3.js version 5.11's `scaleTime`, `scaleBand`, and `scaleOrdinal` to map the data, and `axisLeft` and `axisBottom` for rendering the axes. The chart is drawn as an SVG with a green fill for the bars, and the data is loaded from a CSV file via `csv`. The x-axis range is set from November 2016 to February 2017, with a custom tick format function.

Loading thumbnail…

Bar chart

This bar chart displays the distribution of work, stop, and idle time for four different crews, with each crew represented by a horizontal bar. The chart uses a time-based x-axis and a categorical y-axis, with green bars showing the population value from the CSV data. The visualization is built with D3.js, using scaleTime for the time axis, scaleBand for positioning the bars, and scaleOrdinal for color mapping, though the bars appear uniformly green due to CSS styling. Data is loaded from a CSV file and rendered as SVG.

Loading thumbnail…

Bar chart

This example shows a horizontal bar chart comparing the "population" values of four crews across three categories: State, Stop, and Idle. The visualization displays the data from the provided `data.csv` file, with each bar’s length representing the numeric population value. Using the D3.js library (version 5.11.0), the code employs `scaleTime` for the x-axis and `scaleBand` for the y-axis, along with `axisLeft` and `axisBottom` to render the chart’s axes. The bars are drawn as rectangles with a fixed green fill, and the data is loaded asynchronously via `csv('data.csv')`. The rendering is delivered as an SVG element within an HTML page.

Loading thumbnail…

Bar chart

This bar chart displays work, stop, and idle statuses for four crews, with each crew’s data encoded as a single green bar scaled along a time-based x-axis from November 2016 to February 2017. The visualization uses d3.csv to load data, d3.scaleTime for the horizontal axis, d3.scaleBand for vertical positioning, and d3.scaleOrdinal for potential color mapping, though bars are uniformly styled via CSS. SVG rendering in index.html receives the chart through d3 selections and axes, with the dataset split into three columns per crew.

Loading thumbnail…

Bar chart

A bar chart displays the relative proportions of work, stop, and idle time for four crews, using horizontal stacked bars. Each crew’s row is composed of three colored segments whose lengths correspond to the numeric values from the CSV data. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to load the data, position the bars, and render axes in SVG. A static color scale assigns distinct hues to the three activity categories.

Loading thumbnail…

Bar chart

A horizontal bar chart displays population counts across weekly periods from 2019-W31 to 2019-W35. The bars are drawn as green SVG rectangles using D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with `axisLeft` and `axisBottom` providing tick labels. Data is loaded from a local CSV file via `d3.csv`, and numeric values are coerced with unary plus. The visualization uses an SVG container with fixed margins, rendering the chart in a clean, minimal style.

Loading thumbnail…

Bar chart

A horizontal bar chart displays population counts for five weeks (2019-W31 through 2019-W35) using green rectangles. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to map the data and render axes. Data is loaded from a CSV file via `d3.csv` and rendered as SVG elements.

Loading thumbnail…

Time Line

A horizontal bar chart displays the population of the top 10 most populous countries, using 2019 estimates from the World Population Prospects dataset. The chart renders as SVG via D3 v5, with a linear scale for population values and a band scale for country names. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisBottom with custom tick formatting to label the x-axis. Chart margins and axis labels are configured explicitly, and population values are multiplied by 1000 during data preprocessing.

Loading thumbnail…

Scatter Plot

A horizontal bar chart displays the population of the ten most populous countries from the 2019 World Population Prospects. The chart uses d3.scaleLinear for the x-axis and d3.scaleBand for the categorical y-axis, with axis labels and a title rendered via d3.axisBottom and d3.axisLeft. Bars are drawn as SVG rectangles, with tick marks and domain lines partially removed for a cleaner look. Data is loaded from a CSV file and population values are converted from thousands to absolute numbers before rendering.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays one week of temperature data for San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Each data point is rendered as a semi-transparent steel-blue circle. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft with grid lines. The data originates from the Data Canvas - Sense Your City project.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the top 10 most populous countries using circular markers sized by population, with countries on the y-axis and population values on the x-axis. The visualization uses D3 v5’s `scaleLinear` and `scalePoint` for positioning, `axisLeft` and `axisBottom` for labeled axes, and SVG circles for the data points. Population data from the 2019 World Population Prospects is loaded via `d3.csv`, with values converted from thousands to raw counts. Axis labels and grid lines are styled with the included CSS.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using the 2019 estimates from the World Population Prospects. It encodes country names on the y-axis and population values on the x-axis as circular points. The visualization uses D3 v5, specifically `d3.scaleLinear` and `d3.scalePoint` to map data to coordinates, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file using `d3.csv` and rendered as an SVG.

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of the top 10 most populous countries, based on 2019 estimates from World Population Prospects. The chart uses a vertical layout with country names on the y-axis and population values on the x-axis. The code builds the visualization with D3 v5, using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render an SVG. Population data is loaded as CSV and scaled to thousands; bars are drawn as `rect` elements with a steelblue fill.

Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the top 10 most populous countries based on 2019 estimates from the United Nations’ World Population Prospects. It shows population values on the x-axis and country names on the y-axis, with steel-blue bars sorted by descending population. Using D3 v5, the code employs `scaleLinear` and `scaleBand` for axes, `axisLeft` and `axisBottom` for ticks, and `format` to abbreviate large numbers (e.g., “1.43B”). Population data is loaded from a CSV file and scaled by 1,000. The chart is rendered as SVG with margins, axis labels, and a title.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population estimates for the top 10 most populous countries in 2019, sourced from the World Population Prospects. The visualization uses a linear scale for the x-axis and a band scale for the y-axis, with bars rendered as SVG rectangles. The code leverages D3 v5 modules like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, including custom tick formatting that converts numbers to billions. Population values are parsed from a CSV file and multiplied by 1000 to reflect actual figures.

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of the top 10 most populous countries, using 2019 estimates from the World Population Prospects dataset. The chart encodes population on a linear scale and country names on a band scale, with axes and tick labels rendered in SVG. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom for axes. It also formats tick labels using d3.format, replacing “G” with “B” to display values in billions. The chart is styled with custom CSS and a title.

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays the 2019 population estimates for the top 10 most populous countries, sourced from World Population Prospects. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom to render axes with formatted tick labels. Bars are drawn as SVG rectangles with heights determined by the band scale’s bandwidth.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2019 estimates from the World Population Prospects. The visualization uses D3 v5 with d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render horizontal bars in SVG. Population values are multiplied by 1000 to reflect actual counts. The chart encodes country names on the y-axis and population on the x-axis, with steelblue rectangles representing each nation’s population.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2019 estimates from the World Population Prospects. The visualization uses D3 v5 with d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render horizontal bars in SVG. Population values are multiplied by 1000 to reflect actual counts. The chart encodes country names on the y-axis and population on the x-axis, with steelblue rectangles representing each nation’s population.

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of the populations of the ten most populous countries in 2020, drawn as an SVG. The chart uses horizontally-oriented bars with a linear population scale on the x-axis and a band scale for country names on the y-axis. Built with D3 v5, it loads data from a CSV file and uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct and label the visualization. The bars are rendered as SVG rectangles with a steelblue fill.

Loading thumbnail…

Let's make a face with D3.js

A cheerful SVG face is drawn using D3.js v5, with a yellow circle for the head, eyes, eyebrows, and a mouth created via the d3.arc path generator. The eyebrows animate upward and downward using chained transition calls with a two-second duration each, shifting their group’s transform attribute. All shapes are appended to a centered g element, with positions set through absolute pixel offsets for facial features.

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn using D3.js v5. The SVG elements are centered via a translation transform, and the mouth is created with the `d3.arc` generator. The eyebrows animate up and down using chained `transition().duration()` calls, moving their group container's transform over two seconds each way. The code selects the SVG, sets dimensions from its attributes, and appends all shapes.