Skip to main content
Log in
C

CBoton

@CBoton·15 public vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes demographic and economic data for California counties, with dropdown menus allowing the user to select which columns map to the X and Y axes. The visualization uses D3 v5’s `scaleLinear`, `scalePoint`, and `axisBottom`/`axisLeft` to render the plot, and employs `transition().duration(2000).delay()` to animate circles as the selection changes. The X axis supports numeric fields like Income and Poverty, while the Y axis displays categorical county names. Data comes from the UCI Machine Learning Repository’s Auto MPG dataset.

Apr 11, 2020
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot visualizes demographic and economic data for California counties, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. Users select a numeric column from a dropdown menu to update the x-axis, while counties are ordered along the y-axis using `d3.scalePoint`. The visualization uses D3 v5, rendering circles as SVG elements with a staggered 2-second transition, employing `scaleLinear`, `axisBottom`, and `axisLeft`. The code also uses `transition().duration(2000).delay()` to animate circle positions smoothly.

Apr 11, 2020
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot visualizes demographic and economic data for California counties, sourced from the UCI Machine Learning Repository's Auto MPG dataset. Users select a metric from a dropdown menu—such as Income, Poverty, or Employment—which reshuffles the x-axis position of each county dot. The plot uses d3.scaleLinear for the numeric x-axis and d3.scalePoint for categorical county labels, with circles rendered as SVG elements. A smooth transition.attrTween animation moves dots from the center to their new positions over two seconds. The code leverages d3.csv for data loading and d3.axisBottom/d3.axisLeft for labeled axes.

Apr 11, 2020
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot visualizes data from the UCI Machine Learning Repository’s Auto MPG dataset, displaying car attributes against California counties. A dropdown menu lets users select which numeric column to plot on the x-axis, while counties appear on the y-axis using a point scale. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisLeft and d3.axisBottom for axes. Rendered as SVG, circles transition from the center to their positions over two seconds using transition.attr and delay, with a custom dropdownMenu component handling user selection.

Apr 11, 2020
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot visualizes demographic data for California counties, sourced from the UCI Auto MPG dataset. A dropdown menu lets users select which attribute to plot on the x-axis, with counties listed on the y-axis. The D3 v5 code uses `scaleLinear`, `scalePoint`, and `axisBottom` to build the chart, while `transition().duration(2000).delay(i * 10)` animates circles from the center to their positions. Each circle is semi-transparent red, and axes use custom tick formatting.

Apr 11, 2020
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot displays California county data from the UCI Auto MPG dataset, plotting a selected numeric column against county names on a point scale. A dropdown menu lets users choose which variable appears on the x-axis, while circles animate into position over two seconds using staggered delays. The visualization uses d3.csv for loading, d3.scaleLinear and d3.scalePoint for scales, and d3.axisBottom/d3.axisLeft for axes, with SVG rendering and CSS-styled circles.

Apr 11, 2020
Loading thumbnail…

Cars Scatter Plot

A scatter plot displays demographic data for California counties from a CSV file, with a dropdown menu to select which numeric column drives the x-axis while counties appear on the y-axis. Each circle represents a county, animated with a staggered 2-second transition. The visualization uses D3 v5 with `scaleLinear`, `scalePoint`, `axisBottom`, `axisLeft`, and `transition().delay()` to move circles from the center to their final positions. Data comes from the UCI Machine Learning Repository’s Auto MPG dataset, though the plot itself shows county-level population and socioeconomic variables loaded via `d3.csv`.

Apr 11, 2020
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot displays demographic and economic data for California counties, sourced from the UCI Machine Learning Repository's Auto MPG dataset. Users select a variable from a dropdown menu to control the x-axis, with counties positioned along the y-axis using a point scale. The visualization, built with D3 v5, renders animated SVG circles that transition to their positions over two seconds using `transition.attrTween`-like delays. Axes are generated with `axisBottom` and `axisLeft`, while `scaleLinear` maps numeric values and labels are formatted using `format`.

Apr 11, 2020
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot displays demographic and economic data for California counties from the UCI Machine Learning Repository’s Auto MPG dataset, with a dropdown menu letting users switch the x-axis variable. Built with D3 v5, it uses `scaleLinear`, `scalePoint`, and `axisBottom` for axes, and animates circles via `transition().duration()` and `delay()` when the selection changes. The SVG rendering includes a title and axis labels, with data loaded asynchronously using `csv()`.

Apr 11, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays population data for California counties, sourced from the UCI Machine Learning Repository’s Auto MPG dataset, with counties arranged along the y-axis and total population on a linear scale. The visualization uses D3 v5 to render SVG circles, with `d3.scalePoint` for the categorical county axis and `d3.scaleLinear` for population. The code includes a dropdown menu component built with a reusable `dropdownMenu` function, and the chart shows x-axis gridlines with a custom tick format abbreviating large numbers.

Apr 11, 2020
Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes a dataset of California census data, allowing users to choose which columns map to the X and Y axes via dropdown menus. Built with D3 v5, it uses `scaleLinear` and `scalePoint` for axes, with circles animated into place using `transition()` and `delay()`. The SVG rendering includes axis labels and grid ticks, with data loaded from a CSV file using `d3.csv`.

Apr 11, 2020
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the populations of the top 10 most populous countries, using data from the United Nations’ 2017 World Population Prospects. It shows the core grammar of D3 axes: a linear scale maps population values to bar widths, while a band scale positions the categorical country labels. The axes are heavily customized via `d3.axisLeft` and `d3.axisBottom`, including formatted tick labels, removal of domain lines, and custom tick marks that span the plot area.

Apr 10, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between median household income (in thousands) and total population across U.S. counties, using data from the 2017 American Community Survey. It displays red, semi-transparent circles positioned by d3.scaleLinear functions for the x and y axes, with gridlines rendered via axisBottom and axisLeft. The visualization also includes labeled axes for percentage of Black residents and population, plus a title, all rendered as SVG elements with d3.select and d3.csv loading the remote dataset.

Apr 10, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, using data from the UCI Machine Learning Repository’s Auto MPG dataset. The chart displays each car as a red, semi-transparent circle, with horsepower on the x-axis and weight on the y-axis, and includes labeled axes and a title. The visualization is built with D3 v5, using `scaleLinear` for both axes and `axisBottom` and `axisLeft` for tick marks. Data is loaded via `csv` from a remote ACS county dataset, though the code references car-related fields. The SVG rendering uses a margin-based layout with custom axis labels and a circle radius of 10 pixels.

Apr 10, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, using data from the UCI Machine Learning Repository’s Auto MPG dataset. Rendered as red, semi-transparent circles on an SVG canvas, it employs d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.csv to load the data. Titles and axis labels are added as SVG text elements.

Apr 10, 2020