claudiatomateo

@claudiatomateo·9 public vizzes

Covid Cases Hover

A bar chart displays daily COVID-19 cases in New York City from February to May 2020, using a black-and-orange color scheme. The chart uses D3's `scaleBand` for the date axis and `scaleLinear` for the case count axis, rendering SVG rectangles. Hovering over a bar triggers a custom tooltip via the `d3.tip` library, showing the exact date and case number. Data from NYC Health data is loaded from a CSV file.

Jun 15, 2020

Loading thumbnail…

Covid Cases Hover

May 31, 2020

Loading thumbnail…

Covid Cases

This visualization shows daily COVID-19 cases in New York City from late February to mid-May 2020, using vertical bars to represent case counts over time. The chart is rendered as an SVG using D3 v5, with a linear scale for cases and a band scale for dates. It employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the d3 module to construct the axes and bars. Data is loaded from a CSV file via `csv("data.csv")`, with hover effects changing bar color to orange. The underlying data appears to come from NYC Health data.

May 31, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of ten countries, with horizontal bars ordered from most to least populous. The visualization uses D3 v5 to load CSV data, map population values to a linear scale, and country names to a band scale, rendering the resulting bars and axes as SVG. The chart highlights the data with pink bars, leaving the x-axis unlabeled, and includes substantial left margin space for country names. The code imports specific D3 functions such as `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the graphic.

May 17, 2020

Loading thumbnail…

Let's make a face with D3.js

A cartoon face is drawn with D3 selections and SVG shapes: a blue circle head, two eyes, animated eyebrows, and an arc-based mouth. The eyebrows move up and down via chained `transition().duration(2000)` calls on a group. The code uses d3’s `select` and `arc` to build the mouth path, with static circles and rectangles for other features. The example demonstrates declarative SVG construction and coordinated, timed animations in d3.v5.

Apr 25, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered in SVG with CSS-based styling. The shapes are organized into groups: the top two rows show default black fills, the third row applies a teal fill and black stroke via a `g` element’s presentation attributes, and the bottom group uses the `.lines` class to style a polyline with a thick orange stroke. The code uses raw SVG elements (`circle`, `rect`, `line`, `path`) and CSS selectors to control colors, stroke widths, and line joins, with a `transform="scale(1.5)"` applied to the entire drawing.

Apr 20, 2020

Loading thumbnail…

HTML Cars Report

This HTML Cars Report presents a simple list of three used vehicles, each with its model year, name, and price. It uses plain HTML with an unordered list to display the entries, while a companion CSS file applies a monospace font and large 3em base font size to the body. The Ford F150 and Chevrolet Trailblazer appear in default black text, but the 2012 Nissan Leaf is visually distinguished by a blue color through the `.highlighted` class rule. The page does not include any JavaScript or data-visualization libraries.

Apr 20, 2020

Loading thumbnail…

Untitled

This example displays a filtered car report, showing only vehicles priced under $2000 as formatted text lines. The React-based visualization uses plain JavaScript to parse a JSON data source embedded in the cars module. It filters the array by price, maps each car object into a readable string with year, make, model, and cost, then joins the results. The final message is rendered into the DOM via `document.getElementById` and set as text content on a pre element.

Apr 14, 2020

Loading thumbnail…

Untitled

This example displays the phrase "Hello HTML" centered on the page at an extremely large font size, with no interactive elements or dynamic content. The page uses a minimal HTML structure with inline CSS styling to control the body’s text alignment and font size, demonstrating a static text rendering. The code relies solely on standard HTML and CSS, without any external JavaScript libraries or data fetching, serving as a basic starter template within a React framework setup.

Apr 14, 2020