Skip to main content
Log in
T

TanguideCrevoisier

@TanguideCrevoisier·14 public vizzes

Loading thumbnail…

test

This example shows the spread of influenza across French regions during 2014 using a choropleth map. It displays the number of reported cases per region at a specific point in time, with a tooltip revealing the region name on hover. The code uses d3.json to load a GeoJSON file, d3.csv for the case data, and d3.geoPath with a d3.geoConicConformal projection to render the SVG paths. Regions are colored using d3.scale, and the monitoring data is joined to the geographic features for the fill.

Dec 13, 2017
Loading thumbnail…

test

This visualization maps weekly influenza case counts across French regions for 2014. A choropleth of the country uses color to encode the health data, with hover interactions revealing region names via a tooltip. The data is loaded from a CSV and joined to GeoJSON from `regions.json`, then drawn as SVG paths using `d3.geoPath` with a `geoConicConformal` projection, all within D3 v4.

Dec 13, 2017
Loading thumbnail…

tp_grippe

This visualization shows weekly influenza case counts across French regions during 2014, using a choropleth map colored by intensity and a slider to animate through the 52 weeks of the year. The map is rendered with `d3.geoPath` and a `d3.geoConicConformal` projection, with a quantize color scale applied to the weekly values. Mouseover tooltips display each region’s name and case count for the selected week. The data comes from a CSV file, and the region geometries are loaded from a GeoJSON file.

Dec 10, 2017
Loading thumbnail…

tp3

This visualization is a choropleth map of France showing the regional incidence of influenza for each week of 2014. A slider controls the displayed week, updating the color of each region based on the case count, with a tooltip revealing the region's name and exact value on hover. The map is rendered using the `d3.geoConicConformal` projection and `d3.geoPath`. The color scale is defined with `d3.scaleQuantize`. The data is loaded from a CSV file and merged with geographic coordinates from a local GeoJSON file.

Dec 6, 2017
Loading thumbnail…

Gist 853e8de9a35719af68b31d9c7f13ef77

This example displays a map of French regions using a conic conformal projection, rendering GeoJSON polygon features as SVG paths. The visualization loads geographic data from a local `regions.json` file and draws each feature with `d3.geoPath` and `d3.geoConicConformal` in D3 v4. The code focuses solely on projecting and displaying the regional boundaries without additional interaction or styling.

Nov 30, 2017
Loading thumbnail…

loading multiple stock data from dataset

The chart displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010 using multiple colored lines. Each line represents a company, with a legend identifying each series. The visualization uses D3.js v4 with SVG rendering, employing `d3.nest()` to group the CSV data by symbol and `d3.line()` to draw the paths. Axes are generated with `d3.axisBottom()` and `d3.axisLeft()`, while colors come from `d3.schemeCategory10`. The dataset is loaded via `d3.text()` and parsed with `d3.dsvFormat()`.

Nov 29, 2017
Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart that plots monthly values across twelve dates, with circles marking each data point and a dashed vertical line appearing on hover. The chart uses D3 v4 with time-series data, parsing dates with `d3.timeParse` and scaling them with `d3.scaleTime` and `d3.scaleLinear`. It renders an SVG path for the line, adds tooltips via circle elements, and includes labels for each month plus the final value. Data comes from a local JSON file, and hover interactions change circle colors and trigger a dynamic guide line.

Nov 15, 2017
Loading thumbnail…

tp a rendre

This chart displays a monthly value trend from January to December 2016, with data points connected by a black line and labeled with abbreviated month names. The Y-axis scale is derived from the data's value range (0 to 60), while the final data point's numeric value is prominently displayed at the line's end. The visualization is built with D3 v4, using `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Data is loaded from a local JSON file via `d3.json`, rendered as SVG, and includes custom monospaced text labels.

Nov 9, 2017
Loading thumbnail…

simple line chart without dataset

This example displays a simple bar chart constructed from a hardcoded array of ten numeric values. It first renders a set of static white rectangles with black strokes, then uses `d3.scaleLinear` to map data values to pixel heights for a second set of bars, with corresponding text labels placed above each bar. The visualization is built with D3 v4 and rendered as SVG elements, created directly by appending `rect` and `text` nodes to the document.

Nov 9, 2017
Loading thumbnail…

simple bar chat with interaction

A simple bar chart displays ten numeric values as white rectangles with black outlines on an SVG canvas, with corresponding monospace labels above each bar. Hovering over a bar turns it red and enlarges its label, while moving the mouse away triggers a 500-millisecond transition back to the original colors and font sizes. The visualization uses d3.v4 with linear scales for positioning, and handles interactivity through `selection.on("mouseover")` and `selection.on("mouseout")` methods.

Nov 9, 2017
Loading thumbnail…

simple bar chat dataset

Ten bars labeled A through J display values loaded from a semicolon-delimited CSV via `d3.dsvFormat`, with y-axis scaling based on the maximum value. Animated updates occur every 500 milliseconds, randomizing values and transitioning bar heights and positions using `.transition().duration(500)` with staggered delays. The SVG bar chart uses linear scales for both axes and renders with black-outlined, unfilled rectangles.

Nov 9, 2017
Loading thumbnail…

D3 bar chart without data-binding

A D3 v4 bar chart renders a static array of ten numeric values as outlined rectangles. The SVG visualization maps each data point to a bar’s height using a linear scale (`d3.scaleLinear`) and positions bars horizontally with fixed spacing. Instead of relying on data-binding techniques like `enter()` and `update()`, the code appends rectangles directly via `svg.selectAll("rect").data(data).enter().append("rect")`, setting `x`, `y`, and `height` attributes with inline functions. The chart employs an SVG container and CSS-styled strokes, demonstrating a minimal, non-reactive approach to bar generation.

Nov 9, 2017
Loading thumbnail…

fresh block with data binding

A fresh block with data binding renders a single line of SVG text at alternating vertical offsets. The example demonstrates D3.js v4’s data-binding workflow, where an array of one string is passed to `svg.selectAll("text")` and then appended via `.enter().append("text")`, with each element positioned using an inline `transform` attribute that shifts the y-coordinate based on the item’s index. The text itself is set through the `.text()` callback, showing how data drives both position and content.

Nov 9, 2017
Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart plotting seven monthly data points from a JSON dataset, with labeled x-axis dates and a final value annotation. The SVG rendering uses d3.v4 with a time scale for the x-axis (`d3.scaleTime`), a linear scale for the y-axis (`d3.scaleLinear`), and a `d3.line` generator to create the path. Data is parsed from `dataset.json` using `d3.timeParse` for date formatting, and the line is styled with a black stroke via CSS.

Nov 9, 2017