Hakkahi

@Hakkahi·9 public vizzes

files

This example displays a dense scatter of geographic coordinates, plotting the sets of longitude and latitude points from a CSV file as small dots. An SVG canvas renders the points, with the visualization’s intended purpose being to reveal the underlying shape or pattern of the data—likely a coast or border—as the points are ordered sequentially. The code uses d3.select to append the SVG and relies on the D3 v4 library for basic rendering, though it does not yet map the data to visual elements. The default text label remains, awaiting replacement by the user’s implementation.

Jan 3, 2018

Loading thumbnail…

go_ndm_01

This example demonstrates smooth transitions between two map projections, Equirectangular and Natural Earth, with a red dot marking the origin [0,0] on each projection. The visualization cycles through projections every 1.5 seconds with a 750-millisecond tween, combining animated morphing of map paths with graticule and land outlines from a world-110m GeoJSON dataset. Using D3 v4, it employs `d3.geoPath`, `d3.geoGraticule`, and a custom projection tween based on `attrTween`, along with a dropdown menu to manually switch projections and pause the automatic rotation.

Dec 7, 2017

Loading thumbnail…

TP_4

A choropleth map of metropolitan France displays weekly influenza case counts by region for 2014, with a slider to navigate through the year. The visualization uses d3.geoConicConformal for map projection and d3.geoPath to render regional boundaries, with fill colors assigned via d3.scaleQuantize. A hover tooltip shows the region name and case value. Data comes from the GrippeFrance2014.csv file, which is merged with the france.json GeoJSON structure.

Dec 7, 2017

Loading thumbnail…

TP_4_v2

A choropleth map of French administrative regions displays weekly influenza case counts for 2014. A slider updates the displayed week, recoloring each region with a quantized green color scale, and hovering reveals a tooltip with the region name and count. The visualization uses D3 v4 with `d3.geoConicConformal` for projection, `d3.geoPath` for rendering, and loads region boundaries from `france.json` alongside case data from `GrippeFrance2014.csv`.

Dec 3, 2017

Loading thumbnail…

DataViz - TP4

This example shows a choropleth map of French regions colored by the total number of flu cases reported during November 2014, with hover tooltips displaying the region name and value. It uses D3 v3 with `d3.geo.conicConformal` projection and `d3.geo.path` to render the GeoJSON regions, while a quantize color scale maps aggregated values from a CSV dataset. The tooltip uses D3’s mouse events and a simple HTML div.

Nov 30, 2017

Loading thumbnail…

DataViz - TP4

A choropleth map visualizes French regional influenza case counts for November 2014, with each region filled on a blue-green color scale based on its cumulative value. The map uses D3 v3 with `d3.geo.conicConformal` and `d3.geo.path` to project and render geographic features from a GeoJSON file. Data from a CSV file is joined to the map regions by name, summing weekly columns matching the month of November. Hovering over a region reveals a tooltip with the region name and total count.

Nov 30, 2017

Loading thumbnail…

fresh block

The visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It presents four distinct area-chart modes—transparent, stacked, separated, and centered—each animated to show the same data under different spatial arrangements. Built with D3.js v4, the code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.curveBasis` to render smooth SVG paths. A legend identifies each company by color. The animation transitions between chart types, highlighting how each layout affects the perception of price trends and comparative performance.

Nov 28, 2017

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a small dataset, with interactive tooltips that reveal each point’s value and draw a dashed vertical guide down to the x-axis. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line to generate the path, and d3.json to load the data. Circles are added per data point, and mouseover and mouseout events toggle the tooltip and dash-line visibility. The labels and values are rendered as SVG text elements.

Nov 12, 2017

Loading thumbnail…

simple line chart without dataset

A simple bar chart displays ten hardcoded numeric values from an array, rendered as black-stroked white rectangles with monospace labels above them. Built with D3 v4, the example uses `d3.scaleLinear` to map positions on the x- and y-axes, appends SVG `rect` and `text` elements, and sets widths based on the data length. No external data source is loaded; the visualization serves as a minimal demonstration of binding an array to SVG shapes.

Nov 9, 2017