D2552

@D2552·13 public vizzes

Untitled

Two cities, Rome and Milan, show their daily temperature patterns as smooth, multi-colored line charts. The visualization compares hourly temperature readings across a 24-hour period, with each city represented by a distinct line and color. The chart uses a D3.js v5 SVG rendering approach with a basis curve interpolation to create flowing lines. The data originates from the Data Canvas - Sense Your City project, and the code includes a color legend (colorLegend.js) to help distinguish between the two city temperature profiles.

May 31, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in a large, centered style on a plain web page. It demonstrates the fundamental structure of an HTML document, including the `<!DOCTYPE html>` declaration, a `<head>` section with a title and embedded CSS, and a `<body>` containing the main content. The code uses standard HTML tags and inline CSS within a `<style>` block to set the text alignment and font size. It serves as a minimal starting point for building more complex visualizations with React or other frameworks.

May 30, 2020

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. Using React with D3 scales (scaleLinear) and SVG rendering, the code creates a clean, readable chart with styled axes. The Marks component renders circles for each data point, with native SVG tooltips showing formatted values. The visualization demonstrates a straightforward mapping of quantitative variables, with a special tick formatter that converts large numbers into abbreviated notation. Loading data asynchronously via d3.csv, the example highlights how React components can wrap D3's functional approach for interactive web visualizations.

May 30, 2020

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes. Users select which columns map to the X and Y axes via dropdown menus, triggering animated transitions as circles reposition over two seconds. The visualization uses D3 v5 with scaleLinear for axes, axisBottom and axisLeft for ticks, and custom dropdownMenu and scatterPlot modules. Data loads from a CSV file, with SVG rendering featuring semi-transparent red circles and gridlines.

May 30, 2020

Loading thumbnail…

Bar Chart

A bar chart displays population estimates for five countries, with proportional bar lengths read against an unrendered axis. The visualization loads data from a CSV file and uses d3.csv to parse it, multiplying each population value by 1,000. Rendering relies on d3.scaleLinear for the x-scale, though the chart only appends fixed-size rectangles of 300 by 300 pixels, leaving y-axis positioning and scales undefined. The SVG canvas is fixed at 960 by 500, with steelblue bars styled via CSS, and the code imports d3.select, scaleLinear, max, scaleBand, axisLeft, axisBottom, and format.

May 30, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple cartoon face as an SVG, comprising a yellow circle head, two eyes, rectangular eyebrows, and an arc-based mouth. The face is centered within a 960×500 viewport using an SVG group transform. The eyebrows animate upward and back down over two seconds each way using chained `transition().duration()` calls. The mouth is generated with D3’s `arc()` geometry, while static shapes are created via `select`, `append`, and attribute setters.

May 30, 2020

Loading thumbnail…

Untitled

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3’s `select` and `csv` to load data and render the chart. It customizes D3 axes with styled tick lines, tick text, and an axis label, while the CSS applies a steelblue fill to rectangles and adjusts font sizes for clarity. The title and axis annotations are positioned with D3’s selection methods, demonstrating a polished, readable bar chart.

May 30, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes animates its eyebrows in a looping motion. The example builds the face by centering a yellow circle, adding two eyes, and drawing a mouth using the `arc` generator from D3.js v5. Eyebrow rectangles are grouped and moved using `transition` and `attr` with a 2-second duration, shifting vertically up and down. The code imports `select` and `arc` directly from the `d3` module, sets attributes like `r`, `cx`, and `x` for positioning, and uses a 960×500 SVG canvas with a transform to center the composition.

May 30, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with a black outline forms a simple face in the center of an SVG canvas, demonstrating basic D3.js shape creation. The code uses `d3.select` to target the SVG element, reads its width and height attributes, and appends a circle with `svg.append('circle')`, setting its radius, center coordinates, fill color, and stroke. The example shows how D3 v5 manipulates SVG attributes directly to render a single geometric shape without data binding or interactivity, serving as an introductory exercise in the library’s core selection and append methods.

May 30, 2020

Loading thumbnail…

Let's make a face with D3.js!

A simple D3.js example assembles a face from basic SVG shapes, starting with a circle for the head and adding eyes and a mouth. The code uses D3 v5’s `select` and `append` methods to build the elements inside an SVG canvas, with the circle’s radius set to 200. Styling comes from a linked CSS file that hides overflow and removes margins. The face is constructed programmatically, demonstrating how D3’s declarative chaining can create visual compositions from scratch.

May 30, 2020

Loading thumbnail…

HTML Starter

This example displays the text "Hello HTML" in a large, left-aligned font on a bare webpage. It demonstrates a minimal setup using an HTML file with embedded CSS styles, defining the body’s text alignment and font size. The code references an external stylesheet link and includes a script tag, though the stylesheet link is mistyped and the script is incomplete. It relies solely on standard HTML and CSS without additional libraries, serving as a simple starting point for web development.

May 27, 2020

Loading thumbnail…

Cars Report

The dashboard displays a global map highlighting cities with populations exceeding 50,000, sourced from Simplemaps, layered over country boundaries from World Atlas TopoJSON. The visualization renders geographic features using d3.geoPath and includes graticules for spatial reference. The interface presents a title, “Cars Report,” and dynamically inserts a “Hello World” message into the DOM via plain JavaScript. The styling is handled with a clean, modern aesthetic using the Poppins font, while the map and city data are processed and drawn using D3’s mapping utilities.

May 27, 2020

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with cities of populations exceeding 50,000, using circle size to represent population magnitude. The map is rendered with D3.js, using `d3.geoPath` for country boundaries and graticules from TopoJSON data, while city points are projected and scaled based on the Simplemaps database. The visualization is polished with a Poppins font and a clean, minimal aesthetic, presenting global population distribution at a glance.

May 27, 2020