fra-alaimo

@fra-alaimo·12 public vizzes

Temperature in San Francisco Scatter Plot

This scatter plot displays temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. Each circle represents a single measurement, using d3.scaleTime and d3.scaleLinear to map the data. The chart includes labeled axes with gridlines and a title. Data is loaded as CSV from a VizHub dataset, parsed into Date and numeric values, and rendered as SVG circles using D3 v5 selection and enter/append methods, with custom margins and axis labels styled via CSS.

Dec 17, 2019

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings over a week in San Francisco, with each circle representing a timestamped observation using time on the x-axis and temperature on the y-axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, with data loaded via `d3.csv` from a remote dataset. The SVG rendering includes grid lines via tick sizes, axis labels, and a title, styled through CSS for circle fill, tick fonts, and label colors.

Dec 17, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the World, sourced from esa.un.org. Each red semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis. The visualization uses d3.csv to load the data, d3.scaleLinear for scaling, and d3.axisLeft and d3.axisBottom to render the axes. The chart includes axis labels and a title, with D3 v5 rendering the SVG output.

Dec 17, 2019

Loading thumbnail…

Cars Scatter Plot

Dec 9, 2019

Loading thumbnail…

Scatter plot

This scatter plot displays the populations of the ten most populous countries using circles positioned along a vertical categorical scale and a horizontal linear scale. The visualization relies on d3.csv to load the data, d3.scaleLinear and d3.scalePoint for axes, and d3.axisLeft and d3.axisBottom with custom tick formatting to render SVG elements. Population values are converted from thousands and formatted with abbreviations. The chart is titled "Top 10 Most Populous Contries" and includes gridlines via tick sizes.

Dec 9, 2019

Loading thumbnail…

Customizing axes

This example displays a horizontal bar chart of the top 10 most populous countries using data from the UN, with custom formatting applied to both axes. The y-axis labels are cleaned by removing tick lines and domain, while the x-axis uses `d3.axisBottom` with a tick format function that converts large numbers to abbreviated units (e.g., G to B). The chart is rendered with D3 v5 in SVG, using `d3.scaleLinear` and `d3.scaleBand`. Styling is handled through CSS, including custom font sizes and colors for axis text and labels.

Dec 9, 2019

Loading thumbnail…

making a Bar chart

This bar chart displays the populations of the world’s ten most populous countries, with each bar’s length scaled linearly to population and ordered alphabetically by country. The visualization uses D3 v5’s `csv` loader to parse the data, `scaleLinear` and `scaleBand` for the x- and y-axes, and `axisLeft` and `axisBottom` to render the scales. Bars are drawn as SVG `<rect>` elements with a steelblue fill, and margins create labeled axes within the 960×500 viewport.

Dec 9, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face as a yellow circle with eyes, eyebrows, and a mouth, all rendered in SVG. The eyes and eyebrows are positioned using D3 selections and attributes, while the mouth is drawn with the `d3.arc` shape generator. The eyebrows animate upward and back down over two 2-second transitions, demonstrating `transition.attr`. The face is centered via a translation and styled with CSS on the `body`.

Dec 5, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to style basic SVG shapes, including circles, rectangles, lines, and paths, using both inline attributes and CSS rules. It shows the difference between setting fill and stroke properties directly on elements versus applying them through grouped selectors and classes. The graphic relies on SVG group elements for applying transformations and shared styling attributes, with CSS controlling the final appearance of line joins and stroke widths.

Dec 4, 2019

Loading thumbnail…

HTML Cars report

This example presents a simple, static HTML-based report listing three used cars with their model years and prices. It renders a plain list of car entries, with the first item—a 2012 Nissan Leaf—highlighted in red text to draw attention. The page is built using basic HTML structure and styled through a linked `styles.css` file, which sets a large monospace font for the body and applies the red color class to the highlighted entry. The data is hardcoded directly into the HTML markup, with no external JavaScript or charting libraries involved.

Nov 30, 2019

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of cars filtered by price, displaying each car’s year, make, model, and price in a large, styled `<pre>` element. It shows a loading message before asynchronously fetching car data via a Promise and then generating a formatted list. The code uses `getCars` to simulate a delayed JSON data source, `generateReport` to filter and format entries with `formatCar`, and relies on plain JavaScript string methods like `map` and `join`.

Nov 30, 2019

Loading thumbnail…

Cars Report

This example demonstrates how asynchronous data fetching and modular JavaScript can be used to generate a simple text-based report of used cars. After a two-second simulated delay, a list of cars priced under $2,000 is displayed on the page. The code relies on native ES modules for importing and exporting functions, the `Promise` API with `setTimeout` for the delayed data retrieval, and `JSON.parse` to convert an embedded JSON string into an array of car objects. The final output is rendered into a `<pre>` element using the DOM method `textContent`.

Nov 30, 2019