Skip to main content
100%

Fork of Butter Macronutrients

✓ Published0🌍 Public
Eerickflorescallejas064@gmail.com
Last edited Sep 3, 2025
Created on Sep 3, 2025
Forked from Clickable Circles

A bar chart displays the percentage of varicella cases in Bolivia by year, with bars colored teal by default and turning coral when clicked to highlight a selected year. The chart loads data from a CSV file, maps it with numeric year and percentage values, and renders axes and bars using d3.scaleBand, d3.scaleLinear, d3.axisBottom, and d3.axisLeft. A unidirectional data flow pattern in udf.js manages state, passing selections between viz.js, setupSVG.js, and renderBarChart.js.

AI-generated description

Varicella Cases in Bolivia

This visualization shows the percentage of varicella (chickenpox) cases in Bolivia over the years. Click on any bar to highlight it.

Files

  • index.html: Main HTML file
  • index.js: Entry point
  • udf.js: Implements unidirectional data flow pattern
  • viz.js: Main visualization logic
  • setupSVG.js: SVG setup utility
  • renderBarChart.js: Bar chart rendering logic
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Butter Macronutrients

A reusable D3.js v7 bar chart demonstrates how a chart function can render and update between two datasets. The visualization displays categorical labels on the x-axis and numeric values on the y-axis, with color-coded bars for each category. A button click triggers a toggle between the two sample datasets, clearing the existing SVG and re-rendering with the new data. The code uses D3 scales (`scaleBand` and `scaleLinear`), axis generators (`axisLeft`, `axisBottom`), and selection methods to build the SVG chart programmatically.

Mmkavipriya234@gmail.com
76% match
Loading thumbnail…

Fork of Relación entre vacunación contra la varicela y casos en Bolivia, Chile y Perú (2020)

This bar chart visualizes letter frequency data from a CSV file, plotting categorical values along the x-axis against their corresponding counts on the y-axis. Built with React 19 and D3 v7, the visualization uses `d3.scaleBand` and `d3.scaleLinear` for data mapping, with `d3.axisBottom` and `d3.axisLeft` generating labeled axes. An Unsplash background image renders behind the chart with partial opacity, while interactive bars respond to clicks, dimming non-selected elements and recoloring the active bar.

Kkiruthika.jk@kpriet.ac.in
76% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A dual-axis bar chart compares varicella vaccination and case rates across five South American countries in 2020, using a CSV dataset. The visualization is built with React and D3 v7, combining `scaleBand` and `scaleLinear` for positioning. The same chart includes interactive bars that toggle a country's highlight, a rotated x-axis for country labels, and a title rendered in Spanish, all coordinated through a custom `main` function and React state.

Eerickflorescallejas0@gmail.com
72% match
Loading thumbnail…

Fork of barchart-sorted

This interactive bar chart compares child nutrition indicators across eight blocks in Palghar district, showing Height%, Weight%, and combined Height+Weight% values. Users select a month and metric from dropdown menus, triggering animated transitions that re-sort and re-color the bars using a sequential color scale. The visualization uses D3.js with `scaleLinear`, `scaleBand`, and `transition.attr` for smooth updates, while a tooltip displays exact values on hover. Data comes from the provided CSV files, with SVG rendering and Bootstrap for layout.

DDhiva21
72% match
Loading thumbnail…

Fork of barchart-sorted

This fork of the bar chart shows child undernutrition percentages across eight blocks in Palghar, India, for three months. Interactive dropdowns let viewers switch between August, September, and October, and toggle among height, weight, or combined height-plus-weight measurements. The sorted bar layout updates smoothly with d3 transitions, reordering bars and rescaling axes. Bars are color-coded with a sequential d3-scale-chromatic interpolator (RdYlGn), and a d3 tooltip displays block values. Data comes from the provided CSV files.

Bbepnye@gmail.com
71% match
Loading thumbnail…

Fork of Bar Chart

This bar chart visualizes the number of migrants per country, with bar heights encoding the values on a linear scale. The chart uses D3 v6 to load CSV data, create band and linear scales, and render SVG axes and rectangles. Interactive mouseover events change bar colors from steel blue to orange, with a smooth transition on mouseout. The data originates from a remote CSV file, and the visualization is built entirely with D3’s selection, scale, and axis APIs.

Ssucotton9
71% match
Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for eleven countries, using a linear gradient fill and customized axes. The visualization employs D3 v6 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars, while tick labels use a text gradient and formatted numbers via `d3.format`. Data comes from a CSV file containing country names and case totals. The chart includes a title and axis labels, with gridlines removed from the axes.

YYash_Mistry
71% match
Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart displays COVID-19 total cases per country, with countries listed on the y-axis and case counts on the x-axis. Each bar is filled with a purple-to-pink linear gradient, and the axis labels use a separate gradient for text styling. The visualization is built with D3 v6, using `scaleLinear` and `scaleBand` to map the data, which is loaded from a CSV file. The code customizes the axes and text appearance through CSS rules, including tick label colors and font sizes.

DDmitrii
71% match