Fork of Scatter Plot with Shape Francesca

100%

Fork of Scatter Plot with Shape Francesca

✓ Published0🌍 Public

Last edited Mar 9, 2023

Created on Mar 9, 2023

A D3.js scatter plot visualizes the projected growth of Folk Religions across global regions from 2010 to 2050, using a time-scaled x-axis for years and a linear y-axis for population in millions. Each region is represented by a distinct fill shape, with a custom shape legend identifying the six geographic areas. The visualization loads data from a CSV file, parses dates with `timeParse`, and builds axes, scales, and marks using `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `symbolsFill`. The chart leverages the `selection.join` API to efficiently render paths and SVG elements.

AI-generated description

A scatter plot of the Iris Dataset with a color legend.

Similar vizzes

Loading thumbnail…

Project Progress Francesca

This scatter plot shows the projected growth of Folk Religions across global regions from 2010 to 2050, with each circle representing a region-year observation. The visualization uses d3.scaleTime and d3.scaleLinear to map the date and population values, while a color legend using d3.scaleOrdinal with schemeCategory10 distinguishes the six regions. Data is loaded from a CSV file using d3.csvParse, with dates parsed via d3.timeParse. The chart employs d3.axisBottom and d3.axisLeft for axes, and custom reusable functions for the scatter plot and legend.

Ffsajedi22

87% match

Loading thumbnail…

Religion Project Francesca

This scatter plot visualizes the religious demographics of various countries in 2010, using the d3 library. It plots the year against the number of Christians in each country, with a color legend distinguishing species, a holdover from the Iris dataset example. The visualization uses d3's `scaleLinear` and `scaleOrdinal` for axis and color scales, and renders data points as circles. The data is loaded from a CSV file and parsed with `csvParse`, with numerical fields converted using the unary plus operator.

Ffsajedi22

80% match

Loading thumbnail…

Francesca Project Progress

This visualization displays projected religious population changes across global regions from 2010 to 2050 using a grouped stacked bar chart. Each bar represents a region, with colored segments corresponding to eight religious categories, allowing comparison of both total population and religious composition over time. The chart uses D3 v7’s `stack` function to generate the stacked series, with `d3.scaleBand` and `d3.scaleLinear` for positioning, and `schemeCategory10` for color encoding. Data comes from the provided CSV file containing regional religious population estimates in millions.

Ffsajedi22

78% match

Loading thumbnail…

Fork of Cars Scatter Plot

This example presents a time-series area chart depicting world population growth by year, with the area filled in maroon beneath a smooth curve. The x-axis shows time as a date scale, while the y-axis displays population values. Using D3 v5, the code loads CSV data from a VizHub dataset, converts years to JavaScript Date objects, and scales populations to thousands. The visualization employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and an `area` generator with `curveBasis` to render the SVG path, complete with custom axis labels and a title.

PPierre

75% match

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes data points positioned along linear x and y scales, with categorical shapes encoding a third dimension. The chart includes labeled axes and a custom shape legend displaying the category symbols. It uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol()` to generate the mark paths, while modular ES6 imports handle axes and legend rendering. The visualization is built in VizHub, leveraging local modules and UNPKG for D3 loading.

Mmn0658

75% match

Loading thumbnail…

Fork of Scatterplot

This fork of a scatterplot displays the population of four countries, with circles sized uniformly and positioned along a point scale for country names and a linear scale for population values. The code uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for scales, and d3.axisBottom and d3.axisLeft for axes with tick formatting. Rendering occurs via SVG, with grid lines and labels styled through CSS. The chart title and axis labels are appended directly within the SVG group.

PPiotr Paszek

74% match

Loading thumbnail…

Fork of Cars Scatter Plot

This visualization displays global population trends over time using an area chart, with a title reading “World Population” and axes labeled “Year” and “Population.” The SVG rendering employs D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with a `curveBasis` smoothing. Data comes from a CSV of world population figures, which is parsed with `csv` and formatted in billions using `format('.2s')`. The chart features styled tick labels, grid lines, and a red-filled area path, with margins and layout handled through custom SVG transforms.

DDurga Prasad

74% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes world population growth from 1960 to 2015, using a filled area chart beneath a red dot for each year. The visualization employs d3.scaleTime and d3.scaleLinear for axes, d3.area with curveBasis for the smooth region, and d3.axisBottom/axisLeft with tick formatting. Data loads from a CSV file via d3.csv. The SVG rendering includes labeled axes and a title, with population values formatted in billions.

Ggregosaure

74% match