fkara09

@fkara09·7 public vizzes

Fork of Card D3

This map of Europe shows the most popular music genre in each country, with genre indicated by colored dots and a legend. It uses D3 v4 to render the map with `d3.geoMercator` and `d3.geoPath` from GeoJSON data, projecting country centroids to position the circles. Hovering over a circle displays a tooltip with the country name and genre. The map supports zooming and panning via `d3.zoom`, while the legend and tooltip are built with D3 selections and SVG.

Nov 30, 2022

Loading thumbnail…

Untitled

A blank 600 by 600 SVG canvas is appended to the page, serving as the entire visualization with no data or shapes drawn. The code imports `select` and `json` from D3 v5, but only `select` is used to create the empty SVG container. No further rendering, data loading, or interaction occurs, leaving the visualization as an empty white space. The stylesheet defines a large centered message style, but that element is never created in the HTML or JavaScript.

Nov 25, 2022

Loading thumbnail…

dboard

The dashboard displays four synchronized visualizations of retail sales data from a CSV file: a US map with geographic projections, a bar chart, a scatter plot, and a pie chart. Built with Vue and D3 v6, it uses `d3.geoAlbersUsa` and `d3.geoPath` for the map, `d3.pie` and `d3.arc` for the pie, and `d3.scaleTime` for the scatter plot. All charts feature animated transitions and interactive tooltips showing customer and product details.

Oct 10, 2022

Loading thumbnail…

Choropleth map

This choropleth map displays global population data by country, with a threshold color scale using `d3.scaleThreshold` and `d3.schemeBlues`. The example loads world GeoJSON topology and population CSV data via `d3.json` and `d3.csv`, rendering the map with `d3.geoPath` and a Mercator projection. Interactive buttons allow switching between music genres, though the map itself does not respond to these selections. The visualization uses D3 v4 and SVG rendering within a 400x300 viewport.

Sep 28, 2022

Loading thumbnail…

Fork of barGraph

This bar chart displays the 2022 population for each country, sorted alphabetically on the x-axis with population values on the y-axis. It uses D3 v5 (d3.scaleBand, d3.scaleLinear, d3.axisLeft, d3.axisBottom) to render SVG rectangles, with a tooltip showing country name and population on hover. A button triggers `orderCountry()` to re-sort the bars in descending population order. Data comes from a local CSV file.

Sep 26, 2022

Loading thumbnail…

Fork of barGraph

This example loads a CSV file of global population data and renders placeholder rectangles for each row. The code uses `d3.csv` to parse the data, logs each country’s name and 2022 population to the console, and appends empty, black-outlined squares to an SVG canvas. The rectangles do not encode any data values; the visualization demonstrates the basic workflow of loading and iterating over external data with D3, leaving data binding and scaling unimplemented.

Sep 19, 2022

Loading thumbnail…

Fork of MIAGE base

This example displays three colored circles and a rectangle in an SVG canvas. A green circle responds to mouseover and mouseout events by changing its fill, while the red and blue circles change color on hover via CSS. Clicking the rectangle triggers a transition that moves the green circle using chained `transition` and `attr` methods. The code imports D3 v5 functions like `select`, and a local ES6 module exports a custom message displayed on the page.

Sep 19, 2022