IsmaelHernandezL

@IsmaelHernandezL·16 public vizzes

Bowl of fruit - Hover to select

Five fruit circles appear as a row of apples, rendered with D3 v5 SVG. Hovering over a fruit turns its stroke black, highlighting the selection. Entering and exiting circles animate their radius from and to zero, while a fruit changing type updates its color and size. The code uses D3 selections, data joins, and ordinal scales for color and radius.

Jan 4, 2020

Loading thumbnail…

Bowl of fruit - click to select

Five fruit circles render as apples and a lemon, with an ordinal scale mapping fruit types to colors and radii. Clicking a fruit selects it, drawing a black stroke around that circle, while the join uses d3 transitions to animate enter, update, and exit states. The data array mutates over time to demonstrate keyed joins and animated updates.

Jan 4, 2020

Loading thumbnail…

Bowl of fruit - General update pattern

Five pieces of fruit sit in a bowl rendered as SVG shapes. The general update pattern demonstrates how D3’s enter, update, and exit selections handle data changes. Using `d3.scaleOrdinal` for color and radius, circles and text labels update through `selection.merge`, while `setTimeout` modifies the array to remove items or change an apple to a lemon. The bowl itself is a static rectangle.

Jan 3, 2020

Loading thumbnail…

Bowl of fruit - General update pattern

Five fruit circles animate in a row, demonstrating D3’s general update pattern with enter, update, and exit transitions. An apple is removed, another apple changes into a lemon, and a third apple is deleted, with each circle’s radius and color adapting via `scaleOrdinal` mappings and `transition().duration(1000)` tweening. The SVG is rendered and re-rendered on a timer using `d3.select` and a custom `fruitBowl` function, with random `id` values as data keys.

Jan 3, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth over time, sourced from a CSV of world population by year. The x-axis maps years on a time scale, while the y-axis shows population in billions using a linear scale with custom tick formatting. The area path is generated with D3's `area()` generator and `curveBasis`, rendered as an SVG with maroon fill. Axes use `axisBottom` and `axisLeft`, with styled tick marks and axis labels.

Jan 2, 2020

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, showing how temperatures fluctuate over time across the x-axis and temperature values in degrees Celsius on the y-axis. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to render an SVG path, with axes created via `axisBottom` and `axisLeft`. Data is loaded from a CSV file using `d3.csv` from Data Canvas - Sense Your City, and styled with CSS for the maroon area and axis labels.

Jan 2, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The line uses a smooth basis curve to connect daily temperature readings. Built with d3.v5, the code employs scaleTime, scaleLinear, axisBottom, axisLeft, and line with curveBasis to render the SVG. Data is loaded from a CSV file containing timestamp and temperature values, with the chart styled using maroon strokes and labeled axes.

Jan 2, 2020

Loading thumbnail…

Temperature in San Francisco

This scatter plot displays one week of temperature data (in degrees Celsius) in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values to SVG circle positions, with axis labels and gridlines generated via d3.axisBottom and d3.axisLeft. Data is loaded as CSV from a remote dataset, and each temperature reading is rendered as a steelblue circle, with a title and axis annotations clarifying the chart's purpose.

Jan 2, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization maps horsepower to the x-axis and weight to the y-axis, with red semi-transparent circles representing each car. Built with D3 v5, the code uses `csv()` to load the data, `scaleLinear()` for both axes, and `axisBottom()` and `axisLeft()` for the grid lines and labels. The rendering is done in SVG, with axis lines removed using `.remove()` and explicit text elements for the chart title and axis labels.

Jan 2, 2020

Loading thumbnail…

Scatter Plot

This scatter plot shows the populations of the ten most populous countries, using a 2018 estimate from the United World Population Prospects 2017. D3.js v5 renders the visualization as an SVG, with population values on the x-axis and country names on the y-axis using a point scale. The code employs `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the axes, while data is loaded from a CSV file and formatted with `format` for abbreviated tick labels.

Jan 2, 2020

Loading thumbnail…

Costumazing Axes

This bar chart displays the populations of the world’s ten most populous countries, based on 2018 United Nations estimates, with population values shown in thousands. The chart uses d3.scaleLinear and d3.scaleBand to map population and country names, while d3.axisBottom and d3.axisLeft generate the axes. The y-axis labels are cleaned by removing domain lines and ticks, and the x-axis tick labels are formatted with d3.format to abbreviate large numbers (e.g., converting “G” to “B”). The SVG rendering includes custom axis labels and a title, with the dataset loaded via d3.csv.

Jan 2, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of ten of the most populous countries using data estimated from the 2017 United World Population Prospects. The visualization uses d3.v5 to construct a horizontal bar chart, with population values on a linear scale and country names on a categorical band scale. The SVG rendering includes axes generated with `axisLeft` and `axisBottom`, while rectangular bars are appended to the chart with widths proportional to each country's population. The data is loaded from a CSV file and multiplied by 1000 to reflect actual population figures.

Dec 28, 2019

Loading thumbnail…

let's make a face with D3.js !!

D3.js v5 builds a smiling face from SVG primitives. The code draws a yellow head circle, two eyes, rectangular eyebrows, and a mouth arc. A two-thousand-millisecond transition animation repeatedly raises and lowers the eyebrows. The example demonstrates the `d3.select` API for SVG element selection, the `d3.arc` generator for creating the mouth path, and chained `transition` calls for basic procedural animation. The face is centered using an SVG group element transformed with computed width and height values.

Dec 28, 2019

Loading thumbnail…

Shaés with SVG and CSS

This example demonstrates a set of basic geometric shapes—circles, rectangles, a line, and a path—rendered directly in SVG within an HTML page. It shows how SVG element attributes and CSS rules control a shape’s appearance, such as fill colors, stroke properties, and stroke-linejoin settings. A CSS class applies global styling to grouped line and path elements, while inline presentation attributes handle color for individual shapes. The composition uses group transforms for scaling and translation, and the rendering relies purely on SVG markup and CSS, with no JavaScript libraries or external data.

Dec 27, 2019

Loading thumbnail…

HTML Cars Report

This example shows a plain HTML car report listing three vehicles with prices, highlighting one entry in red. The page structure uses a single unordered list within the body, and styling is applied through an external stylesheet. The document relies only on standard HTML and CSS, with the `.highlighted` class setting the color property on the first list item. No JavaScript libraries or data-processing APIs appear in the code.

Dec 27, 2019

Loading thumbnail…

HTML STARTER

This example demonstrates an asynchronous JavaScript data-processing workflow that loads car inventory data, filters it by price, and renders a formatted text report in the browser. It uses a Promise-based `getCars` function to simulate a two-second network delay, then applies `generateReport` with `Array.prototype.filter` and `Array.prototype.map` to format car details. The final message is displayed in the `textContent` of the `<pre>` element. The page uses vanilla HTML, CSS, and ES modules, with no external libraries.

Dec 27, 2019