Skip to main content
Log in
A

AminaSGitHub

@AminaSGitHub·26 public vizzes

Loading thumbnail…

exploration&Visu

This visualization uses D3 v4’s `d3.histogram` and `d3.scaleBand` to display crime counts as bar charts, with hardcoded arrays for daily and monthly totals. The SVG chart is generated via a reusable `chart` function, which sets up linear scales and an axis, then binds data to rectangle elements for bars. The code includes category labels for crime types and weekdays, but no external data file. Rendering is purely SVG with styled bars and axes.

Feb 10, 2018
Loading thumbnail…

Hist : Comaraison Rf vs Xgb

Two bar charts compare feature importance values for Random Forest and XGBoost models across 17 variables, with each chart labeled in French. Hovering over a bar in one chart highlights the corresponding bar in the other and displays a tooltip with the variable name and importance value. The visualization uses d3.v4 with SVG rendering, d3.scaleLinear for axes, and mouseover/mouseout events with transitions to animate the highlight effect. The data arrays are hardcoded in the script.

Feb 10, 2018
Loading thumbnail…

Hist : Comaraison Rf vs Xgb

This visualization compares feature importances from two machine learning models, Random Forest and XGBoost, using side-by-side histograms rendered as SVG bar charts with d3.v4. Each bar corresponds to a feature (e.g., Latitude, Beat, Description) and its height reflects the model’s importance score. Hovering over a bar in either chart highlights the matching bar in the other chart and displays a tooltip with the feature name and value. The code uses d3.scaleLinear for positioning, d3 selections for bar creation, and mouseover/mouseout events with transitions for interaction.

Feb 10, 2018
Loading thumbnail…

Vizu_Part1_Map

This interactive map visualizes regional TER train flow quality across France from 2013 to 2017. Users adjust two sliders to select a specific month and year, and the map updates its choropleth coloring accordingly, with a legend and hover tooltips showing precise values. The visualization uses D3 v4's `d3.geoConicConformal` projection and `d3.geoPath` to render the regions, while a color scale (`d3.scaleQuantize`) encodes the data from the provided CSV file.

Jan 9, 2018
Loading thumbnail…

Visu_Part3

This visualization shows unemployment rates across French regions from 2013 to 2017 as animated multi-line charts. Users can toggle between viewing all regions at once or selecting individual regions via radio buttons and legend clicks. The D3 v4 code loads CSV data, nests values by region, and draws SVG paths using `d3.line` with color-coded strokes. Legend text elements respond to clicks to toggle line opacity, while animated transitions update the display based on user selection.

Jan 9, 2018
Loading thumbnail…

Viz_Part2_Compare

This example uses an interactive choropleth map of French regions to compare monthly traffic data from the TER regional rail network across two selectable years (2013–2017). The visualization features two side-by-side maps, each with separate sliders for year and month, allowing direct visual comparison through the shared color scale. The maps are drawn with `d3.geoPath` and a `d3.geoConicConformal` projection, while color values are mapped using `d3.scaleQuantize`. Data is loaded from a CSV file containing monthly statistics per region. Hovering over a region reveals a tooltip with its name and value.

Jan 8, 2018
Loading thumbnail…

Dorling Cartogram

This interactive Dotting-style cartogram displays monthly regional train delays across French administrative regions from 2013 to 2017. A Dorling-style map replaces geographic polygons with circles sized by delay magnitude, with slider inputs to select month, year, and toggle between map and node views. The visualization uses d3.csv and d3.json to load data, d3.geoPath with a geoConicConformal projection, d3.scaleSqrt for circle radii, and d3.scaleQuantize for color encoding. Hovering reveals tooltips with precise values.

Jan 8, 2018
Loading thumbnail…

Dorling Cartogram

A Dorling cartogram of French regional rail traffic displays monthly ridership data from 2013 to 2017. Each region is represented by a circle positioned near its geographic origin, with circle size and fill color encoding passenger counts. Interactive sliders let viewers select a year and month. The visualization uses `d3.forceSimulation` for non-overlapping circle placement and a `d3.geoConicConformal` projection for initial locality. It merges CSV travel statistics for regions with GeoJSON outlines via `d3.csv` and `d3.json`.

Jan 8, 2018
Loading thumbnail…

DataViz_Tp2_Meziani_Amina

A line chart displays twelve monthly data points from a JSON dataset, plotting values over time from January to December 2016. The SVG visualization uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.timeParse` to render the line and axes. Semi-transparent circles sit on each point; hovering a circle animates its fill to red, reveals the corresponding numeric value, and shows a dashed vertical guide line, with `transition.duration` and `style` opacity changes handling the effects.

Dec 27, 2017
Loading thumbnail…

projet_DataViz

The visualization shows the evolution of TER (regional express train) traffic quality across French regions from 2013 to 2017, mapping monthly percentage values onto a choropleth of France. The view is updated via a slider that changes the displayed month. The code uses D3 v4 with `d3.geoConicConformal` for the map projection, `d3.geoPath` to render region outlines, and a quantized color scale. Region values are loaded from the CSV file containing a row per region and columns for each month, then joined to the GeoJSON regions by matching region names.

Dec 25, 2017
Loading thumbnail…

DV4

This interactive choropleth map displays weekly influenza case counts across French regions for 2014. A slider lets viewers step through 52 weeks, updating the color of each region via a quantized scale based on the current week’s data. The visualization uses D3 v4 with `d3.geoConicConformal` for the map projection and `d3.geoPath` to render GeoJSON regions, while a tooltip shows exact values on hover. Data comes from a CSV file with per-region weekly counts, which is merged with regional boundaries from a separate JSON file.

Dec 8, 2017
Loading thumbnail…

[DataViz] TP4 Bonus

This interactive choropleth map shows the weekly incidence of influenza across French administrative regions for 2014. A slider allows the viewer to navigate through the 52 weeks of the dataset, updating the map’s color scale and region values. The visualization uses D3 v4 with `d3.geoConicConformal` for the map projection, `d3.geoPath` for rendering the GeoJSON polygons, and a quantitative color scale from green to dark green. Data is loaded from a CSV file and merged with regional geometry, while a tooltip reveals the exact weekly count on hover.

Dec 5, 2017
Loading thumbnail…

[DataViz] TP4

A choropleth map of French regions colors each area by the total number of flu cases reported in 2014, using a quantized color scale. The visualization also displays the aggregate count of cases for November in a text box. A slider input allows navigation through the weeks, and hovering over a region reveals a tooltip with its name and annual total. The map uses `d3.geoConicConformal` for projection and `d3.geoPath` to render the shapes, with data from the CSV file merged into the GeoJSON features.

Dec 5, 2017
Loading thumbnail…

[DataViz] TP4 Bonus

A choropleth map of French regions colors each region according to weekly influenza case counts from GrippeFrance2014.csv, with a slider to navigate through the 52 weeks of 2014. The visualization uses d3.geoConicConformal projection and d3.geoPath to render the regions, with fill colors assigned by a d3.scaleQuantize based on each region's yearly sum. A tooltip showing the region name appears on hover via mouseover events.

Dec 3, 2017
Loading thumbnail…

V3_tp4_DataViz_V3

This visualization is a choropleth map of France showing influenza cases across administrative regions. It displays the spread and intensity of the disease over time, with a slider allowing viewers to step through weekly data. The map uses a five-color sequential scale, from light green to dark green, to represent the number of reported cases. The visualization is built with D3.js v3, using `d3.geo` for map projection and path rendering. It reads geographic data from a GeoJSON file (`region.txt`) and time-series data from CSV files (`GrippeFrance2014.csv`). A `d3.scale.threshold` maps case counts to colors.

Nov 30, 2017
Loading thumbnail…

Tp3_DV_Rendu4

This visualization shows monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, using layered area charts to compare trends across companies. Each symbol is displayed in its own horizontal band, with semi-transparent filled areas colored by company. The code uses D3 v3’s `d3.svg.area()`, `d3.svg.line()`, and `d3.time.scale()` to draw the SVG paths, while `d3.nest()` groups the CSV data by symbol. The chart sorts symbols by maximum price and applies basis interpolation for smooth curves.

Nov 29, 2017
Loading thumbnail…

Tp3_DV_Rendu5

This visualization compares the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010, showing both individual time series and a stacked area chart. The animation transitions through three views: individual line charts, horizon-style areas for each symbol, and finally a stacked layout. The code uses D3 v3 with SVG rendering, employing d3.svg.line, d3.svg.area, and d3.layout.stack for the layouts, while d3.time.scale handles the date axis. Data comes from a CSV file grouped by stock symbol via d3.nest.

Nov 29, 2017
Loading thumbnail…

Tp3_DV_Rendu3

This interactive visualization displays the historical stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010. It uses a combination of individual line charts and a stacked area chart to compare the price trends and relative magnitudes across the three companies. The visualization is rendered as an SVG using D3 version 3, with animated transitions that convert between the line and stacked area representations. The code leverages D3’s time and linear scales, category color palette, and layout stack API to process and display the data from the provided CSV file.

Nov 29, 2017
Loading thumbnail…

Tp3_DV_Rendu2

This visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It displays multiple small multiples, each showing a company’s price trend as a smooth line chart, with the data loaded from a CSV file. Using D3 v3, the code groups data by symbol via `d3.nest`, sorts companies by maximum price, and animates the drawing of each line progressively with a timer. An area fill, rendered via `d3.svg.area`, is added beneath each line, and the axis and scaling are computed dynamically per company.

Nov 29, 2017
Loading thumbnail…

smallmultiplesStep2

This example shows stock price trends for multiple companies as small multiples, with each symbol rendered as an individual sparkline in its own panel. The visualization uses D3 v3 to load CSV data, nest it by company, and draw both line and area paths. The animation is driven by a `d3.timer` that reveals the data progressively. The code uses `d3.svg.line`, `d3.svg.area`, and `d3.time.scale` to map dates and prices, with each panel scaled independently to its own maximum price.

Nov 29, 2017
Loading thumbnail…

step1

This example shows a small-multiple time series chart tracking the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. Three small line charts, one per company, are stacked vertically, each scaled to its own maximum price. The visualization uses D3 v3’s `d3.time.scale` for the date axis and `d3.scale.linear` for price, with `d3.svg.area` for filling under the lines and `d3.nest` to group the data by company. The data comes from a CSV file with symbol, date, and price columns.

Nov 29, 2017
Loading thumbnail…

streamGraphStep4

The visualization animates the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 as a streamgraph. It begins with each stock plotted as a separate line, then transitions into layered, stacked areas that overlap to show cumulative price trends. The code uses `d3.svg.line`, `d3.svg.area`, and `d3.scale.linear` to render the paths, with `d3.timer` driving the animation and `d3.select` manipulating SVG elements. The y-axis domain adjusts per symbol initially, then scales to the maximum price across all stocks.

Nov 29, 2017
Loading thumbnail…

StackedAreaChartStep3

This example animates a stacked area chart showing monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The visualization first draws individual price lines by symbol, then transitions to layered areas that stack cumulatively using the `d3.layout.stack` API. It utilizes D3 v3 with SVG rendering and a `d3.timer` for animation, while color-coded areas represent each company. The data comes from a CSV file parsed with `d3.csv` and date formatting via `d3.time.format`.

Nov 29, 2017
Loading thumbnail…

TP3_Data_Viz

This visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, using a small-multiple layout of line charts. Each symbol is sorted by its maximum price and displayed in its own row, with a shared time axis and per-symbol price scales. The code uses d3.csv to load the dataset, d3.nest to group records by symbol, and d3.svg.line and d3.svg.area to render the paths. Animated transitions, driven by d3.timer and transition methods, first draw the lines progressively and then transform them into horizon-style area charts, moving labels to the right edge.

Nov 29, 2017
Loading thumbnail…

areaChart

This example shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, displayed as small multiple area charts. The visualization initially draws simple line paths, then animates a transition into horizon charts, where each series is stacked vertically with an offset baseline. The code uses D3 v3 with SVG rendering, employing `d3.svg.line` and `d3.svg.area` generators, `d3.nest` to group data by symbol, and `d3.time.scale` for the date axis. Data comes from a CSV file with a `symbol,date,price` structure.

Nov 29, 2017
Loading thumbnail…

fresh block

This example shows a monthly time series as a simple line chart with circular markers for each data point, drawn using SVG. D3 v4 scales, a time parser, and a line generator map the dataset’s dates and values to positions. On mouseover, the code highlights the hovered circle in red, reveals its dashed vertical guide, and displays its numeric value with a font-size transition; mouseout reverses the effect. The data comes from a local JSON file, and all interactions rely on D3 selections and transitions.

Nov 25, 2017