Fork off

100%

✓ Published0🌍 Public

Last edited Jan 9, 2024

Created on Jan 9, 2024

A parliament chart displays the distribution of seats in the UK House of Commons, with each party represented by a colored arc of semicircular dots. The visualization uses the d3-parliament library, which builds on D3.js, to render the seating layout as an SVG. Clicking any seat triggers an alert identifying the party. Data is provided as an array of party objects containing seat counts and colors, with animation entering seats from the center in order of increasing size.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Cars Scatter Plotgbh

This chart displays the results of a parliamentary election using a semicircular seating plan, with each seat colored by party affiliation. The data, representing the 2019 UK general election, is rendered as an SVG using the D3.js library via the `d3.parliament()` API. The code animates the entering seats from the center and supports click interactions on individual seats, with the car dataset sourced from the UCI Machine Learning Repository.

NNigel

82% match

Loading thumbnail…

Fork of Fork of Fork of Digital mockup of a line chart

This pseudo-visualization presents a stylized mockup of age distribution across major political parties, using horizontal bars to compare two groups. The chart encodes party affiliation through color, with red and blue rectangles representing different segments. Built with React and rendered as SVG, the visualization uses static positioned `<rect>` elements sized to suggest proportional differences between categories. The design incorporates the Share Tech font family from Google Fonts, creating a digital aesthetic that mimics a line chart while maintaining a fixed, non-interactive layout.

Ddsims2157

70% match

Loading thumbnail…

Fork

This visualization presents a fork-like branching structure rendered as an interactive chart within a web page. The display uses Plotly.js to generate the graphical output, with the chart embedded in an HTML iframe for presentation. The visualization relies on SVG and canvas rendering techniques to create the fork-shaped pattern, with animation capabilities enhancing the visual experience. Built using the React framework, the chart demonstrates how Plotly handles complex geometric shapes and provides interactive data visualization through its comprehensive JavaScript library. The rendering approach combines vector graphics with dynamic elements to illustrate the branching structure.

TThomasDonahue01

69% match

Loading thumbnail…

Fork of 3D bar chart

This example visualizes the number of women in the House of Representatives over time, grouped by political party. It renders a 3D multi-series bar chart where each year displays separate bars for Democratic and Republican counts. The chart uses the d3-x3d library alongside D3 v5's `csv`, `select`, and data-binding methods, with the X3DOM library handling the 3D scene. Data is loaded from a CSV file hosted on GitHub, and the visualization updates the chart after parsing the data into the required multi-series format.

RRinoj-Gautam

69% match

Loading thumbnail…

Fork of Fork of US House of Representatives reapportionment

This visualization maps reapportionment of U.S. House seats after the 2020 census, using a geographic projection with state polygons and circular seat icons. Each state’s seats appear as rings whose radii reflect population per seat in 2010 and 2020, with colors indicating maintained, added, or removed seats. It uses `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.scaleSqrt` on an SVG canvas, pulling polygon, centroid, and apportionment data from Census sources via GitHub gists.

JJulie Lesseg

69% match

Loading thumbnail…

graph2

A donut chart displays the partisan composition of the U.S. Senate across five congressional sessions, from the 112th through the 116th Congress. Users select a specific congress from a dropdown menu, which triggers animated transitions between the donut’s arc segments and updates the numeric labels positioned along thin connector lines. Built with D3 v5, the visualization uses `d3.pie`, `d3.arc`, and `transition.attrTween` to interpolate geometry smoothly, while `d3.scaleOrdinal` assigns colors to Republicans, Democrats, and Others. The underlying data is embedded as an array of objects containing seat counts per party for each session.

JJoseph D. Galloway II

68% match

Loading thumbnail…

Fork - Colors pie view with D3 and React

A circular pie chart displays color swatches in a color wheel, with each slice filled by a color from a CSV dataset loaded from a GitHub gist. This D3.js and React example uses `d3.arc` to generate the pie slice paths and `d3.pie` to compute angular values, though the code manually calculates start and end angles. The chart is rendered as an SVG, centered within a fixed 960 by 400 viewport. Individual color values from the CSV's "HEX" column directly determine the fill of each path, creating a rainbow-like ring of distinct hues.

DDeepak Tomson

67% match

Loading thumbnail…

fork

This example shows a radial burst visualization of CSS named colors, with each color represented as a slice of a pie chart. The visualization loads TV show data as a CSV file using D3’s `csv` utility, then processes it with React’s `useState` and `useEffect` hooks. React renders the SVG elements, while D3’s `pie` and `arc` functions compute the angles and paths for each wedge, filled with the color value from the data. The chart is centered on a 700×500 SVG canvas with no interactive features.

Aaashrithd4

66% match