MilowB

@MilowB·8 public vizzes

fresh block

A line chart displays monthly values over time, with each data point shown as a semi-transparent grey circle. Hovering a circle highlights it in red, displays the numeric value as text, and draws a dashed vertical guide line to the baseline. The visualization uses D3 v4 with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.json` to load and render the dataset, while `d3.select` and `transition` manage the interactive hover effects in an SVG container.

Dec 9, 2018

Loading thumbnail…

drag 'n drop test

This example presents a weekly timetable where a single course block labeled "Theo" can be dragged across a grid of five days (lundi through vendredi) and half-hour time slots. The visualization uses D3.js version 3 and underscore.js to render an SVG chart with separate axes for days and hours, along with a tooltip that appears on mouse movement. The code sets up drag behavior via `d3.behavior.drag` and scales time values using `d3.time.scale`, while the course data is stored as a simple JavaScript array with start and end times per day.

Dec 12, 2017

Loading thumbnail…

carte_france_grippe

This interactive map of France visualizes weekly influenza case counts across regions, with a color scale indicating intensity for each selected week. A dual-slider interface—one HTML range input and one custom D3 slider—allows users to scrub through 52 weeks or view the annual sum. The visualization uses `d3.csv` and `d3.json` to load data, `d3.geoConicConformal` for projection, and `d3.scaleQuantize` for coloring regions. Hovering highlights regions and displays a tooltip with details.

Dec 7, 2017

Loading thumbnail…

drag 'n drop test

This example shows a weekly course schedule where each class is represented as a draggable horizontal bar on a grid of days and time slots. Users can move courses vertically to new time slots, and the bar turns red if it would collide with another course on the same day. Built with D3 v3’s `d3.behavior.drag`, the visualization uses `d3.time.format` for time parsing, `d3.transform` for reading translations, and Underscore.js for collision detection via intersection and containment checks. The SVG rendering includes axes, grid lines, and color-coded course categories, with data defined inline as a sample array.

Dec 5, 2017

Loading thumbnail…

Gist 1046e6003c6e5198ef4647da9b64c3b7

This example displays a static map of French regions, rendered using a conic conformal projection centered on France. The visualization uses D3 v4’s `d3.geoConicConformal`, `d3.geoPath`, and `d3.json` to load and draw geographic data from an external regions JSON file. The SVG canvas is 700 by 580 pixels, with all region boundaries shown as simple paths. No interactivity or additional styling is applied; the map is presented in its raw, unadorned form.

Nov 30, 2017

Loading thumbnail…

tp3_d3

This example animates a small multi-series line chart of stock prices (sourced from a CSV file) into a horizon graph, a technique that visualizes magnitude through color intensity. Initially, each series is drawn sequentially as a black line using d3.svg.line with a time-scale x-axis and linear y-axis. The animation then transitions to a clipped view, applying d3.scale.ordinal colors to area fills composed of three stacked bands per series, compressing the y-domain to one-third the original value.

Nov 29, 2017

Loading thumbnail…

tp3_d3

This example visualizes stock price histories as a sequence of animated line charts, then transforms them into stacked horizon graphs. Using D3.js v3, it loads data from a CSV file containing stock symbols and monthly prices. The code employs `d3.svg.line`, `d3.svg.area`, and `d3.time.scale` to render paths, while `d3.timer` drives the drawing animation. A `clipPath` and ordinal color scale create the horizon chart effect, with `transition` methods smoothly displacing and recoloring the area fills. The SVG output is generated entirely client-side from the external dataset.

Nov 29, 2017

Loading thumbnail…

simple line chart from dataset

This line chart displays seven monthly data points from a JSON dataset, plotting each value over time on a time-scaled x-axis and a linear y-axis. The chart incorporates interactive hover effects, highlighting a data point and displaying its value with a dashed red line. Built with D3 v4, the SVG visualization uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.json` for data loading, with animations on mouseover via `transition().duration()`.

Nov 10, 2017