Fork of D3 circle barchart

100%

Fork of D3 circle barchart

✓ Published0🌍 Public

Last edited Feb 4, 2024

Created on Feb 4, 2024

Forked from D3 circle barchart with nested data() and join()

A circular barcode chart displays Nobel Prize winners from 1901 to 1905, grouped by year on the x-axis and ranked by category on the y-axis. Each winner appears as a colored circle, with colors mapping to five prize categories via the D3 `schemeCategory10` scale. The SVG visualization uses `d3.group` to nest winners by year and `d3.scaleBand` for positioning, with an interactive axis and legend built through D3’s data join methods. The code relies on D3 v7 and renders the dataset embedded in the script.

AI-generated description

D3 circle barchart

Visit https://github.com/ax-va/Interactive-Data-Visualization-Dale-2023

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 circle barchart with nested data() and join()

This example shows Nobel Prize laureates from 1901 to 1905 arranged as circles in a grid, with each year as a column and categories color-coded via a legend. The visualization uses D3 v7’s nested `data()` and `join()` methods to bind grouped data to SVG circle elements, with `d3.group` organizing entries by year. Animated transitions highlight updates when data changes. The chart includes rotated x-axis tick labels and a legend built with joined category groups, rendering entirely in SVG.

AAxVa 🐍 💪

85% match

Loading thumbnail…

assignment

This bar chart visualizes the number of Nobel Prizes awarded per category, using data parsed from a CSV file containing laureate information. The D3.js v7 code loads the data, counts prizes by category, and renders the results using `scaleBand` and `scaleLinear` for axes. Bars are colored steelblue and sorted in descending order by prize count. The SVG visualization includes rotated category labels on the x-axis, a title, and axis labels, with the underlying data rows also including year, prize share, and laureate details.

HHarshithaAru06

79% match

Loading thumbnail…

Fork of Project 1 - Phase 3 - Nobel Prize Winners - Line Chart

This example shows the number of Nobel Prizes awarded per decade, split into separate lines for each prize category. Using D3 v7 with SVG rendering, it loads data from a CSV file, aggregates the entries by decade and category, and draws a multi-series line chart with color-coded labels. The visualization uses `d3.rollups` for grouping, `d3.scaleLinear` for axes, and `d3.line` to generate the paths. The chart reads from a Vue-based project that fetches the CSV and clears the container before rendering.

VVinayak Revankar

79% match

Loading thumbnail…

Fork of D3 Starter

This example shows a bar chart ranking Nobel Prize counts by country, using a static dataset of ten nations with the United States leading at 336 prizes. The visualization is rendered as SVG via D3 v7, with `d3.scaleBand` positioning bars along the x-axis and `d3.scaleLinear` mapping values to heights on the y-axis. Axis generation relies on `d3.axisBottom` and `d3.axisLeft`. The code demonstrates a data join with `.join()` to create rectangles, and includes a filter for zero values, though no interactive behavior beyond the initial rendering is implemented.

ZZoe Ferencova

79% match

Loading thumbnail…

Interactive - Project 1 - Nobel Prize Winners - Bar Chart

A bar chart displays the number of Nobel Prizes awarded per category, ranking categories from most to least frequent. The visualization loads data from a CSV file, parses it with d3.csvParse, and renders an SVG bar chart using d3.scaleBand, d3.scaleLinear, d3.axisBottom, and d3.axisLeft. Bars are styled steelblue with a hover effect that changes fill to orange. The chart includes rotated x-axis labels, axis titles, and a bold title, all built with D3 v7 and Vue.

VVinayak Revankar

78% match

Loading thumbnail…

Project 1 - Phase 2 - Nobel Prize Winners - Bar Chart

This interactive visualization presents Nobel Prize winners by category and birth country. A bar chart displays the total number of prizes per category, while a world map uses colored countries and proportional circles to show laureate distribution geographically. The code uses D3 v7 APIs including `scaleBand`, `scaleLinear`, `geoNaturalEarth1`, `geoPath`, and `scaleSqrt`. Data is loaded from a CSV file, with geographic boundaries from the world-atlas TopoJSON dataset. Both views are rendered as SVG, with a toggle between bar chart and map views.

VVinayak Revankar

77% match

Loading thumbnail…

CSCS - Nobel Prize Winners - Bar Chart

This bar chart shows the total number of Nobel Prizes awarded in each category—Chemistry, Literature, Medicine, Peace, Physics, and Economics—based on historical laureate data from a CSV file. The visualization loads the dataset using `d3.csvParse` and renders the counts through an SVG bar chart built with D3 v7. Category counts are sorted descending and drawn as steelblue rectangles using `scaleBand` and `scaleLinear`, with axes generated by `axisBottom` and `axisLeft`. Hovering over a bar changes its fill to orange, and bars are labeled with rotated category names.

VVinayak Revankar

76% match

Loading thumbnail…

Project 1 - Nobel Prize Winners - Bar Chart

This example displays the number of Nobel Prizes awarded in each category as a bar chart, with bars ordered from most to least frequent. It loads data from a CSV file via `fetch` and parses it using `d3.csvParse`, then renders the chart with `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`. The bars are drawn as SVG rectangles with a hover effect, and the chart includes labeled axes and a title.

VVinayak Revankar

75% match