Ejercicio#2

100%

✓ Published0🌍 Public

Last edited May 14, 2021

Created on May 14, 2021

This horizontal bar chart displays the heights of six products, using a linear scale for the x-axis and a band scale for the y-axis. The visualization loads data from a CSV file with d3.csv, then renders SVG rectangles with computed attributes. It employs d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to generate axes with formatted tick labels and adds a title and axis label.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Ejercicio 2 Products2

This bar chart displays product heights for six products, with each bar’s length proportional to its height value. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` for tick marks. Data is loaded from a CSV file, and the chart includes axis labels and a title, with tick lines and labels styled via CSS.

Ppablocenfo

92% match

Loading thumbnail…

Lab04_MerceEscalante Ejercicio #2

This visualization shows a bar chart of product names sorted by descending height, with tooltips displaying the height value for each bar. It uses the Vega-Lite API’s `markBar` method, encoding the x-axis by the nominal `name` field and the y-axis by the quantitative `height` field. The chart is rendered as an SVG via Vega-Lite and Vega, with data loaded asynchronously using D3’s `csv` function from a GitHub-hosted CSV file. Custom axis styling and font sizes are applied through a configuration object for improved readability.

MMerceEscalante

79% match

Loading thumbnail…

Creating a Rectangle Chart

This example demonstrates a horizontal bar chart from the `products.csv` dataset, ranking products by their numeric attribute values. The chart uses an SVG canvas with a linear scale for bar lengths and a band scale for categorical product names, rendered via D3 v6’s `scaleLinear`, `scaleBand`, and `axisLeft`/`axisTop` APIs. Bars are drawn directly as SVG rectangles, with steelblue fills and compact axis labels. The setup processes CSV data and maps product names to the vertical axis while attribute values determine bar heights, producing a straightforward comparison of product metrics.

Jjr873

77% match

Loading thumbnail…

chart exercise

This example displays a bar chart of five product prices from a local CSV file. The visualization uses D3 version 5 to render SVG rectangles, with the y-axis scaled linearly from zero to the maximum price and the x-axis using a band scale for categorical item names. The chart includes labeled axes and steel-blue bars, with all text styled to a large size via CSS. The code manually applies margins and uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the plot.

Llinkshady

76% match

Loading thumbnail…

Fork of Fork of barchart4

This horizontal bar chart displays the heights of six products from a CSV file, with D3.js rendering SVG bars. The visualization supports interactive features: clicking an alert on a bar and hovering over a bar generates a tooltip, both showing the product name and height. The code uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. A `csv()` call loads the data, and configuration options in `chartJson` control labels, grid lines, and events.

Llimeroc

75% match

Loading thumbnail…

Activity 7

This example shows a horizontal bar chart of product sales, using a categorical y-axis for product names and a linear x-axis for sales values. It renders with React and SVG, using D3 v5’s `scaleBand`, `scaleLinear`, `csv`, and `format` APIs to load and scale data from a GitHub-hosted CSV file. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the axes and rectangular marks, with native SVG `<title>` elements providing tooltips. The data is filtered to the top seven products, and sales values are formatted with a compact SI prefix.

Bbogasamudramvamsikrishnareddy

74% match

Loading thumbnail…

DV Assignment 2

This example shows a horizontal bar chart of application names against their number of users, sourced from a CSV file, with data limited to the first 50 records. The visualization uses React components and d3.scaleBand and d3.scaleLinear for scaling, while d3.max and d3.format handle data aggregation and tick label formatting. Bars are rendered as SVG rects with tooltips, and custom AxisBottom and AxisLeft components place ticks and labels. The CSV is loaded asynchronously with d3.csv, and styling is applied via CSS classes for ticks and marks.

NNagateja99

73% match

Loading thumbnail…

vendas_por_grupo_bar_chart

This bar chart displays the quantity sold for each product group, with horizontal bars ordered by category name. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map sales values and group labels, while `axisLeft` and `axisBottom` render the axes. Data is loaded from a CSV file using `d3.csv`, and each bar includes a hover tooltip via appended `title` elements. The SVG output is styled with a gradient background and custom fill colors for the bars.

Ggabrielribeirob

73% match