LauranJade

@LauranJade·6 public vizzes

Fork of map exemple

This example shows a world map where each country is colored according to its population, using a threshold color scale and the D3.js library. The map uses a Mercator projection via `d3.geoMercator`, with country boundaries drawn using `d3.geoPath` from TopoJSON data. Hovering over a country triggers a transition that highlights it and dims others, while the underlying data comes from a CSV file. The code relies on `d3.queue` to load external data and uses `d3.scaleThreshold` with `d3.schemeBlues` for the color encoding.

Dec 3, 2022

Loading thumbnail…

TD2 - dboard

This dashboard visualizes Superstore sales data across four coordinated SVG plots. A donut chart displays sales by sub-category with hover tooltips, while a scatter plot maps order dates against sales amounts, colored by sub-category. Additional plots include a bar chart and a U.S. map using `d3.geoAlbersUsa` and `d3.geoPath`. Built with Vue and D3 v6, the visualization uses `d3.pie`, `d3.arc`, `d3.scaleTime`, and transitions to animate axes and marks. Data comes from the included `data.csv`, with customer and product details shown on mouseover.

Dec 2, 2022

Loading thumbnail…

Fork of MIAGE base pour laura

This example demonstrates interactive circles and rectangles within an SVG canvas using D3 v5. A group of three colored circles (green, blue, red) responds to mouseover events by turning yellow and using D3 transitions to animate to random positions. Clicking a black rectangle triggers a series of chained transitions that move the red circle along a defined path. The visualization also includes two additional concentric circles that relocate on mouseover. The code imports the D3 library via UNPKG and uses D3 selection, attribute manipulation, and transition methods for all animations.

Nov 13, 2022

Loading thumbnail…

Laura

This example presents a population bar chart for countries around the world, using the 2022 Population data from the included CSV file. The visualization uses a qualitative scale on the x-axis for country names and a linear scale on the y-axis for population counts, rendering bars as SVG rectangles. Built with D3 v5, it uses `scaleBand` and `scaleLinear` for scales, and `axisLeft` and `axisBottom` for the chart's axes. The chart's tooltip, which displays country and population details on mouseover, is implemented with D3's `select` function and a styled HTML div.

Nov 13, 2022

Loading thumbnail…

TD1

Three circles—green, blue, and red—sit in a row on a gray SVG canvas. Clicking a rectangle starts a two-second animated transition that moves the red circle diagonally downward, followed by a second transition returning it horizontally. The red circle also turns black on mouseover, while the green circle responds to hover via a CSS class. Built with D3 v5, the example demonstrates selections, event handlers, and chained `transition.attr` calls, with no external data source.

Nov 12, 2022

Loading thumbnail…

Fork of Circles on a Map

This visualization shows global population by country, with the area of each circle proportional to that country's 2018 population. It uses a natural Earth projection with D3’s `geoPath` for the map. Pan and zoom via the `zoom` control, and hover reveals detailed population figures. Data is loaded from a CSV of UN population figures and a TopoJSON world atlas, processed with `topojson.feature`. Circles are drawn using SVG, with a size legend generated by `sizeLegend` and a color legend using `colorLegend`.

Sep 28, 2022