limeroc

@limeroc·10 public vizzes

LAB5FINAL

This interactive visualization displays grouped bar charts comparing profit and revenue across seven months, with each month split into colored bars representing revenue categories. Users can drag the top of any bar vertically to modify its value, which immediately updates the displayed profit number and bar height. Built with D3 v5, the example uses `scaleBand`, `scaleOrdinal`, and `scaleLinear` to position and color the bars, while `d3.drag()` handles the interactive manipulation. A color legend, generated by a custom `colorLegend` function, identifies the revenue series, and data comes from a local JSON file rendered as SVG with smooth transitions.

May 18, 2021

Loading thumbnail…

FINAL LAB5 JEFFRI

This visualization displays profit and revenue data for a band over a week, with grouped bar charts colored by revenue category. Users can drag bars up or down to adjust profit values, which updates the displayed numbers and bar heights in real time. The code uses D3 v5 scales, axes, drag behavior, and color legends to create the interactive SVG animation. Data is loaded from a local `revenue.json` file.

May 18, 2021

Loading thumbnail…

LAB5!

This bar chart shows total revenue by franchise, colored by revenue category, with data filtered to include only franchises earning over $10 million. The visualization highlights that merchandise dominates franchise earnings, with Marvel standing out in movie revenue and Shonen Jump leading in manga. Built using the Vega-Lite API with d3.v5 for CSV loading, the chart encodes franchise on the x-axis, revenue on the y-axis, and uses tooltips to display the original media type. The data comes from a Tidy Tuesday dataset on franchise revenues.

May 18, 2021

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.

May 18, 2021

Loading thumbnail…

bar chart laboratorio 4

This horizontal bar chart displays the populations of ten countries from the UN Population 2019 dataset. The bars are rendered as SVG rectangles, with population values mapped to bar length and country names on the y-axis. The code uses D3 v6 and React, employing `scaleBand` and `scaleLinear` for scales, and a custom `Marks` component to generate the rectangles. A mouseover tooltip reveals the exact population value, formatted using D3's `format` function with a `.2s` suffix.

May 18, 2021

Loading thumbnail…

Fork of barchart4

This horizontal bar chart displays the population of five countries, using a steelblue fill for each bar. The chart is rendered as an SVG using D3 v5, with linear scaling for the population axis and band scaling for the country labels. The code reads data from a CSV file and includes interactive features: hovering over a bar reveals a tooltip with the country and population, and clicking triggers a popup alert. The visualization also supports configurable axis labels and optional grid lines.

May 18, 2021

Loading thumbnail…

barchart4

This example displays a horizontal bar chart comparing population counts for five countries, with China, India, and Brazil standing out as the largest. The chart includes labeled axes, tooltips on hover, and click events that show the selected country and its population. Built with D3 v5, the visualization uses `d3.csv` to load data from `data.csv`, `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for axes. The SVG rendering includes gridline options and configurable label visibility through a chart configuration object.

May 18, 2021

Loading thumbnail…

Fork of bar chart laboratorio 4

This visualization displays the top 10 countries by population in 2020 using horizontal bars. Built with React and D3 v6, it renders SVG rectangles whose lengths correspond to population values. The chart uses D3’s scaleBand and scaleLinear for axes, formats tick labels with the D3 format function, and loads UN population data from a CSV file. Tooltips on each bar reveal the exact population when hovered.

May 18, 2021

Loading thumbnail…

Data analisis heart disease

The visualization is a scatter plot examining heart disease risk factors, plotting serum cholesterol against resting blood pressure, with point size encoding age and color distinguishing gender. The chart uses the Vega-Lite API to render the dataset from the UCI Heart Disease repository, sourced via a Kaggle-hosted CSV file. The tooltip displays the heart attack possibility target value. The code relies on vega-lite-api's `markCircle` and `.encode` methods, with data loading handled by `d3.csv`. The plot uses a dark-themed custom config for axis styling and readability.

May 17, 2021

Loading thumbnail…

Lab4 carita feliz

A smiley face rendered in purple with black outlines, drawn on an SVG canvas. The face is constructed with a large circle for the head, two smaller circles for eyes, and a path-based mouth using an arc. D3.js v5 is used for DOM element selection and creation, with the `select` and `append` APIs. The mouth is generated using `d3.arc` to define the path's shape, while eye and eyebrow positions are set via simple coordinate translations.

May 17, 2021