scatter chart.js

100%

scatter chart.js

✓ Published0🌍 Public

Last edited Sep 29, 2020

Created on Sep 29, 2020

This scatter chart displays the popular vote counts for political parties and alliances in a Singapore election, with each party represented as a circle along a categorical y-axis. The x-axis uses a linear scale to show vote totals, while the y-axis uses d3.scalePoint to space parties evenly. The visualization is built with D3 v6, loading data from a CSV file and rendering SVG elements using d3.axisLeft and d3.axisBottom for the axes, with circles styled in steelblue via CSS.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar chart.js

This example visualizes the popular vote counts for political parties and alliances in Singapore's 2020 general election using a horizontal bar chart. Each bar represents a party's total votes, with hover interactions turning bars red and tooltips displaying the exact vote count. The chart is rendered as SVG using D3 v6, with data loaded from a CSV file. The code leverages `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to map votes to bar widths and party names to the y-axis, while removing default axis lines and ticks for a cleaner appearance.

SSeanisgod1994

86% match

Loading thumbnail…

Making bar charts

This example shows the results of Singapore’s 2020 parliamentary election as a bar chart, with each party’s popular vote displayed as a horizontal bar. The chart is built using D3.js v5, reading tabular data from a CSV file via `d3.csv` and mapping the values to bar lengths. The bars are rendered as SVG rectangles, with text labels for each party name and vote count. The data originates from the file `data.csv`, containing party names and their corresponding popular vote totals.

SSeanisgod1994

77% match

Loading thumbnail…

Untitled

This interactive visualization presents the results of Singapore’s 2020 general election, showing popular vote shares by party in a pie chart alongside constituency-level maps and tables. Users can switch between tabs for overall results, single-member constituencies (SMCs), group representation constituencies (GRCs), and party breakdowns. The code uses d3.pie and d3.arc to generate the animated pie chart, while d3.geoPath renders the geographic maps from TopoJSON data. Tooltips, implemented via d3-tip, display additional details on hover, and the CSV data is loaded and bound to the visual elements.

SSeanisgod1994

76% match

Loading thumbnail…

D3.js Sortable & Responsive Table

This interactive table displays Singapore parliamentary election data from a CSV file, showing parties and alliances alongside their SMC and GRC seat counts. Clicking any column header sorts the table rows in ascending or descending order, with ascending and descending sort indicators indicated by arrow glyphs. The example uses d3.csv to load the data and D3’s selection, data binding, and sorting methods to build and reorder the table. CSS media queries and data-th attributes make the table responsive, transforming it from a standard grid into stacked rows on small screens.

SSeanisgod1994

73% match

Loading thumbnail…

US Election Data Scatterplot

This scatterplot displays US House election results from 2008 to 2020, plotting each candidate’s vote count against the total votes cast in their district. The x-axis shows total votes, while the y-axis shows candidate votes, with overlapping semi-transparent circles revealing density patterns. The visualization uses d3.v6 to load CSV data from a GitHub gist, parses rows with numeric fields, and renders points via SVG circles scaled with d3.scaleLinear. Axes are generated using d3.axisLeft and d3.axisBottom, with the chart sized to the full window.

PPeter VanNostrand

71% match

Loading thumbnail…

scatter

The chart displays the populations of the top ten countries as circles positioned along a horizontal population scale and vertical country axis. Using D3.js v5 with an SVG canvas, the code loads population data from a CSV file and maps it through linear and point scales. The axis ticks are formatted with custom abbreviations, and grid lines are drawn via tick extensions, with circles filled in steelblue.

YYanxxx447

69% match

Loading thumbnail…

2016 US Vote Totals

A scatterplot displays total votes per U.S. state in the 2016 election, with each state represented by a circle positioned by its vote count on the y-axis and state name on the x-axis. The visualization uses React to render SVG elements, with D3 v6 scales and axes handling the layout. Data comes from a CSV file of county-level election results aggregated by state. The chart employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and a `d3.scaleOrdinal` color scale, though the fill is currently disabled.

AAndre J Denais

69% match

Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang

69% match