Chaf1A

@Chaf1A·5 public vizzes

fresh block

This example shows a small node-link network diagram rendered as SVG. A force-directed layout positions the nodes, while linked lines use a stroke width proportional to link weight. Node labels appear as text, and dragging is enabled through the force drag interaction. The code uses the d3.layout.force API, loads graph structure from a local graphFile.json, and updates node and link positions on each physics tick.

Feb 6, 2020

Loading thumbnail…

Gist baa4df6da9fa4834e074874f5bf4dbb4

A choropleth map of France shows aggregated influenza cases per region for a one-week period in November 2014, with a green sequential color scale ranging from light to dark based on case counts. Built with D3 v4, the visualization merges weekly CSV data with a GeoJSON map of French regions. It uses `d3.geoConicConformal` for projection and `d3.geoPath` to render region boundaries, while a tooltip displays region names and exact case totals on mouseover.

Dec 6, 2017

Loading thumbnail…

Gist 7e3a00ebc2070655596c90ce28179a62

This example displays a static map of the United States using a conic conformal projection centered on France. The visualization renders geographic boundaries as SVG paths, with the map projected using `d3.geoConicConformal()` and a scale of 2800. The code loads U.S. state data from a local `us-states.json` file and draws each feature using `d3.geoPath()`. The map is fixed at 700 by 580 pixels, with no interactive elements, focusing purely on the projected geometry.

Nov 30, 2017

Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of seven monthly values from January to July 2016, showing a trend with peaks in May and dips in March and June. The chart uses an SVG canvas, with time parsed via `d3.timeParse` and formatted with `d3.timeFormat`, while an ordinal time scale on the x-axis and a linear scale on the y-axis map the data. The line path is generated by `d3.line`, and circles represent each data point. Hovering a circle highlights it in red, draws a dashed vertical guide line, and displays the value in bold text, all implemented with D3 v4 event handlers. The data comes from the included `dataset.json` file.

Nov 14, 2017

Loading thumbnail…

D3 bar chart with scales & dataset

This example demonstrates a simple bar chart created with D3.js version 4, where the height of each bar represents a numeric value from the included dataset. The visualization uses SVG rectangles positioned on a 200-by-500 canvas, with bars spaced evenly along the x-axis. The code applies D3's `selectAll` and `data` binding, along with the `enter` selection to create the rectangles, setting their `width`, `height`, `x`, and `y` attributes based on the data values. The bars are outlined with black strokes, and the dataset is provided as a CSV file.

Nov 9, 2017