MerceEscalante

@MerceEscalante·7 public vizzes

Cantidad de Crímenes según Franjas Horarias

This bar chart shows the number of crimes in Buenos Aires across four time periods (Noche, tarde, Mañana, Madrugada), with bar length encoding counts and color changing to green on hover. The visualization uses D3 v5 to load CSV data and render SVG rectangles, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for ticks. A custom tooltip div appears on mouseover, and the bars are highlighted with a fill transition, all within a static SVG canvas.

May 17, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between miles per gallon, horsepower, weight, and origin for automobiles from the Auto MPG dataset. Using the Vega-Lite API, it renders a scatter plot with color encoding for origin and size encoding for weight, while tooltips reveal vehicle names. The code leverages `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.color()` to define the marks, with data loaded via d3.csv from a GitHub Gist.

May 17, 2021

Loading thumbnail…

Star Break Coffee

Star Break Coffee displays monthly revenue and profit for a coffee chain using a static bar chart. Data from data.csv is mapped to SVG rectangles via d3.scaleBand, d3.scaleLinear, axisBottom, and axisLeft. The chart features dark blue axis labels, grey bars that turn green on mouseover via d3.select and transition, and uses Bootstrap for layout.

May 14, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays monthly revenue and profit data from a CSV file, with the values rendered as large text in a styled HTML page. The visualization uses Bootstrap for responsive layout and styling, while custom CSS centers the output. JavaScript logs a message to the browser console, but the primary display relies on static HTML content rather than dynamic data binding. The page demonstrates a minimal setup combining HTML, CSS, and JavaScript without any charting library, highlighting the basic structure for future React or D3-based visualizations.

May 14, 2021

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.

May 14, 2021

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.

May 14, 2021

Loading thumbnail…

Lab04_MerceEscalante Ejercicio #1

This example displays a simple yellow smiley face drawn with SVG shapes, centered within a 500×400 canvas. The construction uses D3 v6 selection and attribute methods to position a yellow circle for the head, two black circles for the eyes, and a red rectangle for the mouth. The code calculates all coordinates relative to the SVG’s width and height, ensuring the face remains centered. It relies on D3’s append and attr functions exclusively for creating and styling the visual elements.

May 14, 2021