ishmam11

@ishmam11·7 public vizzes

Line Chart with Multiple Lines

A line chart displays one week of temperature readings in Celsius for multiple cities, sourced from the Data Canvas - Sense Your City dataset. The visualization uses d3.line with curveBasis to create smooth paths per city, colored via an ordinal scale from schemeCategory10, and includes axes with gridlines, labels, and a color legend. It relies on d3.csv for data loading, scaleTime and scaleLinear for scales, nest() for grouping by city, and a custom colorLegend module, all rendered as SVG elements with d3.v5.

Sep 20, 2020

Loading thumbnail…

Making a bar chart!

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. Each bar’s length encodes population, while country names label the y-axis. Built with D3 v5, it uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for positioning, and `axisLeft`/`axisBottom` for axes, rendering as SVG. Country populations are multiplied by 1000 to reflect the raw data’s units.

Aug 30, 2020

Loading thumbnail…

Let's make a yello face with D3.js!

This example uses D3.js to draw a yellow smiley face in an SVG, centered within a 960×500 viewport. The face includes eyes, animated eyebrows that move up and down through chained `transition` calls, and a mouth created with the `arc` generator. The code directly calls `select` and `arc` from D3, building shapes with `circle`, `rect`, and `path` elements. A group element translates the drawing to the viewport center, while the eyebrows repeatedly shift their vertical position over two-second durations.

Aug 30, 2020

Loading thumbnail…

Let's make a face with D3.js!

A red SVG face is drawn using D3.js, with the entire background set to red via `svg.style('background-color', 'red')`. The visualization relies on D3’s `select` API to target the SVG element and apply styling directly. Rendered in a React framework, the example uses an SVG container with fixed dimensions (960 by 500 pixels) and D3 version 5. The face itself is not explicitly defined in the provided code, showing only the red background and SVG setup.

Aug 30, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG and styled using CSS. It shows circles, rectangles, lines, and a path within a container that applies scaling and translation transformations. Specific elements use inline `fill` attributes for color coding, while a group with class `lines` uses CSS rules to define stroke color, width, and line join rounding. The SVG markup is embedded directly in the HTML, with `transform` attributes controlling layout and positioning. No additional libraries are used beyond the native SVG and CSS APIs.

Aug 29, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML cars report listing three vehicles with their model years and prices, with the first entry highlighted in red. Built with React and plain HTML/CSS, it uses a static `<ul>` list in `index.html` to present the data, while `styles.css` applies a monospace font and a red `highlighted` class. The React starter code in `README.md` indicates the framework setup, but no interactive or dynamic features are demonstrated in the visible files.

Aug 29, 2020

Loading thumbnail…

Cars Report

A JavaScript module example demonstrates asynchronous data loading and report generation for a used-car inventory. The page displays a pre-formatted text list of cars under a price threshold, fetched from an inline JSON array via a promise-based `getCars()` function with a simulated two-second delay. The `generateReport` function filters cars by price, maps each to a formatted string using `formatCar`, and joins them with newlines. It uses template literals, array methods (`filter`, `map`, `join`), and ES module imports/exports.

Aug 29, 2020