Assignment 2.1

100%

Assignment 2.1

✓ Published0🌍 Public

Last edited Jul 14, 2023

Created on Jul 14, 2023

A horizontal bar chart displays weapon export values for six countries in 2017, using a linear scale for the numeric count and a band scale for country categories. The SVG rendering loads data from a local CSV file and builds the visualization with D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`. Axis ticks extend across the plot, while red axis labels, green bars, and a styled title demonstrate custom color and font adjustments. The example also showcases ES6 module imports and D3 loaded via UNPKG.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart

This bar chart displays weapon export values by country for 2017, sourced from a CSV file hosted on GitHub. The visualization uses D3 v4’s `scaleBand` and `scaleLinear` to map countries to the x-axis and values to the y-axis, with `axisBottom` and `axisLeft` generating the axes. Bars are rendered as SVG rectangles, and the chart includes labeled axes and a title. The code loads D3 via UNPKG and demonstrates importing from local ES6 modules.

Ppjdhungana@gmail.com

89% match

Loading thumbnail…

Bar Chart

This example displays a horizontal bar chart of weapon exporter values by country for 2017. The React component uses D3’s `scaleBand` and `scaleLinear` to map country names and numeric values to pixel positions, rendering each bar as an SVG `rect`. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed with unary plus. The chart is styled with CSS classes, and margins define the layout within the SVG canvas.

Ppjdhungana@gmail.com

85% match

Loading thumbnail…

Bar Chart

This bar chart displays weapon exporter values for different countries in 2017 as horizontal bars. Using React with SVG rendering, it loads data from a CSV file via d3.csv, while d3-scaleBand positions the countries on the y-axis and d3.scaleLinear maps the values to bar widths. The bars are colored with CSS class .bar, and the chart is built within a React component that receives data, dimensions, and margins as props.

Ppjdhungana@gmail.com

84% match

Loading thumbnail…

Untitled

This example displays a horizontal bar chart of weapon exporter values by country for 2017. The React app fetches CSV data from a GitHub gist using D3’s `csv` loader, then renders the chart as an SVG. Bar lengths are scaled with `scaleLinear`, while the categorical country labels use `scaleBand` with padding. Axes are custom React components (`AxisBottom`, `AxisLeft`) that iterate over D3 scale ticks and domains to draw lines and text.

Ppjdhungana@gmail.com

83% match

Loading thumbnail…

Data on weapons export in the world

A horizontal bar chart displays countries ranked by total weapons exports from 1995 to 2014, with bar lengths scaled by aggregate export values and country names labeled beside each bar. The visualization filters out the highest total to focus on national comparisons. Built with D3.js v3, it loads data from a CSV file and renders SVG rectangles and text elements using `d3.csv` and data-binding methods like `.selectAll("rect").data(data).enter().append("rect")`. Bar widths and label positions are computed directly from the Total column.

LLampadaire

81% match

Loading thumbnail…

assign 2.1

This example renders a horizontal bar chart using React and SVG, with data mapped from countries to their numeric values. The chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with bars drawn as `rect` elements. The code imports `scaleLinear`, `scaleBand`, and `max` from D3, and the chart’s dimensions are controlled via `width`, `height`, and `margin` props. The visual output is a straightforward comparison of values across categories, without axes or labels.

Ppjdhungana@gmail.com

79% match

Loading thumbnail…

Assignment 2.2

A stacked bar chart displays monthly sales data from a CSV file, showing both quantity and amount per month in two color-coded segments. The visualization uses D3.js with SVG rendering, loading data via `d3.csv` from a GitHub gist. The chart leverages `d3.scaleBand` for the categorical month axis, `d3.scaleLinear` for the numeric amount axis, and `d3.scaleOrdinal` for color assignment. It includes manually positioned axis labels, a title, and a legend built with SVG rectangles and text. The styling uses custom fonts and colors defined in a separate CSS file.

Ppjdhungana@gmail.com

78% match

Loading thumbnail…

Data on weapons exports in the world

A horizontal bar chart displays the total value of weapons exports for each country between 1995 and 2014, measured in TIV (Trend-Indicator Value). The visualization uses d3.v3 with SVG rendering, employing `d3.scale.linear` for the value axis and `d3.scale.ordinal` with `rangeRoundBands` for the categorical country axis. Each bar's width corresponds to the country's total export value, with hover tooltips revealing exact figures. The chart is built from CSV data loaded via `d3.csv`, with axes created using `d3.svg.axis`.

LLampadaire

77% match