Lonwabo11

Title

A bar chart displays the relative rank of nine characters from the movie Suicide Squad, with each orange bar labeled by character name and scaled against a linear axis from zero to 100. The visualization uses D3 v5 to load data from a JSON file and render the SVG output. Mouseover events trigger a tooltip that shows the character's name and rank. The chart employs d3.scaleBand for the categorical x-axis, d3.scaleLinear for the quantitative y-axis, and d3.axisBottom with d3.axisLeft for the axes.

Aug 7, 2019

bar chart

A bar chart displays the Suicide Squad cast members ranked by a numerical score, with character names on the x-axis and their rank values on the y-axis, using orange rectangles. The example loads data from a local JSON file, which includes names, actors, ranks, and descriptions, and renders it as an SVG using D3 v5. It employs `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the continuous axis, and `d3.axisBottom`/`d3.axisLeft` to generate ticks. The chart includes a title, margins, and axes, with data fetched via `d3.json`.

Aug 7, 2019

bar chart

This bar chart displays the ranks of characters from the Suicide Squad cast, with each character’s name on the x-axis and their rank value on the y-axis. The visualization uses d3.scaleBand and d3.scaleLinear to position the orange rectangles, while d3.axisBottom and d3.axisLeft render the axes. Data loads from a local JSON file via d3.json, and the SVG output includes a title and margin-based layout.

Aug 7, 2019

Graph with four lines

This chart displays the allocated and unallocated telescope time for three instruments (IRSF, 1.9-m, and 1.0-m) using stacked bars. Each subgroup is represented by color, with a legend showing red for allocated and blue for unallocated time. The D3 v5 code uses `d3.stack` to build the layered series, `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file via `d3.csv`.

Jul 19, 2019

Graph with four lines

This visualization shows how hourly measurements for a telescope named Lesedi vary over several days in March 2015, using a colored line chart with four distinct lines. It loads data from a CSV file and renders it as an SVG using D3 v5, with a time-scaled x-axis and a linear y-axis. The chart employs `d3.nest` to group data by telescope, `d3.line` with `curveBasis` to smooth each series, and `d3.scaleOrdinal` with `schemeCategory10` to assign stroke colors to each line.

Jul 7, 2019

Cars Scatter Plot

This scatter plot visualizes car data from the UCI Machine Learning Repository, displaying each car as a red, semi-transparent circle. Positioned along the axes, the plot reveals the correlation between different vehicle attributes, such as horsepower and weight. The visualization is rendered using D3.js v5, leveraging the `d3.scaleBand` and `d3.scaleLinear` APIs to map data to the SVG canvas coordinates. Point interactions and the scatter plot's visual encoding are implemented through direct SVG circle elements, which are styled using the provided CSS.

Jun 24, 2019

Let's make a face with D3.js!

This example shows a multi-line chart of temperature readings over time, using a dataset of hourly measurements from the Lesedi telescope site. The visualization is built with D3.js v5 and rendered as SVG, featuring a timeline axis, gridlines, and a color legend mapping each line to a data category. The code demonstrates core D3 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `nest`, and a custom `colorLegend` component, with data loaded via `csv` and parsed into `Date` objects for the time scale.

May 31, 2019

Temperature line graphy by Lonwabo

This line graph shows temperature readings from three locations—Lesedi, meter, and meters—over a week in March 2015, plotted with a smooth curved line using the `curveBasis` interpolation. The visualization is built with D3 v5, using `scaleTime` for the time axis and `scaleLinear` for temperature, with axes created via `axisBottom` and `axisLeft`. Data is loaded from a CSV file containing telescope, timestamp, and value columns. The chart includes a title, axis labels, and gridlines, all rendered as SVG.

May 30, 2019

Cars Scatter Plot

This scatter plot visualizes car data from the UCI Machine Learning Repository's Auto MPG dataset, using a D3.js SVG rendering. The code reads a CSV file containing monthly measurements for three subgroups (Lesedi, meter1, meter2) and displays them as grouped bars. It leverages `d3.scaleBand` for the categorical month axis and `d3.scaleLinear` for the value axis, with `d3.axisBottom` and `d3.axisLeft` generating the axes. A `d3.scaleOrdinal` color scale distinguishes the subgroups, which are plotted using SVG `rect` elements.

May 30, 2019

Let's make a face with D3.js!

A line chart displays weekly averaged measurements from the Lesedi and meter telescopes between 2000 and 2010. D3.js selects SVG elements, applies time and linear scales, and renders paths with curved interpolation. A nested dataset groups values by telescope, with a custom color legend component. Axis ticks extend across the chart as gridlines, and the y-axis includes a domain without explicit removal. The visualization demonstrates reusable D3 modules, including `scaleTime`, `scaleOrdinal`, `line`, and `nest`.

May 29, 2019

Temperature line graphy by Lonwabo

This line graph visualizes daily temperature variations in San Francisco using data from a CSV file, plotting temperature against time. The chart is rendered as an SVG with D3.js, using `scaleTime` and `scaleLinear` to map the date and temperature values. The visualization employs `line` and `curveBasis` to create a smooth, curved path through the data points, with maroon stroke styling. Axis labels and a title are added via `axisBottom`, `axisLeft`, and text elements, with tick marks and gridlines styled through CSS. The data is loaded asynchronously from a remote CSV, and the timestamps are parsed as Date objects for the time scale.

May 28, 2019

Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, displaying relationships between vehicle attributes. Built with D3 v5, the SVG-based visualization uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for color encoding. The code renders grouped bar charts from CSV data rather than traditional scatter points, with `d3.scaleBand` handling categorical month groupings and `d3.axisLeft` and `d3.axisBottom` constructing the chart’s axes.

May 28, 2019

Cars Scatter Plot

This scatter plot displays the relationship between car attributes from the UCI Machine Learning Repository’s Auto MPG data set. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG chart with gridlines and labeled axes. However, the data loaded from `data.csv` contains only daily values, which are plotted as a smooth line using `curveBasis` and the `line` generator, rather than as traditional scatter points. The chart includes red circular markers and a maroon line-path for visual emphasis.

May 24, 2019

bar chart

This example shows a grouped bar chart of shutter open time across months, with separate bars for Lesedi, meter, and meters measurements. The visualization uses D3 v5 to load data from a CSV file and render SVG elements. It employs scaleBand for the month categories and sub-groups, scaleLinear for the y-axis, and axisBottom/axisLeft to display the month names and measurement scale. The bars are drawn through selectAll and enter/append operations, with fixed width and height values based on the y-scale range.

May 24, 2019

Let's make a face with D3.js!

This example demonstrates a bar chart of telescope data with fixed red, black, and green bars, arranged using D3's `scaleBand` and `scaleLinear`. The SVG axes are generated with `axisBottom` and `axisLeft`, and the chart includes padding and a title. Although the README describes an animated smiley face with moving eyebrows, the visible code instead renders static bar heights for each telescope, colored per data index. The implementation uses D3 v5 selections, scales, and axis components, with data sourced from an in-code array.

May 23, 2019

Temperature line graphy by Lonwabo

This visualization presents temperature data from San Francisco over a week, displayed as a smooth line path across time. The D3 v5 code loads CSV data from a remote URL, parses timestamps and numeric temperatures, and uses `scaleTime`, `scaleLinear`, `line`, and `curveBasis` to render a curved line. Custom axes with tick marks, axis labels, and a title are generated using `axisBottom` and `axisLeft`, with a maroon stroke styling the path in the SVG output.

May 23, 2019

Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car based on its weight and horsepower. The chart uses red, semi-transparent circles to reveal overlapping points, with axes and labels styled via CSS. Built with D3 v5, the code employs `d3.csv` to load remote data, `d3.scaleLinear` for scaling, and `d3.axisLeft` and `d3.axisBottom` to render the axis ticks and labels in SVG.

May 22, 2019

Cars Scatter Plot

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. It renders circular points on an SVG canvas, with each circle representing a car’s attributes. The code uses d3.scaleLinear for the x-axis population scale and d3.scaleBand for the y-axis, though the scatter point mapping is incomplete in the provided source. Axes are drawn with d3.axisLeft and d3.axisBottom, while d3.csv loads the data. The visualization appears interactive only through its static SVG rendering, with styling handled by external CSS.

May 22, 2019

bar chart

This example presents a bar chart visualization using D3 v5, loading automotive data from a CSV file hosted on VizHub. The SVG-based chart defines margins and computes inner dimensions, then sets up a linear scale for horsepower values with a domain derived from the dataset. The code uses d3.csv to fetch the data and d3.scaleLinear for the x-axis scale, though the rendering logic remains incomplete at the time of this snapshot.

May 22, 2019

Cars Scatter Plot

This scatter plot visualizes car data from the UCI Machine Learning Repository's Auto MPG Data Set, showing the relationship between vehicle attributes. The visualization uses D3.js version 5 with an SVG rendering approach, employing `d3.scaleLinear`, `d3.scaleBand`, and `d3.scaleOrdinal` to map the data. The code reads data from a CSV file and creates grouped bar charts for each month, with colors distinguishing different telescope measurements. Axes are rendered using `axisLeft` and `axisBottom` functions, with styling applied through a linked CSS file.

May 20, 2019

Cars Scatter Plot

A bar chart displays the population of ten countries, with horizontal bars sorted by country name and scaled by population. The visualization uses D3 v5 to load CSV data and render SVG elements, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for tick marks. Population values are converted from thousands before drawing red rectangles.

Cars Scatter Plot

This scatter plot visualizes country populations from a CSV dataset, displaying each country as a red circle on an SVG canvas. The code uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis to position the circles, with d3.axisLeft and d3.axisBottom generating the corresponding tick marks. The population values are multiplied by 1000 during data loading, and the plot is rendered using d3.csv to parse the data file. The visualization highlights population distribution across countries in a simple, clear format.

Cars Scatter Plot

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. It uses d3.scaleLinear and d3.scaleBand to map continuous and categorical variables, with SVG rectangles representing data points. The code loads a CSV file via d3.csv and processes population values, though the visualization itself displays car attributes. Axes are rendered using d3.axisLeft and d3.axisBottom, with styles defined for tick labels and the chart title.

Cars Scatter Plot

This scatter plot displays automobile data from the UCI Machine Learning Repository's Auto MPG data set. The visualization uses D3 version 5 to render SVG circles, with a red, semi-transparent fill, within a fixed 960×500 pixel canvas. The code defines linear scales for both axes, though the current implementation only maps population data from a separate CSV file, which is not the car data mentioned in the title. Axis labels and ticks are styled via CSS, and a title is included, though the visualization appears incomplete.

Cars Scatter Plot

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset, displayed as red semi-transparent circles on an SVG canvas. The chart maps quantitative attributes to the x- and y-axes using D3 v5’s `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` functions, with labeled tick marks and an axis label. Data is loaded via `d3.csv` and rendered with `select` and `svg` elements, styled through CSS for opacity and typography. The code sets a fixed 960×500 pixel SVG and uses only the imported D3 modules for scaling and axes.

Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, displaying relationships between vehicle attributes. Red, semi-transparent circles represent individual cars, with overlapping points revealing density patterns. The visualization uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and axis functions (`axisLeft`, `axisBottom`) to map data values to SVG coordinates. Styled axes and labels with large, muted typography enhance readability, while the `format` utility handles numeric tick labels. The chart is rendered entirely in SVG within a fixed 960×500 viewport.

Let's make a face with D3.js!

This example creates an animated smiley face using D3.js, with eyebrows that move to demonstrate fundamental DOM manipulation. The visualization builds the face from SVG elements, including eyes, a mouth, and interactive eyebrows. The code imports specific D3 modules such as `select`, `arc`, and `scaleLinear` to construct the face and manage its components. While the primary focus is the face, the code also includes a bar chart with telescope data, mapped using `scaleBand` and `axisBottom`, though this chart is not the main visual output. The face itself is rendered entirely through SVG.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data from the 2017 United Nations World Population Prospects estimate. It builds on a basic bar chart by customizing the D3 axes: the y-axis removes domain and tick lines, while the x-axis uses `axisBottom` with a custom tick formatter that converts large numbers to abbreviated billions and draws horizontal grid lines across the chart. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendered as SVG with data loaded from a CSV file.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It illustrates how to customize D3 axes with tick formatting, label styling, and scale configuration. The visualization uses d3.csv to load data, d3.scaleLinear for the y-axis, and d3.axisLeft and d3.axisBottom to render the axes. Styling is applied through CSS classes on tick text and axis labels.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates axis customization using D3 v5, including custom tick formatting, axis labels, and styled tick lines through CSS. It builds on a simpler bar chart example, applying margin conventions and scale functions like `scaleLinear` and `scaleTime`. The SVG rendering uses `d3.csv` to load data and `axisLeft` and `axisBottom` for the axes.

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, using population estimates from the United Nations World Population Prospects. The visualization demonstrates customized D3 axes, with the y-axis showing population values on a linear scale and the x-axis using a time scale for timestamps. The code imports specific D3 modules including `select`, `csv`, `scaleLinear`, `scaleTime`, `axisLeft`, and `axisBottom`. Data is loaded from a CSV file containing country and population columns, rendered as SVG rectangles with styled tick marks and axis labels.

Customizing Axes

This example visualizes the temperature in San Francisco over time using a bar chart, with a custom-styled y-axis and x-axis. The bars represent temperature values, and the axes are configured with D3 v5’s `scaleBand` and `scaleLinear`, alongside `axisLeft` and `axisBottom`. Tick text and lines are styled via CSS classes. The data is loaded from a CSV file using `d3.csv`, and the rendering is done with SVG rectangles.

Customizing Axes

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations data, with a particular focus on axis customization. The visualization demonstrates how D3’s `scaleBand` for the categorical x-axis and `scaleLinear` for the numeric y-axis are styled with custom tick text sizes, colors, and tick line strokes via CSS. It also includes labeled axes and a title, using the `axisBottom` and `axisLeft` API functions. The chart is rendered as SVG within an HTML page, and the code references external CSV data for the temperatures.

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, sourced from the auto-mpg dataset. Each red semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis. The D3 v5 code uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for labeled grid lines, and appends circles via `selectAll('circle').data().enter()`. The SVG output includes axis labels and a title, with styling controlled by external CSS.

Scatter plot

A scatter plot visualizes the population of ten countries, using horizontal bars to represent each nation's total population. The data is loaded from a CSV file and rendered as SVG rectangles whose widths are scaled proportionally to population values. Built with D3 v5, the example employs `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, while manual DOM selection and appending via `select` and `append` manage the SVG elements.

Scatter plot

A scatter plot displays population figures for ten countries using horizontal bars, with each bar’s length proportional to population. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Data from `data.csv` is loaded via `csv()`, and population values are multiplied by 1000. Axes are rendered with `axisLeft` and `axisBottom`, while rectangles are appended to the SVG group to represent the bars.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It demonstrates customizing D3 axes by removing the y-axis domain and tick lines, formatting x-axis tick labels with abbreviations (e.g., converting billions to "B"), and adding axis labels and a title. The visualization is rendered as SVG using d3.scaleBand and d3.scaleLinear, with axes created via d3.axisLeft and d3.axisBottom. Population values are loaded from a CSV file.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It highlights customized D3 axes, including a bottom axis with abbreviated tick labels (e.g., "B" for billions) and a removed left axis domain and tick lines. The visualization uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to render SVG elements. Data is loaded from a CSV file, and CSS styles define the tick, label, and title appearance.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It highlights the customization of D3 axes, with styled tick marks, labels, and axis titles. The visualization uses D3’s `scaleBand` and `scaleLinear` for positioning, along with `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file and rendered as SVG rectangles within an HTML canvas.

Customizing Axes

This bar chart displays the average values per telescope name from a small CSV dataset. The visualization demonstrates custom axis styling using D3 v5, where both the bottom and left axes are generated with `scaleBand` and `scaleLinear` respectively, and configured via `axisBottom` and `axisLeft`. Tick labels are enlarged to 2.7em, tick lines use a light gray stroke, and a custom axis label appears with a larger font size. The chart renders as an SVG with a fixed width and height, and the data is loaded asynchronously via `csv()`.

Customizing Axes

This bar chart displays the average population of the top 10 most populous countries, with data sourced from the 2018 United Nations World Population Prospects estimate. The visualization highlights customized D3 axes, including styled tick labels, grid lines, and axis labels. Built with D3 v5, it uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart. The `styles.css` file defines custom fonts, colors, and tick formatting, while the data is loaded from a local CSV file containing telescope average values.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using data from the 2017 United Nations World Population Prospects (2018 estimate). The visualization highlights customized axes, featuring larger tick labels, styled tick lines, and an axis label. The implementation uses D3 v5, with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` for the chart structure, while CSS classes style the axis elements. The chart is rendered as an SVG, and the data is loaded from a CSV file.

Scatter plot

This scatter plot visualizes population data for ten countries, using horizontal bars to represent the population of each nation. The chart reads a CSV file containing country names and population figures, which are then scaled and rendered as SVG rectangles. Built with D3 v5, the code uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis, populating the bars via `selectAll` and `append`.

May 7, 2019

Scatter Plot

This scatter plot visualizes the relationship between vehicle horsepower and weight, with each circle representing a data point from the auto-mpg dataset. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` APIs to map the data to SVG coordinates within a 960×500 canvas. Data is loaded asynchronously via `csv()` from a remote source, with numeric fields parsed before rendering. The plot includes labeled axes with tick marks spanning the full plot height and width, though the axis labels and titles are incomplete in the code.

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each circle representing a data point. The plot uses D3.js v5, employing scaleLinear for axes, axisBottom and axisLeft for tick marks, and data from the auto-mpg.csv file. The SVG rendering displays circles positioned via xScale and yScale mappings, with a labeled x-axis denoting the title "Scatter Plot" and tick lines extending across the chart.

Scatter Plot

This scatter plot uses D3 v5 to visualize the relationship between horsepower and weight in the auto-mpg dataset. The SVG rendering displays each vehicle as a circle, with its position determined by the d3.scaleLinear scales for the x- and y-axes after parsing the CSV data. The d3.axisBottom and d3.axisLeft functions generate the axes, while the margin and inner dimensions shape the plot area.

Cars Scatter Plot

This scatter plot from the Auto MPG data set (UCI Machine Learning Repository) shows the relationship between horsepower and weight for 398 cars, with each red, semi-transparent circle representing a vehicle. Built with D3 v5, the visualization uses `scaleLinear` for both axes, `extent` to compute domains, and `axisBottom`/`axisLeft` for labeled ticks. The SVG rendering applies margins, rotated axis labels, a title, and removes domain lines to emphasize the data points.

Scatter plot

Scatter plot

This scatter plot visualizes population sizes for ten countries, using horizontal bars to display each nation's total population in thousands. The D3.js code loads data from a CSV file, maps population values to a linear scale for the x-axis, and uses a band scale for country names on the y-axis. SVG rectangles are rendered with a D3 selection, while axes are generated using the `axisLeft` and `axisBottom` functions. The visualization demonstrates basic DOM manipulation and data binding through D3's `csv` import and scale methods.

Did on my own(bar graph)

This bar chart displays population estimates for ten countries, using horizontal bars sorted by country name. The visualization loads data from a CSV file and renders it as SVG rectangles. The code uses D3 v5 functions including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to vertical positions. Population numbers are multiplied by 1000 during data preprocessing to match the source values.

Making a bar graph

This example shows a horizontal bar chart of population data for nine countries, with each bar’s length proportional to the population value loaded from a CSV file. It demonstrates basic D3.js DOM manipulation by building the chart entirely with SVG elements, using `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The code appends rectangles for bars and positions them via the scales, with margins applied to the SVG canvas.

Making a bar chart

This example shows a horizontal bar chart of population data for ten countries, with bars sized proportionally to each nation’s population and labeled along the left axis. The code loads data from a CSV file, multiplies the population values by 1,000, and renders the chart as SVG using D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Bars are drawn as `rect` elements, transformed into place with a margin-based group, while the axes are appended via D3’s axis components.

Scatter plot

A scatter plot displays the population of ten countries using horizontal bars positioned along a linear scale, with country names on a band scale. The visualization loads population data from a CSV file and renders it as an SVG using D3.js v5. The code employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, transforming raw population values by multiplying them by 1,000. Bar widths correspond to population totals, while the y-axis lists each country in descending order.

Scatter plot

This scatter plot displays the population of ten countries using a bar-style layout, with each country positioned along a band scale and bar width proportional to population values loaded from a CSV file. Built with D3.js v5, the visualization uses `d3.csv` for data loading, `scaleLinear` and `scaleBand` to map population and country names to SVG coordinates, and renders axes via `axisLeft` and `axisBottom`. The SVG canvas is populated with rectangles whose widths derive from the x-scale, while the y-axis labels countries in descending order of population.

Making a bar graph

Scatter plot

This bar chart visualizes the populations of ten countries, with horizontal bars extending from a shared origin to represent each country's population value. The chart uses D3.js v5 to load CSV data, scale the population values by 1000, and render the visualization as SVG rectangles. The code utilizes `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and the `axisBottom` and `axisLeft` functions to generate the axes.

Scatter plot

The scatter plot displays the populations of ten countries as horizontal bars, sourced from a CSV file. Built with D3 v5, it uses `scaleLinear` and `scaleBand` to map numeric population values and categorical country names to SVG rectangles. The chart renders via SVG elements, with axes created using `axisLeft` and `axisBottom`, demonstrating basic data binding and DOM manipulation.

Cars Scatter plot

This scatter plot displays the populations of the ten most populous countries from the 2017 United Nations World Population Prospects. Each circle's horizontal position represents the population value (in thousands), while its vertical position corresponds to the country name. The visualization uses D3 v5 with `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the categorical y-axis, rendering circles as SVG elements with axes generated by `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file.

Let's make a face with D3.js!

This example displays a horizontal bar chart of population data for ten countries, comparing values like China, India, and the United States. The visualization uses D3.js v5 with SVG rendering. The code imports specific functions—`csv`, `scaleLinear`, `scaleBand`, and `max`—from the D3 library to parse the CSV file and map population counts to bar widths. Bars are positioned vertically using `scaleBand` on the country names and horizontally using `scaleLinear` for population values, with the data loaded asynchronously via `csv('data.csv')`.

Let's make a face with D3.js!

Let's make a face with D3.js!

This example displays a horizontal bar chart of country populations, using D3.js v5 APIs such as `select`, `csv`, `scaleLinear`, `scaleBand`, and `max`. The SVG canvas is 960 by 500 pixels, and bars are appended as `rect` elements with heights set by bandwidth and widths scaled to population values loaded from a local `data.csv` file. The chart sorts countries along the y-axis alphabetically, with populations multiplied by 1000 to reflect actual figures.

Let's make a face with D3.js!

An interactive face built from SVG shapes uses D3.js v5 to map data from `data.csv` into facial features. The `index.js` imports `select` and `arc` from D3, applying the arc generator to create curved elements like eyes and a smile. The visualization responds to the dataset’s values, positioning each facial part based on the loaded numbers. The SVG canvas, sized at 960 by 500 pixels, renders the face with a clean, minimal aesthetic, demonstrating how basic D3 primitives can transform tabular data into a recognizable, playful form.

Let's make a face with D3.js!

A playful SVG face is drawn on a 960-by-500 canvas using D3.js version 5. The code imports `select` and `arc` from D3, but the face's features are not yet defined in the provided JavaScript. The page loads `bundle.js` after the empty SVG, and includes a linked stylesheet that hides overflow. The example is a minimal starting point for building an interactive face, with data from `data.csv` present but unused in the current script.

Let's make a face with D3.js!

This example shows a smiley face drawn with SVG, whose eyebrows move to create a playful, animated expression. Built with D3.js v5, the code uses the `select` and `arc` APIs from the `d3` module to construct the face’s features and manipulate the SVG canvas. The project reads no external data, instead generating the entire visual from hardcoded coordinates and dimensions within an `index.js` script. The rendering is purely vector-based, with styling provided by a separate `styles.css` file.

Making a bar chart

A horizontal bar chart displays population estimates for ten countries from a CSV file, with bars scaled linearly by population and countries sorted alphabetically along the y-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG, loading data via `d3.csv` and converting population values to thousands. The chart includes margins, axes, and padded bars, with styling applied through an external stylesheet.

Cars Scatter Plot

Scatter Plot

This scatter plot visualizes the population of the 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It displays each country as a circle positioned along a linear population scale on the x-axis and a point scale for country names on the y-axis. The visualization uses d3.csv to load data, scaleLinear and scalePoint for scaling, and axisBottom with custom tick formatting to display populations in billions. The rendering uses SVG circles and axes with grid lines, styled with CSS.

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each point representing a vehicle. The chart uses a red, semi-transparent circle for each data point, and includes labeled axes for horsepower and weight. Built with D3 v5, the code loads the auto-mpg dataset from a CSV file, scales the data using `scaleLinear`, and renders the visualization as an SVG. The axes are configured with `axisBottom` and `axisLeft`, and the plot is styled with custom CSS for tick marks, labels, and the title.

Scatter Plot

This scatter plot displays the relationship between vehicle cylinders and weight, with each circle representing a car from the auto-mpg dataset. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for gridlines and ticks, and SVG circles for the data points. The code loads the dataset via d3.csv from a VizHub URL, converts string values to numbers, and applies margins to position the plot within the 960x500 SVG canvas. The title and axis label provide context for the chart.

Cars Scatter plot

This scatter plot displays the population of the ten most populous countries, using a logarithmic-free linear scale for the x-axis and a categorical y-axis for country names. Each circle’s position encodes the population value, with the chart titled "Top 10 most Populous Countries." The visualization is built with D3 v5, using `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the axes and `csv` to load data from a CSV file. Data originates from the 2017 United Nations World Population Prospects.

Cars Scatter plot

This scatter plot visualizes the population of the ten most populous countries, using circles positioned along a categorical y-axis and a linear x-axis scaled in billions. The data, sourced from the United Nations 2017 World Population Prospects, is loaded via `d3.csv` and rendered as SVG. The chart uses `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` with custom tick formatting to label the axes.

Customizing Axis

This bar chart displays the population of the 10 most populous countries using 2018 data from the United Nations’ World Population Prospects. The visualization customizes both axes: the x-axis uses a formatted tick label that converts values to billions, while the y-axis lists country names with generous padding. The chart is rendered as an SVG using D3’s v5 API, specifically utilizing `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`. Grid lines extend across the plot, and the data is loaded from a CSV file via D3’s `csv` function.

Customizing Axes

This example shows a horizontal bar chart of population figures for nine countries, with a customized x-axis that uses abbreviated tick labels (e.g., “1.50M”). The chart is rendered as SVG using D3 v5, with data loaded from a local CSV file. The code employs `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, `d3.axisLeft`, and `d3.format` to position bars and axes. The y-axis lists country names, while the x-axis range is set from zero to the maximum population value.

Customizing Axes

This horizontal bar chart shows the populations of nine countries, ordered by country name and scaled linearly by population. The example demonstrates how to customize axis ticks, converting the default numeric labels from billions to abbreviated values with the suffix 'B'. Built with D3 v5, the code uses `d3.scaleBand` and `d3.scaleLinear` to map data, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The `axisBottom` is formatted using `d3.format` with a custom replacement to display values in billions. The data is loaded from a CSV file and rendered in an SVG.

Customizing Axes

This visualization displays a horizontal bar chart of the top 10 most populous countries in the world, using a linear scale for population and a band scale for country names. The chart customizes the x-axis tick format to show values in billions by using D3's `format` function and replacing 'G' with 'B', while removing the y-axis domain and tick lines for a cleaner look. Data is loaded from a CSV file, with population values multiplied by 1000, and rendered as blue rectangles using D3 v5's scale functions and SVG.

Customizing Axes

This horizontal bar chart displays population figures for nine countries using an SVG rendering. The visualization customizes both axes: the y-axis removes domain and tick lines to focus on country labels, while the x-axis formats population values using `format('.3s')` and replaces the suffix "G" with "B". D3 v5 functions including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` construct the scales and axes. The chart reads population data from a CSV file, multiplying each value by 1,000 to represent actual population counts.

Making a bar chart

This example shows a horizontal bar chart of population data for ten countries, using a linear scale for population values and a band scale for country names. The bars are rendered as SVG rectangles with a blue fill, and the chart includes left and bottom axes for reference. The code loads data from a CSV file using `d3.csv`, converts the population column to numbers, and builds the visualization with `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. The SVG canvas is 960 by 500 pixels, with margins applied to position the plot area.

Customizing Axes

This example shows a horizontal bar chart of country populations, with a custom tick format that abbreviates large numbers from billions (G) to billions (B). It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and axes, with data loaded from a CSV via `d3.csv`. The axis ticks are formatted using D3’s `format` function and the bars are styled with a blue fill in SVG.

Making a line chart

This example displays a scatterplot of automotive data, plotting horsepower on the x-axis and weight on the y-axis, with each car represented by a circle. It uses D3 v5’s `scaleLinear` for both axes and `max` from `d3` to compute the domain extents. The visualization is rendered as SVG, with circles appended to the svg element and positioned via `cx` and `cy` attributes. The data is loaded from a CSV file via `csv`, with numeric fields converted before rendering.

Scatter Plot

This scatter plot displays the population of ten countries, with each point representing a nation and its magnitude tied to the recorded figure. The visualization renders using SVG elements within a D3 v5 framework, loading data from a CSV file via `d3.csv`. The code applies `scaleLinear` and `max` from the D3 module to map values, though the chart itself remains static without visible axes or interactive features. Population values are parsed and multiplied by 1000 in the data-loading promise.

Scatter Plot

This scatter plot displays population data for the ten most populous countries, with each circle representing a country’s total population. The visualization uses D3 v5’s `csv` method to load the data, which is transformed by multiplying each population value by 1000. The chart is rendered as an SVG element, with a fixed width of 960 pixels and height of 500 pixels. The code includes imports for `select`, `csv`, `scaleLinear`, and `max`, though the actual scaling and circle rendering are not shown in the provided files.

Making a bar graph

This example builds a horizontal bar chart that displays population figures for ten countries, including China, India, and the United States. The visualization uses D3.js version 5 to select the SVG element and bind data from a CSV file, rendering each bar’s height and label through the library’s selection and scaling methods. The chart is drawn entirely as SVG, with a clean layout and no additional styling beyond the minimal CSS reset.

Scatter plot

This scatter plot visualizes population data for ten countries, using horizontal bars whose lengths correspond to each nation's population count. The chart reads population values from a CSV file and scales them by a factor of one thousand. Built with D3.js v5, the visualization employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, appending SVG rectangles to represent the data points. The example demonstrates fundamental SVG rendering and data-binding techniques within the D3 framework, with styling controlled by an external CSS file.

Scatter plot

Scatter plot

This scatter plot visualizes population data for ten countries from a CSV file, mapping each country to a point on an SVG canvas. The visualization demonstrates fundamental D3.js DOM manipulation, using `d3.csv` to load and parse the data, then converting population values to numbers for scaling. While the chart structure is set up, the interaction and refinement focus on a smiling face with moving eyebrows, showcasing D3’s ability to select elements and manipulate SVG attributes dynamically. The implementation relies on D3 v5’s core modules, `select` and `csv`, with all rendering handled through the SVG framework.

Scatter plot

This scatter plot displays population data for ten countries using D3.js v5. The visualization renders as an SVG scatter plot, with each country represented as a point. The code uses d3.csv to load the dataset from a local CSV file and d3.select to manipulate the SVG container. While the current implementation parses the data, it does not yet map the population values to visual x and y coordinates for the circles, leaving the scatter plot incomplete. The page layout is minimal with body overflow hidden and the SVG dimensions fixed at 960 by 500 pixels.

Scatter plot

This scatter plot example demonstrates fundamental D3.js DOM manipulation by rendering automotive data from the auto-mpg.csv dataset. The code uses d3.select and d3.csv to load and parse the data, then appends circles to the SVG using d3’s enter/append pattern. Each circle is positioned with hardcoded cx and cy values, so the visualization currently shows all points clustered at a single location rather than mapping mpg or other variables to axes. The implementation serves primarily as a basic introduction to data binding and SVG element creation.

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by creating an SVG smiley face whose eyebrows animate. The visualization is built using D3.js v5 and rendered as SVG, with the code drawing shapes and applying transforms through D3’s selection and attribute methods. The implementation uses the `select` and `attr` functions from the D3 library to target the SVG element and set its dimensions, while a CSV dataset from an external URL is loaded via `csv` but not visibly used in the face itself. The animation focuses on moving the eyebrows, showcasing basic programmatic control over SVG elements.

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows appears inside a black-bordered circle. The code demonstrates fundamental DOM manipulation in D3.js v5 by selecting the SVG element, appending a group, and using `arc()` to generate a mouth path. The two rectangular eyebrows animate independently using chained `transition().duration(2000)` calls, moving them up and down in a looping sequence.

Customizing Axes

A horizontal bar chart displays population estimates for the nine most populous countries, using DataMapper’s custom axes to improve readability. The y-axis labels are cleanly displayed without axis lines, while the x-axis uses a tick formatter that abbreviates large numbers, converting billions to “B” (e.g., 1.42B for China). Built with D3 v5, the chart loads data from a CSV and uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` with a custom `tickFormat`. SVG rectangles are styled blue and scaled by population.

May 3, 2019

Customizing Axes

A horizontal bar chart displays population counts for ten countries, with countries listed along the y-axis and population values along the x-axis. The visualization uses D3 v5's `scaleLinear` for the population axis and `scaleBand` for the categorical country axis, with axes rendered via `axisLeft` and `axisBottom`. Data is loaded from a CSV file using `csv`, with population values multiplied by 1000 before rendering. The chart is drawn as blue SVG rectangles, positioned using the band scale's bandwidth and the linear scale's width mapping.

May 3, 2019