jufrank

@jufrank·8 public vizzes

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It plots time on the x-axis and temperature in degrees Celsius on the y-axis, using a smooth curved line to connect the data points. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG chart. The code also includes axis labels, a title, and a maroon line path styled via CSS.

Apr 28, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature in San Francisco, with time on the x-axis and temperature in Celsius on the y-axis. The SVG rendering uses d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.line with a curveBasis smoothing generator. Data is loaded via d3.csv from a remote dataset, and each temperature value is parsed as a number while timestamps are converted to Date objects. The chart includes axis labels, a title, grid lines, and a maroon smoothed line path. Data originates from the Data Canvas - Sense Your City initiative.

Apr 28, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. It uses React and D3 v5 to load data from a CSV file via `d3.csv`, then renders the chart as SVG. The code employs `d3.scaleLinear` and `d3.scaleBand` for positioning bars, and `d3.axisLeft` and `d3.axisBottom` for tick marks. The chart includes a title and a labeled x-axis, with bars styled in steel-blue via CSS.

Apr 12, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

A set of basic SVG shapes demonstrates core vector graphics and CSS styling. Circles and rectangles appear with inline fill attributes, a group applies shared fill and stroke properties, and a separate group uses CSS classes for stroke width and line styling. The example renders shapes with literal coordinates in an SVG element, using SVG presentation attributes and a linked stylesheet to control color and line appearance.

Apr 11, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how basic SVG shapes like circles, rectangles, lines, and paths can be styled through both inline attributes and external CSS. It shows the effect of applying fills, strokes, stroke widths, and transforms such as scaling and translation. The code uses plain SVG within an HTML document, with a linked stylesheet defining classes like `.lines` for stroke properties and `path` styling. The rendering approach relies on static SVG markup, with no data binding or interaction.

Apr 11, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG elements in D3.js, whose eyebrows animate upward and downward in a looping transition. The code constructs the face using simple shapes: `circle` for the head and eyes, `rect` for the eyebrows, and a `path` generated with the `d3.arc` function for the mouth. D3 selections and the `transition().duration()` method drive the eyebrow movement, while the SVG is centered within a fixed 960×500 viewport using a translated `<g>` container.

Apr 11, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation in D3.js. The face is drawn using SVG shapes, including a circle for the head, eyes, rectangular eyebrows, and a mouth path created with the `d3.arc` helper. The eyebrows move upward and downward through chained `transition().duration(2000)` calls, altering their vertical translation. The example uses D3 v5 selections to append and style SVG elements within a centered group, illustrating basic data-driven document updates without external datasets.

Apr 11, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page with an embedded SVG containing a red circle and a rectangle. It demonstrates the simplest possible setup for a visualization gallery, using only native HTML elements and inline SVG styling. The page renders static shapes without any JavaScript libraries, serving as a bare-bones starter template. The SVG canvas is sized at 960 by 500 pixels, with shapes positioned using explicit x, y, and r attributes.

Apr 11, 2020