Chmits

fresh block

An interactive map visualizes the real-time availability of bikes and stands at Vélo'v stations in Lyon, France. The map renders station locations as circles on a Mapbox base layer, with a tooltip that appears on hover. The code uses the Mapbox.js API to display the map and D3.js to handle data binding and SVG rendering, including transitions that animate the circles' radius on load.

Feb 11, 2018

fresh block

An interactive map of bike-share stations in Lyon displays each station as a circle whose position is projected onto a Mapbox-backed Leaflet map using D3. Loading station data from a local JSON file, the visualization animates circle emergence and provides a previsions function that appends a separate bar chart, though its data binding is incomplete. The map layer uses D3 to append an SVG overlay, and hovering interactions are defined for tooltips, though the chart itself is not fully implemented.

Feb 10, 2018

BarChart with ToolTip

This bar chart displays simulated hourly bike availability predictions for a single station, with bars representing forecasted values across 24 time points. The chart uses a static SVG canvas with axes for time and bike count, and bars change color from steelblue to brown upon hover. The visualization loads station metadata from a JSON file and uses D3.js v3 APIs including `d3.scale.ordinal().rangeRoundBands()`, `d3.svg.axis()`, and `d3.select()` to construct the chart. The bar heights and positions are computed through a random correction applied to the station's actual available bike count.

Feb 10, 2018

fresh block

This example demonstrates a data-processing sketch for a bike-sharing dataset, computing a rough estimate of future bike availability at each station. The code loads station information from a `stations.json` file using `d3.json`, then iterates through the records to calculate a random correction factor based on the number of total and available bike stands. It outputs the intermediate values and the corrected estimate to the console, but does not render any visual marks on the SVG canvas. The SVG is created with `d3.select`, yet it only contains a static text prompt, as no actual visualization is produced.

Feb 10, 2018

Force-Directed Layout with Convex Hull

A force-directed layout positions 100 randomly sized nodes into nine color-coded groups, with a small set of links connecting select pairs. The simulation runs 120 ticks using `d3.forceSimulation` with link, charge, x/y, collide, and center forces. A Voronoi partition, created with `d3.voronoi`, draws cell boundaries around the final node positions. Hovering over a cell briefly enlarges its white polygon and the contained node. The visualization is rendered as animated SVG using d3.v4.

fresh block

This visualization shows the character network from *Les Misérables* as an interactive force-directed graph. Nodes represent characters, colored by their group affiliation, while links show relationships with thickness scaled by relationship weight. The layout uses d3.forceSimulation with link, charge, and center forces, rendering SVG circles and lines. Users can drag nodes to reposition them, with drag events updating fixed positions. Data comes from the bundled miserables.json file.

fresh block

A force-directed network diagram of character co-appearances from Les Misérables uses d3.forceSimulation to position nodes and links in an SVG. Node colors map to character groups via d3.scaleOrdinal, while link thickness reflects interaction strength. The simulation supports dragging nodes, with d3.drag handling positional updates and alphaTarget to restart motion.

Force-Directed Layout with Convex Hull

A force-directed simulation of one hundred nodes grouped into nine clusters reveals a structured layout, with a Voronoi partition drawn as convex hulls that separate the groups. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceX`, `forceY`, and `forceCollide` to position nodes, while `d3.voronoi` computes the polygon boundaries. The SVG rendering includes interactive highlighting on mouseenter, which temporarily enlarges nodes in the hovered partition.

Force-Directed Layout with Convex Hull

This example uses D3 v4 to generate 100 random nodes assigned to 9 groups, then applies a force-directed simulation with `d3.forceSimulation`, including link, charge, X/Y, collide, and center forces over 120 ticks. After simulation, a Voronoi partition is computed via `d3.voronoi`, and its polygons are drawn as SVG paths that fill white and briefly turn red on mouseenter. Nodes are rendered as circles colored by category using `d3.schemeCategory20`, with no links generated, focusing purely on spatial clustering and interactive hull highlighting.

Work

A geographic map of bike-share stations in Lyon overlays a pie chart showing the proportion of a day spent in sky, sunny, or shady conditions. The visualization uses Mapbox.js for the basemap and D3.js for the pie chart, SVG rendering, and a color legend. Station data from a GeoJSON-like file includes real-time availability, while the pie chart’s hardcoded proportions drive the graphic.

Feb 6, 2018

Pyramid Pie

A pyramid pie chart uses a single D3 pie layout to show proportions as a rotated, triangular arrangement of three slices: sky, sunny side, and shady side. The chart uses `d3.layout.pie` and `d3.svg.arc` to compute slice geometry, and `d3.legend` to render a circular legend. Colors are assigned via an ordinal scale, and the whole pie is rotated with a transform. Data comes from a CSV file with feature, label, and proportion columns.

Feb 6, 2018

fresh block

A map of London shows a cluster of dots animating from radius one to radius six, each positioned by latitude and longitude from a CSV file. The visualization uses Leaflet with a Mapbox tile layer, and D3.js to render SVG circles that are projected to pixel coordinates and repositioned as the map pans or zooms, overlaid on the map’s overlay pane.

Feb 4, 2018

Many many many Points with D3 and leaflet

This visualization combines D3.js v4 and Leaflet to display a large set of points representing bike stations in Lyon. The map uses Leaflet's tile layer for the background and D3's `geoPath` and `geoTransform` to project GeoJSON station data onto the map as SVG points. Hovering over a station triggers its hover style, and the opacity of the points is determined by a station grouping property. The code loads station and trip data from JSON and CSV files, and re-renders the points on map movement.

Feb 4, 2018

Tp4

A choropleth map of French regions shows the cumulative total of influenza cases reported during 2014, with each region colored on a white-to-green scale based on its annual sum. The visualization combines a conic conformal projection with `d3.geoPath` to render regional boundaries from a GeoJSON file, while `d3.csv` loads weekly case counts from a CSV. A linear color scale (`d3.scaleLinear`) maps the maximum annual total to the darkest green, and region polygons are colored by matching names between the CSV and GeoJSON properties.

TP4

The visualization is a choropleth map of France showing the cumulative number of influenza cases per region for November 2014. A geographic projection renders each French region as a colored path, with a five-color quantized scale mapping the summed weekly values. The map, built with D3 v3, uses `d3.geo.conicConformal` for projection and `d3.geo.path` for drawing, while a mouseover tooltip displays the region name and its computed total. Data comes from the CSV file `GrippeFrance2014.csv`, with values merged into the GeoJSON features.

TP4

This choropleth map displays the cumulative number of influenza cases across French regions for the weeks of November 2014. Each region is colored on a five-step green scale, with darker shades indicating higher totals, and hover tooltips reveal exact values. The visualization merges CSV data with geographic boundaries using D3’s `d3.geo.path` with a conic conformal projection, while `d3.scale.quantize` maps data values to the color range. The code also demonstrates layering multiple GeoJSON loads and integrating mouse events for interactive detail.

Gist 596274e96e08f79d5a6d5a6b1c37b944

This visualization displays the incidence of influenza across French regions during the 2014 season, with a choropleth map coloring each region based on its total annual case count. The map is rendered using `d3.geoConicConformal` projection and `d3.geoPath` to draw France’s departmental boundaries. Data from a CSV file is joined to a GeoJSON of regional shapes, and the final fill color reflects each region’s summed value. The code also includes a US states GeoJSON, though its use is not demonstrated in the visible implementation.

Iris_Scatter_Plot

This scatter plot visualizes the classic Iris dataset, showing the relationship between sepal length and sepal width for three iris species, with each species represented by a distinct color. Data is loaded from a tab-separated values file using `d3.tsv`, and the visualization is rendered as SVG circles using D3 v3. Linear scales (`d3.scale.linear`) map the quantitative axes, while `d3.svg.axis` generates the bottom and left axes with labels. A color legend identifies the species categories, and all points are drawn with a fixed radius of 3.5 pixels.

Iris_Scatter_Plot

Iris scatterPlot

This example visualizes the classic Iris flower dataset, plotting sepal width against sepal length to reveal clusters by species. Each flower is a small circle, colored by species using `d3.scale.category10()`, with axis labels for the measurement units. The visualization loads tab-separated data from `iris.tsv`, uses `d3.scale.linear()` for x and y scales, and renders axes via `d3.svg.axis()`. A legend identifies the three species, while the SVG circles are positioned with `x()` and `y()` scales and filled based on the species value.

Iris scatterPlot

This scatter plot visualizes the classic Iris dataset, plotting sepal width against sepal length for three species of iris flowers. Each flower is represented as a small circle, color-coded by species (setosa, versicolor, virginica) using a categorical color scale, with a legend in the upper right. The visualization uses D3 v3 to render an SVG graphic, employing `d3.scale.linear()` for the x and y axes, `d3.svg.axis()` for the axes, and `d3.scale.category10()` for coloring the dots. The data is loaded asynchronously from a tab-separated values file via `d3.tsv()`.