Forkcriv

100%

✓ Published0🌍 Public

Last edited Apr 26, 2024

Created on Apr 26, 2024

Forked from Fork of Fork of Simple World Map

This example shows interactive bar charts and a pie chart rendered as SVG, where the bar widths animate over one second to reflect the highest score in each dataset. It integrates D3.js with AngularJS, using an Angular directive (`d3Bars`) to create the bars and a second directive (`d3Pie`) to generate the pie chart with `d3.svg.arc` and `d3.layout.pie`. A custom `d3Service` loads D3 asynchronously, and chart updates occur via `scope.$watch` on the data array. Bar text labels display each item’s name and score.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Interactive pie and bar

This interactive dashboard combines a pie chart and bar chart to compare the top 5 countries across teaching, research, and citations. Hovering over a bar updates the pie chart and legend to display the corresponding data breakdown. Built with React and D3 v3, it uses SVG rendering with animations via `transition().duration(500)` to smoothly update bar heights and colors. The data is processed from a JavaScript object containing frequency values for each category.

JJerlineJJ

77% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example presents a health data visualization comprising three charts: a bar chart of Var1, a line chart showing Var2 over time, and a pie chart of Var3. It loads CSV data from a GitHub gist and uses D3.js v7 to render SVG elements. The bar chart maps data points to horizontal bars, the line chart uses scales and a line generator to plot the time series, and the pie chart uses `d3.rollups` to aggregate categories. The code includes axes and margin conventions for the line chart.

Aakhilakura@my.unt.edu

77% match

Loading thumbnail…

D3

This example demonstrates an animated pie and bar chart using the D3.js v3 library. The pie chart visualizes an array of six numeric values with arc segments, while the bar chart displays a separate dataset with an elastic growth animation. The charts are rendered as SVG elements, with the bar chart featuring interactive hover effects that change bar colors and display tooltips. The code utilizes D3 APIs including `d3.layout.pie`, `d3.svg.arc`, `d3.scale.ordinal`, and `d3.scale.linear` for data binding, scaling, and animation transitions.

Mmrharis1

77% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple bar chart rendered as SVG rectangles, with bar widths and colors mapped linearly to the values in a three-element data array. It uses D3 v3’s selection and data binding to append the rectangles, then applies `d3.scale.linear` for both width and color scales (mapping 0–80 to pixel widths and red-to-blue fills). Animated via `transition()` on the width attribute. The rendering relies on D3’s SVG manipulation with no external data source beyond the hardcoded JavaScript array.

Bbrunotrindademachado

76% match

Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a simple bar chart visualizing a small dataset of five numeric values, rendered as sky-blue rectangles with white value labels. It uses D3.js (version 7.8.5) to create an SVG container, bind data to rectangles via `selectAll().data().enter().append()`, and set each bar’s height and position based on its value. The code also leverages method chaining with `.attr()` to configure dimensions, colors, and text properties, with all rendering occurring client-side in the browser.

PPriyank Singh

76% match

Loading thumbnail…

Fork of Fork of Blank Canvas

This example demonstrates a fork of a fork of a blank canvas, presenting two distinct bar chart visualizations. The first chart renders a simple dataset with values 4, 8, 15, 16, 23, and 42 using D3 v7's `scaleLinear` and `select`/`selectAll`/`append` APIs to draw rectangles and text labels on an SVG canvas. The second chart uses the Chart.js library to display categorical vote counts in a bar format with semi-transparent background colors and border styling. Both charts are drawn to an HTML canvas element, with the page's styles defining a fixed, full-viewport layout.

Aagopu@nd.edu

76% match

Loading thumbnail…

Fork of Interactive pie and bar

This example presents an interactive dashboard comparing top countries across teaching, research, and citations, with a pie chart linked to a bar chart. Hovering over a bar filters the pie and legend to show that country’s breakdown, while the bar chart updates based on pie interactions. The visualization uses D3 v3 with SVG and transitions, building ordinal and linear scales, and binding events like mouseover and mouseout to sync the components. Data is embedded as frequencies per category, rendered through React.

NNikhilMakkena

76% match

Loading thumbnail…

s Fork of Untitled

This example shows an interactive, animated bar chart built with React and D3 v2, where each bar is rendered as an SVG rectangle with a drop-shadow filter. The chart uses a hierarchical data structure, displaying captions as x-axis tick labels and mapping numeric values to bar heights via `d3.scale.ordinal` and `d3.scale.linear`. Data transformation and bar layout are handled by custom functions called from a jQuery document-ready handler, with axes generated using `d3.svg.axis`. The visualization updates dynamically, though the specific dataset source is not shown in the provided code.

SSaahithi49

76% match