Aznaggar

@Aznaggar·7 public vizzes

Chord Chard Diagram

This chord diagram visualizes movement between 64 New York City neighborhoods, with colored arcs and ribbons showing the volume of connections in each direction. The visualization uses d3.chord layout with d3.ribbon paths, rendering in SVG within a React framework. Data comes from two sources: a CSV file providing neighborhood names and colors, and a JSON file containing a migration matrix with connection values. Interactive hover effects fade non-related chords, and tooltips display directional flow counts between neighborhoods.

Jan 8, 2020

Loading thumbnail…

Chord Chard Diagram

This example renders a chord diagram from a small 5x5 matrix of numeric values in the `flare.js` file, with labels a–e. It uses the D3 v5 `d3.chord()` layout and `d3.ribbon()` generator to draw the chord ribbons in SVG, while `d3.arc()` creates the outer group arcs. Each chord’s fill color is derived from its source index via a `d3.scaleOrdinal` with `d3.schemeCategory10`, and ribbons have a fill opacity of 0.67. Text labels are rotated around the inner radius using computed angles. The React framework is present in the metadata, though the main rendering logic is plain D3.

Jan 8, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population by country, ordered from most to least populous, with each bar’s length encoding the population value. The visualization uses d3.csv to load data from a CSV file, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom for the axes. Bars are rendered as SVG rectangles, with a fixed margin and responsive inner chart area computed from the SVG’s width and height attributes. The code uses d3.v5 and is structured as a React-compatible plain JavaScript module.

Jan 8, 2020

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with a customized axis that abbreviates large population values (e.g., converting billions to "B") using d3.format. The chart reads from a CSV file and renders as SVG rectangles with steelblue fill. It uses d3.scaleBand and d3.scaleLinear for positioning, along with d3.axisLeft and d3.axisBottom for axes, while stripping default tick lines and domains via selection methods.

Jan 7, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face out of basic SVG shapes using D3.js v5. The face consists of a yellow circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc-generated path for the mouth, all centered within an SVG canvas. The eyebrows animate upward and then back down via chained `transition()` calls. The code imports `select` and `arc` from d3, demonstrating how to construct and position shapes with SVG attributes.

Jan 7, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged and styled with CSS and inline attributes. It shows how default black fills contrast with explicit colors like red and green, and how groups apply shared transforms and styles, such as translating shapes and adding strokes. The code uses plain SVG elements within an HTML file, with CSS classes controlling stroke color and width, and inline attributes like `fill` and `transform` for individual styling. The rendering is entirely SVG-based, with no external libraries.

Jan 7, 2020

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced under $2,000. The report is generated from a hard-coded JSON array of car objects, which is fetched asynchronously via a custom Promise. The `generateReport` function filters the array by price and uses `formatCar` to produce a formatted string for each vehicle. The final report is rendered inside an HTML `<pre>` element, with React Starter code present in the files.

Jan 3, 2020