100%

A special scatterplot with d3

✓ Published1🌍 Public

Last edited Jan 27, 2020

Created on Jan 17, 2020

This scatterplot visualizes survey responses on police contact, split into two groups based on whether respondents initiated contact or were approached by police. Each country appears as a distinct color, with circles positioned along the x-axis by rapportcijfer (1–10) and separated vertically per country. Circle size encodes the percentage of respondents giving each rating. The visualization uses d3.json to load data, d3.nest for aggregation, d3.scaleLinear for axes, and d3.scaleOrdinal with d3.schemeDark2 for colors, rendering circles as SVG elements.

AI-generated description

A special scatterplot with d3

This scatterplot has two groups of circles divided on the y-axis depending on a variable in the data

Within each group each country is represented by a color and separated from other countries on the y axis

This way you can see the distribution within each country

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A grouped bar chart compares survey responses about police politeness across six education levels in the Netherlands. Each group represents a response option, from "Helemaal mee oneens" to "Helemaal mee-eens," with bars colored by education level. The chart uses D3.js v5 with React, rendering as animated SVG. It employs `d3.scaleBand` for group and bar positioning, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for categorical colors, with data loaded from a CSV file. Clicking legend items filters the displayed bars.

Jjenniferslagt

75% match

Loading thumbnail…

Untitled

A grouped bar chart shows the correlation between education level and the perceived politeness of police contact, based on survey data from respondents. The chart displays the share of respondents (as a percentage) per education level for each of five Likert-scale responses, from “Helemaal mee oneens” to “Helemaal mee eens.” The code uses D3 v5 with SVG rendering, reading a CSV file, and applies scales such as `d3.scaleBand` and `d3.scaleLinear` for layout. A legend allows clicking on a category to filter the bars via a custom update function.

Mmab3105

74% match

Loading thumbnail…

D3 Stuff:Cars Scatterplot

This scatterplot visualizes country-level data, plotting each nation as a circle based on its coverage value against another measured metric. The D3.js v5 code loads data from a CSV file, uses linear scales to map values to x and y coordinates, and renders the circles within an SVG container. The visualization includes axes, axis labels, and a legend, with styling applied through CSS to control circle opacity and appearance.

Ddanjaruss

74% match

Loading thumbnail…

Untitled

This interactive grouped bar chart visualizes the correlation between respondents' education level and their experiences with police contact, using data from a survey with responses ranging from "Helemaal mee oneens" to "Helemaal mee-eens". The chart displays education levels on the x-axis and the percentage of respondents on the y-axis for each response category, with a legend that allows users to click on education levels to filter which bars are displayed. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the grouped and inner bar positioning, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` to assign colors to each education category, rendered as SVG with a black background.

Jjenniferslagt

73% match

Loading thumbnail…

D3 Stuff:Scatterplot

This scatterplot displays the percentage of population covered by health services across various countries, with each blue circle positioned along a linear coverage scale on the x-axis and a point scale of country names on the y-axis. The visualization uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` to render an SVG, pulling data from a local CSV file. Grid lines extend from the y-axis, and the chart includes a bottom axis with formatted numeric ticks.

Ddanjaruss

72% match

Loading thumbnail…

Untitled

This grouped bar chart compares survey responses about police politeness across six education levels, from “no education” to university. Each education level is broken into five agreement categories, ranging from “completely disagree” to “completely agree.” The chart uses d3.scaleBand for the grouped bars and d3.scaleOrdinal for color encoding, rendering in SVG within a React framework. Data comes from a CSV file, with percentages displayed on the y-axis.

Jjenniferslagt

72% match

Loading thumbnail…

scatter plot

A scatter plot displays population figures for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering SVG circles with a steelblue fill. Data comes from a CSV file, with populations multiplied by 1000 and formatted using `format('.3s')` to show billions. Gridlines extend across the plot, and axis labels are added via appended SVG text elements.

Llinkshady

72% match

Loading thumbnail…

Scatter Plot

This scatter plot displays the number of occurrences for each nation, with country names on the y-axis and values on the x-axis. The visualization uses D3 v6 with SVG rendering, importing `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` from D3. Data is loaded from a local CSV file, with values multiplied by 1000. Rectangles represent each country, scaled proportionally to their numeric values, with formatted tick labels using `format('~s')` to abbreviate large numbers.

Mmarcob896

71% match