ElisaDnr

Line Chart with pie chart json

This example shows the number of traffic accidents per 15-minute time interval, with each data point rendered as a clickable circle. Clicking a circle displays a pie chart of accident severity distributions in a separate div, while the selected point is highlighted in red. The line chart uses d3-dsv for JSON parsing, d3-scale for time and linear scales, d3-axis for axes, and d3-shape for the line path. The pie chart is generated and removed dynamically on each click.

Jan 9, 2018

Pie chart for line chart

This example overlays a pie chart on top of a line chart, showing the distribution of accident causes (categories nb_0 through nb_9) at a selected time, specifically 0015. The pie chart is generated from a local JSON file, `trajet_accident.json`, and rendered using D3 v4’s `d3.arc`, `d3.pie`, and `d3.scaleOrdinal` APIs. The SVG is appended to a dedicated `#pie` div, positioned absolutely over the chart. Values are displayed as percentages with two decimal places, omitting zero-value slices. The chart uses conventional margins and standard D3 utilities like `d3.json` for asynchronous data loading.

Jan 9, 2018

Line Chart

This line chart displays the number of road accidents per hour of the day, based on data from a CSV file of accident records. The x-axis encodes time in 15-minute increments over a 24-hour period, while the y-axis shows the accident count. The visualization uses d3.csv to parse the data, d3.timeParse to convert hour strings, and d3.scaleTime, d3.scaleLinear, and d3.line to render the SVG path with a steelblue stroke. The counts are aggregated by sorting and grouping hour values.

Monday-based Calendar

An annual heatmap displays traffic accident counts for each day of 2016, arranged in a single calendar grid. The visualization uses a color scale to encode the number of accidents per day, with the year laid out in columns of weeks and rows for days of the week. The code adapts a D3 calendar view to start weeks on Monday, using the `d3.time.format` function with the `%W` directive to compute week numbers. It loads daily accident data from a CSV file and renders the calendar as SVG, with month outlines drawn via the `monthPath` function.

France Map

A map of France displays each department as a white polygon with black borders, using a conic conformal projection. The visualization renders the GeoJSON data from `departement.json` with D3 v4, employing `d3.geoPath` and `d3.geoConicConformal` to project the geographic coordinates. The code initializes an SVG and appends a `path` element for every feature in the dataset, setting fill and stroke attributes directly.

France Map

A choropleth-style map of France displays each department as a white polygon with black outlines, based on GeoJSON data from a gist. The visualization uses D3 v3’s `d3.geo.path()` with a `d3.geo.conicConformal` projection, centered on the country and scaled to fit a 600×600 SVG canvas. Departments are loaded from `departments.json` and rendered as SVG `<path>` elements, with no data encoding beyond the geographical boundaries.

DV project

This interactive map visualizes traffic accident data from a 2016 French CSV file. It uses Leaflet to display OpenStreetMap tiles as the base layer, with accident locations plotted as markers. The map employs Leaflet's MarkerCluster plugin to dynamically group nearby accident points, visually representing density with colored clusters (green, yellow, and red) based on the number of incidents in an area. The visualization is built with D3.js (v4) for data loading and parsing, while the map interface and clustering functionality are handled by Leaflet and its markercluster extension.

DV project

This visualization displays road traffic accidents in France during 2016 using an interactive Leaflet map. Accident locations are plotted as markers that dynamically cluster based on zoom level, with cluster sizes indicated by color-coded circles. The map includes a semi-transparent mask layer highlighting the French border polygon. The code uses Leaflet with the Leaflet.markercluster plugin for clustering, D3.js (v4) to load and parse the CSV data, and integrates a Vue.js framework. Accident coordinates are validated against the country boundary before being added to the cluster group.

DV project

An interactive map displays traffic accident locations across France, using color-coded markers to represent the density of incidents in clustered groups. The visualization leverages the Leaflet mapping library alongside D3.js to load and parse a CSV file containing accident characteristics, including coordinates. A custom Leaflet extension creates dynamic clusters that change size and color based on the number of accidents in a given area. The map also includes a polygon overlay of France to visually confine the data points to the country's borders.

Dec 29, 2017

D3_Project_BrancheElisa

A French road-accident map visualizes the geographic distribution of 2016 incidents. Using OpenStreetMap tiles as the base layer, the application plots each accident as a marker, and the Leaflet.markercluster library groups nearby markers into color-coded clusters that animate their size and position as the user zooms. The D3.v4 `d3.csv` function parses the local `caracteristiques_2016.csv` data file, extracting latitude and longitude coordinates to place individual accident points on the interactive map.

Dec 29, 2017

DV project

This visualization displays road accident locations in France for 2016 on an interactive Leaflet map. The code plots markers from a CSV dataset containing latitude and longitude coordinates, using the PruneCluster library to cluster nearby points for performance. D3.js handles CSV parsing, while a Leaflet mask layer outlines the country boundary. The map supports zooming and panning with OpenStreetMap tiles, allowing users to explore accident density across regions and switch between clustered and individual marker views. The animation refers to the responsive map interactions as the view changes.

Dec 28, 2017

TP4

A choropleth map of France displays regional influenza consultation data for 2014, with each region colored on a green sequential scale according to weekly or monthly case counts. The visualization uses D3 v4 with `d3.geoConicConformal`, `d3.geoPath`, and `d3.scaleQuantize` to render SVG paths from the `regionsFrance.json` GeoJSON file, while a CSV file provides the data. Hovering over a region reveals a tooltip with its value.

Dec 10, 2017

Gist 0562486f752206b124480873ad868676

A choropleth map of France colors each region according to its total reported flu cases across 2014, using a green sequential scale to show geographic variation in incidence. The visualization loads weekly case counts from a CSV file and joins them to regional polygons from a GeoJSON file by matching region names. D3 v4’s `d3.geoConicConformal` projection and `d3.geoPath` render the map, while a `d3.scaleQuantize` maps summed annual values to five color classes. Regions lacking data appear gray.

Dec 6, 2017

Gist 496f20b47774ec679ab5dd48beff9d7e

This example maps French regional data from a CSV file onto a geographic outline of France. It uses a conic conformal projection and a quantized color scale to shade each region according to a numeric value. The visualization loads GeoJSON topology for the region boundaries and joins it with the CSV data, filling regions with a five-step green color ramp, while regions without data appear gray. The code relies on D3 v4’s `d3.geoConformal`, `d3.geoPath`, `d3.scaleQuantize`, and CSV/JSON loading functions.

Dec 5, 2017

TP4_France

A choropleth map of France colors each region by the total reported influenza cases for 2014, using a quantized green color scale. The visualization reads regional totals from a CSV file and joins them to geographic features from a local GeoJSON file via `d3.csv` and `d3.json`. D3 v4’s `d3.geoConicConformal` projection and `d3.geoPath` render the map, while `d3.scaleQuantize` maps data values to fill colors, with missing regions shown in gray.

Nov 30, 2017

TP3_DataViz_Area

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using overlapping area charts and line paths. The code nests the CSV data by symbol, parses dates with `d3.timeParse`, and scales time and price with `d3.scaleTime` and `d3.scaleLinear`. It renders semi-transparent filled areas and stroked lines using `d3.area` with a basis curve, then adds axes via `d3.axisBottom` and `d3.axisLeft`, plus a color-coded legend based on `d3.scaleOrdinal`.

Nov 29, 2017

TP3_DataViz_SmallMulti

This example shows monthly stock price trends for Microsoft, Amazon, and IBM from 2000 to 2010 using small multiples, with one SVG chart per symbol. Each chart displays a pink area path and a black line, with the y-axis scaled independently based on each symbol’s maximum price. The code uses d3.csv to load data, d3.nest to group by symbol, and d3.area and d3.line with d3.scaleTime and d3.scaleLinear. The color of each area is selected from a hardcoded array, demonstrating per-chart styling.

Nov 29, 2017

TP3_DataViz_Steam

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using multi-line chart. Each company’s price series is drawn as a separate colored line using D3 v4’s `d3.line` with a basis curve, while the x-axis uses `d3.scaleTime` and the y-axis uses `d3.scaleLinear`. The dataset is loaded via `d3.text` and parsed with a custom comma delimiter, then nested by stock symbol using `d3.nest`. A legend is generated from the ordinal color scale’s domain, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

Nov 29, 2017

multiple line chart

This multi-line chart visualizes stock data over time, plotting a series of data points connected by lines and displaying corresponding values. Built with D3.js v4, the visualization uses SVG for rendering and includes animated transitions on mouseover—circles change color and trigger a tooltip plus a dashed guide line. The chart employs `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and processes data loaded from a JSON file with `d3.json` and `d3.dsvFormat` parsing.

Nov 23, 2017

simple line chart from dataset _ Final version

This example shows a monthly time series of twelve data points from a local dataset, with a single black polyline connecting values, labeled x-axis dates, and a large final-value annotation. It also adds light-gray circular markers that turn red on hover, displaying the current value and a dashed vertical guide line. Built with D3 v4, it uses `d3.scaleTime` for the date axis, `d3.scaleLinear` for values, `d3.line` to generate the path, and SVG elements rendered via the code. The dataset is loaded with `d3.json` from a static file, and all interaction logic resides in `mouseover` and `mouseout` event handlers.

Nov 15, 2017

simple line chart from dataset

A simple SVG line chart displays seven monthly data points from a local JSON dataset, plotting date against value. The D3 v4 code uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Circles mark each point, with hover effects changing their color to red and showing the same value label already displayed above each dot. The final value appears in larger text at the line’s end, while month labels sit below the chart.

Nov 14, 2017

simple line chart from dataset

This simple line chart displays seven monthly data points from a JSON dataset, plotting values over time. Built with D3 v4, it uses an SVG rendering with `d3.scaleTime` and `d3.scaleLinear` to map dates and values, and `d3.line` to draw the path. Circles mark each point, with mouseover interactions that highlight a point and show its value. The chart includes a date label below each point and displays the final value in large text near the line's end.

Nov 14, 2017

simple line chart from dataset

This simple line chart visualizes a small time series dataset containing seven monthly values from January to July 2016. The chart displays a black polyline connecting labeled data points, with each point marked by a circle and the final value annotated numerically. Built with D3 v4, the visualization uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to construct the plot from data loaded via `d3.json`. The SVG rendering includes monospace labels for dates below the chart and a larger value label offset to the right of the last point.

Nov 14, 2017

simple bar chat dataset

This example shows a simple bar chart constructed from a semicolon-delimited CSV dataset loaded via `d3.text` and parsed with `d3.dsvFormat`. The SVG renders category labels (A–J) as text elements, but no rectangles are drawn, so the chart remains incomplete. Linear scales (`d3.scaleLinear`) set the x and y domains based on data length and maximum value, though only the y-axis domain is applied. The code uses D3 v4 and a monospace font for labels, with axes omitted.

simple bar chat with interaction

Ten labeled bars display numeric values in a simple SVG bar chart. Hovering a bar turns it red and enlarges its corresponding text label; moving the mouse out triggers a 500-millisecond transition restoring the original fill and font size. The example uses D3 v4 with `d3.scaleLinear` for positioning, `d3.select` and `.on("mouseover")`/`.on("mouseout")` for interaction, and `.transition().duration()` to animate the visual feedback. The chart is built from a static array of ten numbers.

simple line chart without dataset

A simple bar chart displays an array of sixteen numeric values, rendered as vertical hotpink rectangles with grey outlines. The chart is built with D3 v4, using `d3.select` to create an SVG canvas and `d3.scaleLinear` to map data values to bar heights. Bars are positioned on the x-axis by index, with no dataset file—the numbers are hardcoded in the script. The visualization demonstrates basic D3 bar-chart construction without external data loading.

simple bar chat dataset

A simple bar chart displays a static dataset of eleven named values, rendered as outlined rectangles with monospaced labels below each bar. The visualization loads a semicolon-delimited CSV file containing name-value pairs and maps the values to bar heights using linear scales. Built with D3 v4, the code parses the dataset with `d3.dsvFormat`, computes the maximum value to set the y-domain, and appends SVG `text` and `rect` elements to the document body. The bars are positioned with translated groups, and both axes are implicit rather than explicitly drawn.

simple bar chat dataset

A simple bar chart displays categorical values from a semicolon-delimited CSV dataset, labeling each bar with its name. The visualization uses D3 v4 to load the external dataset.csv file via `d3.text` and parse it with `d3.dsvFormat`, then applies `d3.scaleLinear` for both the x and y axes. Bars are rendered as plain SVG rectangles with black outlines but no fill, positioned using translated groups. The chart intentionally avoids specifying a domain until the data loads, demonstrating dynamic scaling based on the parsed values.