Eric Torres

@ciretorres·11 public vizzes

Temperature in San Francisco Area Chart

This area chart displays San Francisco's weekly temperature variations in degrees Celsius, using data from the Data Canvas - Sense Your City project. The visualization employs a smooth curved area path generated with d3.area and curveBasis, mapping time on the x-axis and temperature on the y-axis. It renders as SVG using D3 v5, with scales from d3.scaleTime and d3.scaleLinear, and axes configured via d3.axisBottom and d3.axisLeft. The chart includes labeled axes and a title, with data loaded asynchronously from a CSV file.

Nov 9, 2021

Loading thumbnail…

Temperature in San Francisco Area

This area chart visualizes one week of temperature data in San Francisco, showing temperature in degrees Celsius over time. The chart displays a smooth, filled area path with axis labels and a title, rendered as an SVG using D3 v5. It employs `d3.scaleTime` and `d3.scaleLinear` for scaling, `d3.area` with `curveBasis` for the shape, and `d3.axisLeft` and `d3.axisBottom` for axes. Data is loaded from a CSV via `d3.csv`, with timestamps parsed into Date objects.

Nov 9, 2021

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart shows one week of temperature data (in degrees Celsius) in San Francisco, sourced from Data Canvas - Sense Your City. It uses d3.scaleTime and d3.scaleLinear for the axes, d3.axisBottom and d3.axisLeft for tick rendering, and d3.line with curveBasis to draw a smooth path. The SVG chart includes gridlines via tickSize, axis labels, and a title, with data loaded asynchronously via d3.csv.

Nov 9, 2021

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and temperature in Celsius on the y-axis, using circular points over a grid-lined chart. The visualization is rendered as SVG using D3 v5, with scales including `scaleTime` and `scaleLinear` to map data to positions, and `axisBottom` and `axisLeft` for tick marks. Data is loaded as CSV from an external URL and parsed with timestamps converted to `Date` objects for the time scale. The chart includes labeled axes, a title, and rotated y-axis text, with a circle radius of 6 pixels.

Nov 9, 2021

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. Each red, semi-transparent circle represents a car, with its horizontal position mapped to horsepower and vertical position to weight, using a linear scale for both axes. Axes are labeled and include gridlines, and a title appears above the plot. The visualization is built with D3 v5, using `scaleLinear`, `axisBottom`, `axisLeft`, `csv`, and `extent` to process data and render SVG elements.

Nov 9, 2021

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top nine most populous countries using 2019 United Nations estimates, with each country represented by a circle positioned along linear population and point-based country scales. The visualization is rendered as SVG using D3 v5, leveraging `d3.csv` for data loading, `d3.scaleLinear` and `d3.scalePoint` for axes, and `d3.axisBottom`/`d3.axisLeft` with formatted tick labels. Grid lines created by axis ticks extend across the plot, highlighting population magnitudes for countries like China and India.

Nov 9, 2021

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top nine most populous countries, with data from the United Nations’ 2019 World Population Prospects and values converted to thousands. The visualization customizes both axes, removing domain lines and tick marks on the y-axis while formatting x-axis ticks with d3’s `format` to abbreviate large numbers (e.g., G to B). Using D3 v5, the code employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG, with a steel-blue fill for bars and a labeled axis for population.

Nov 8, 2021

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top nine most populous countries, based on 2019 estimates from the United Nations World Population Prospects. The visualization uses d3.csv to load data and d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom for the axes. Each country’s population is rendered as an SVG rectangle with a steelblue fill. The chart is built with D3 v5 and uses an SVG container sized at 960 by 500 pixels.

Nov 8, 2021

Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow smiley face is drawn in SVG with D3.js, featuring two eyes, animated eyebrows, and an arc-shaped mouth. The eyebrows transition upward and back down over four seconds using chained `transition().duration()` calls. The code builds the face by appending circles for the head and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` helper for the mouth, all grouped and translated to center the composition.

Nov 8, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and polylines—with SVG and style them using CSS. The code uses the SVG API directly in an HTML file, applying attributes like `fill`, `stroke`, and `stroke-width` both inline and through a linked stylesheet. A `transform` groups shapes for scaling and translation, while the `.lines` class controls the stroke appearance of the line and path elements. The rendering is entirely SVG-based, with no JavaScript libraries involved.

Nov 8, 2021

Loading thumbnail…

HTML Cars Report

This example displays a simple list of used cars, each with its model year, name, and price, while highlighting the first entry in red. It uses plain HTML list elements and a CSS stylesheet to control font size, family, and the color of the highlighted item. The page relies on static markup and CSS rules rather than any JavaScript libraries or data loading, presenting the information directly from the source code.

Nov 8, 2021