Skip to main content
Log in
N

NaamaNaa

@NaamaNaa·16 public vizzes

Loading thumbnail…

TP4 Dataviz_HAMIZI

A choropleth map of France displays weekly influenza case counts per region for 2014. A slider updates the visualization for each of the 52 weeks, recoloring regional polygons according to a quantitative color scale. The map uses `d3.geoConicConformal` projection and `d3.geoPath` for rendering, with a tooltip showing region name and case value on mouseover. Data comes from the CSV file `GrippeFrance2014.csv`.

Dec 9, 2017
Loading thumbnail…

TP4 DATAVIZ

A choropleth map of France colors each region according to its total reported influenza cases for 2014, using a five-step green color scale. The map is drawn with `d3.geoPath` and a `d3.geoConicConformal` projection, while case totals from the CSV file are joined to region geometries by matching region names. Regions without matching data are filled gray. The visualization is built with D3 v4 and renders static SVG paths.

Nov 30, 2017
Loading thumbnail…

fresh block

This choropleth maps weekly influenza case counts across French regions for 2014, coloring each region according to its cumulative yearly total. The visualization uses d3.geoConicConformal to project regional boundaries from a GeoJSON file and d3.scaleQuantize to assign fill colors based on data loaded from a CSV file. The code demonstrates layering geographic shapes with tabular health data through D3’s data-join method, though the current implementation only sets the path fills without explicitly binding the CSV values to the regions.

Nov 30, 2017
Loading thumbnail…

etape4

This example shows monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, animating from individual line charts into overlapping horizon graphs. The visualization uses D3.js v3 to parse CSV data, nest it by symbol, and render SVG paths with transitions. It employs d3.svg.line, d3.svg.area, and d3.time.scale to draw the series, while d3.nest and d3.timer drive the sequential animation of data drawing and chart transformation.

Nov 29, 2017
Loading thumbnail…

etape2

The visualization displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with each company’s price series separated into its own horizontal band. Animated SVG line charts draw progressively over time, while filled areas underneath each line use color to distinguish the symbols. The code uses d3.csv, d3.nest, d3.svg.line, d3.svg.area, and d3.timer to parse the data, group by symbol, and animate the rendering.

Nov 29, 2017
Loading thumbnail…

etape3

This example animates a small multiples chart of monthly stock prices for three companies, transitioning from individual line charts into a stacked area chart. The visualization sorts symbols by their maximum price and uses D3’s nest layout to group data by symbol, with a timer driving the initial drawing of lines. It then applies D3’s stack layout, area, and line generators with basis interpolation to overlay and offset the series, while SVG transitions remove the per-symbol transforms and adjust stroke opacity.

Nov 29, 2017
Loading thumbnail…

etape3

This example shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 as animated, stacked area charts. Each symbol is rendered in its own horizontal band, with a dark line tracing the price over time. The code uses d3.csv to load data, d3.nest to group by symbol, and d3.svg.area and d3.svg.line with basis interpolation to draw the shapes. A d3.timer drives the sequential reveal of data points, while d3.layout.stack computes the stacked offsets.

Nov 29, 2017
Loading thumbnail…

renduFinalTp3

This example animates a multi-series line chart of monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The visualization first draws each company’s price history as a separate line, then transitions into a stacked area chart. Using D3.js v3 and SVG, it employs `d3.svg.line`, `d3.svg.area`, `d3.layout.stack`, and `d3.timer` to orchestrate the sequential animation, with data loaded from a CSV file via `d3.csv`.

Nov 29, 2017
Loading thumbnail…

renduFinalTp3

This visualization animates monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, displaying each company’s price history as a separate small-multiple line chart. After an initial stroke-drawing animation, the view transitions into a horizon chart layout, using stacked, color-coded areas to compress the vertical scale. The code relies on D3 v3’s `d3.svg.line`, `d3.svg.area`, `d3.nest`, and `d3.timer` to process the CSV data and orchestrate the SVG transitions between the two chart types.

Nov 29, 2017
Loading thumbnail…

renduFinalTp3

This visualization animates monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, displaying each company’s price history as a separate small-multiple line chart. After an initial stroke-drawing animation, the view transitions into a horizon chart layout, using stacked, color-coded areas to compress the vertical scale. The code relies on D3 v3’s `d3.svg.line`, `d3.svg.area`, `d3.nest`, and `d3.timer` to process the CSV data and orchestrate the SVG transitions between the two chart types.

Nov 29, 2017
Loading thumbnail…

Tp2_DataViz_Hamizi_ameliore

This interactive line chart visualizes monthly values as a series of labeled circles connected by a path. Data from a local JSON file is loaded via `d3.json()`, with dates parsed using `d3.timeParse()`. A scatter plot of translucent gray circles overlays the line; hovering a circle changes its fill to red, reveals its value label, and displays a vertical dashed line. These interactions use D3 v4 selections, transitions, and time/linear scales (`d3.scaleTime()`, `d3.scaleLinear()`). The SVG rendering is produced with `d3.line()` and appended elements.

Nov 10, 2017
Loading thumbnail…

Tp2_DataViz_Hamizi

This visualization displays a monthly dataset for 2016 as a black line chart, with each data point marked by a semi-transparent gray circle. A value label and a dashed vertical guide line are hidden by default, becoming visible when hovering over a circle, which also turns red and fades in the corresponding text label. The code uses d3.json to load the data, d3.timeParse and d3.timeFormat for date handling, and d3.line with time and linear scales to generate the SVG path. Animations rely on transition().duration(500) to adjust opacity and font size during mouseover and mouseout events.

Nov 9, 2017
Loading thumbnail…

fresh block

A line chart shows seven monthly data points from January to July 2016, with gray circles marking each value, a black polyline connecting them, and a large label displaying the final value. The visualization uses d3.v4 with `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Pointers are rendered as SVG circles that turn red on mouseover and fade back to gray over 500 milliseconds using `transition.duration`. Data is loaded from an embedded `dataset.json` file.

Nov 9, 2017
Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes the change in a single numeric value over seven consecutive months, using data from a local JSON file. The chart draws a black line with no fill, labels each month along the x-axis, and displays the last value in large text. Built with D3 v4, the visualization uses d3.scaleTime, d3.scaleLinear, d3.line, and d3.json to parse dates, scale axes, generate the path, and load data, rendering the result as an SVG.

Nov 8, 2017
Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes the change in a single numeric value over seven consecutive months, using data from a local JSON file. The chart draws a black line with no fill, labels each month along the x-axis, and displays the last value in large text. Built with D3 v4, the visualization uses d3.scaleTime, d3.scaleLinear, d3.line, and d3.json to parse dates, scale axes, generate the path, and load data, rendering the result as an SVG.

Nov 8, 2017
Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes the change in a single numeric value over seven consecutive months, using data from a local JSON file. The chart draws a black line with no fill, labels each month along the x-axis, and displays the last value in large text. Built with D3 v4, the visualization uses d3.scaleTime, d3.scaleLinear, d3.line, and d3.json to parse dates, scale axes, generate the path, and load data, rendering the result as an SVG.

Nov 8, 2017