Skip to main content
SimilarExport ZIP
100%

Example of visualizing resolved issues

✓ Published0🌍 Public
LLucas
Last edited Dec 11, 2020
Created on Dec 11, 2020

This example visualizes resolved issues across South African metropolitan areas, using horizontal bars to show the percentage of issues resolved this month. The chart employs D3 v5 with SVG rendering, featuring a flipped bar orientation via CSS transforms and animated width transitions. It uses `scaleLinear` and `scaleBand` for axes, with custom tick formatting for population values. The React framework is referenced in the README, while the visualization itself is built with vanilla D3 and JavaScript.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js

This example displays a bar chart of country populations using SVG rendering in a React framework. The chart uses D3 v5 scales and axes, with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for categorical y-axis labels. Population data is loaded from a CSV file and multiplied by 1000 to reflect actual values. The visualization highlights each country as a green rectangle, with margins applied for clear axis labeling and layout.

WWholebitmedia
73% match
Loading thumbnail…

refactored bar chart

This example visualizes the top 10 most populous countries in 2020 using a horizontal bar chart rendered with React and SVG. Each bar’s length represents the population, with tooltips showing the formatted value. The chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle the ticks and bars. Data is loaded from a CSV via D3’s `csv` utility, and the axis label is positioned manually. The visualization demonstrates a clear separation of concerns by refactoring chart elements into modular, reusable components.

Vvijaytayal
72% match
Loading thumbnail…

Chart2.js

This example shows a horizontal bar chart of population data for 15 countries or regions, using bars scaled linearly to represent population values. The visualization is built with React and rendered as SVG, using D3 v5’s `scaleLinear` and `scaleBand` for positioning and sizing bars. The code loads data from a CSV file, multiplies population values by 1000 to convert them to raw numbers, and appends rectangles to the SVG. It highlights the simplest D3 approach for creating categorical comparisons.

Aacervantesc
72% match
Loading thumbnail…

Question 1.2

This example displays a horizontal bar chart of population data for twenty countries in 2010. The visualization uses React with SVG rendering, while D3’s scaleBand and scaleLinear handle the categorical and linear axes, respectively. The code loads CSV data from a GitHub repository using d3.csv, applies a custom SI format to abbreviate population values, and includes tooltips via SVG title elements. Blue tick lines and green bars are styled through CSS.

Sshivasaikumart@gmail.com
72% match
Loading thumbnail…

Customizing Axes

This example visualizes the top 10 most populous countries in 2018 using a horizontal bar chart. It demonstrates customizing axes by removing default domain lines, adding tick lines across the chart, and formatting population labels with abbreviations. The visualization uses React with D3 v5, employing `scaleLinear` and `scaleBand` for positioning, `axisLeft` and `axisBottom` for axes, and `format` for tick labels. Data is loaded from a CSV file and rendered as SVG rectangles with steelblue fills.

LLucasj01UK
72% match
Loading thumbnail…

D3

This example shows a horizontal bar chart of population data for ten countries, with population values scaled by a factor of 1,000. The visualization uses D3 v5 to load the CSV, create linear and band scales, and render SVG rectangles with axes. The code demonstrates `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and the chart is built within a React context, with the SVG element targeted by `d3.select`. The bars are styled with steelblue fill, and axes are labeled with a custom font size.

JJeffrey Miiller
72% match
Loading thumbnail…

Lets make a face with D3 js!

This example displays a horizontal bar chart of population data for the ten most populous countries, using a linear scale for population values and a band scale for country names. The visualization is rendered as SVG within a React framework, with D3 v6 handling data loading via `csv`, scales via `scaleLinear` and `scaleBand`, and axes via `axisLeft` and `axisBottom`. The bars are styled with steelblue fill, and the chart includes margins and a padded band scale to separate each bar.

Nnsadath
72% match
Loading thumbnail…

activity 6 task 1.2

This example shows a horizontal bar chart of 2010 population data for 20 countries, sorted by country name. The visualization uses React to render SVG rectangles, with D3 v5 scales (scaleBand and scaleLinear) for positioning. Axes are custom React components, and the chart loads CSV data from a GitHub repository, formatting population values with the d3.format utility. Hovering over a bar displays its population value via an SVG title element.

Ssindhureddykandada@gmail.com
72% match