Lab04_MerceEscalante Ejercicio #2

100%

Lab04_MerceEscalante Ejercicio #2

✓ Published0🌍 Public

Last edited May 14, 2021

Created on May 14, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ejercicio#2

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.

MMerceEscalante

79% match

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

77% match

Loading thumbnail…

Vega block example

This example shows a simple bar chart of categorical values labeled A through H, with the bar height encoding the amount for each category. It uses a tooltip to display the amount value when hovering over a bar, and the text labels fade out for the hovered bar to avoid overlap. The visualization is built with Vega, a declarative visualization grammar, and rendered using the Vega-Embed API. The code defines scales for the x and y axes, uses rectangular marks for the bars, and includes a text mark for labels. The data is embedded directly in the specification.

AAlainRo

72% match

Loading thumbnail…

Stacked Bars

This stacked bar chart displays sales totals by product sub-category, with each bar segmented by customer segment. The visualization uses Vega-Lite API with D3.js to load CSV data, aggregate sales values, and render SVG output. Categories are sorted by descending sales, while color encoding differentiates Consumer, Corporate, and Home Office segments. Tooltips provide additional sales details on interaction, and axis labels are customized through the Vega-Lite config object.

Pprincit

72% match

Loading thumbnail…

Vega-lite Bar Chart with Tooltip

This example demonstrates a simple bar chart showing categorical values (A through I) against their corresponding numeric quantities, encoded as bar heights. The visualization is built with Vega-Lite, using an embedded dataset of nine pairs, and rendered as SVG via vega-embed. Tooltip interactivity is added through the vega-tooltip library, which binds to the vega view and displays the exact field values on hover. The code defines the chart declaratively in a JSON specification, setting the x-axis to ordinal categories and the y-axis to a quantitative scale, with the vegaEmbed function handling the rendering.

AAlainRo

72% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the sum of slum households per division using a bar chart generated with the Vega-Lite API. It renders bars sized to five pixels, sorted by aggregate value, and applies a custom dark-color configuration for axis labels and titles. The code loads CSV data from a GitHub gist using d3.csv, registers vega, vega-lite, and vega-lite-api, and enables tooltips via vega-tooltip’s Handler.

Ssofia-martinovich

71% match

Loading thumbnail…

Vega(Lite)

This example shows a horizontal bar chart of six test data points (element 1 through 6 with values 4, 8, 15, 16, 23, and 42), with the bars extending rightward from the y-axis. The visualization is built using Vega-Lite’s JSON declarative grammar, embedded inline in the page. The chart renders as an SVG via `vegaEmbed`, and the code loads Vega, Vega-Lite, and Vega-Embed from CDNs, then enhances the chart with tooltips using `vegaTooltip.vegaLite` on mouseover.

EEleonore9

71% match

Loading thumbnail…

Vega-Lite API Template

A red-green-yellow horizontal bar chart visualizes the 2022 popularity share of programming languages, sourced from a CSV via `d3.csv`. Each bar is encoded using the Vega-Lite API’s `.markBar()`, with x-position sorted descending by share, y-axis representing percentage, and color mapped to language name. The visualization uses `vl.x().fieldN()`, `vl.y().fieldQ()`, and `vl.color().fieldN()` for encoding, with a tooltip on language. The rendered SVG, configured with custom axis and label styles from `config.js`, spans the full window, built with `vega-lite-api` and `vega-tooltip`.

MMohammed Banani | MbDev

70% match