Skip to main content
SimilarExport ZIP
100%

Fork of Codu exercise 2

✓ Published0🌍 Public
Rrudi.oreillymeehan@gmail.com
Last edited Aug 1, 2024
Created on Aug 1, 2024
Forked from Codu exercise

This visualization displays monthly homelessness figures in Dublin from July 2014 to June 2024, plotting total numbers over time with individual data points rendered as circles. The chart uses a dark background with white axis lines and text, and circles that expand on hover for interactivity. Built with Svelte and SVG, the code leverages d3's `scaleTime`, `scaleLinear`, and `line` functions for scaling and plotting, while gsap handles the hover animations.

AI-generated description

Codu exercise from talk on 1st august.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Codu exercise 2

This visualization displays monthly homelessness figures in Dublin from July 2014 to June 2024, plotting total numbers over time with individual data points rendered as circles. The chart uses a dark background with white axis lines and text, and circles that expand on hover for interactivity. Built with Svelte and SVG, the code leverages d3's `scaleTime`, `scaleLinear`, and `line` functions for scaling and plotting, while gsap handles the hover animations.

Rrudi.oreillymeehan@gmail.com
100% match
Loading thumbnail…

Fork of Codu exercise

A dark-themed scatterplot tracks monthly homelessness figures in Dublin from 2014 to 2024, plotting each month’s total as a white circle over a dark navy background. The chart uses D3’s `scaleTime` and `scaleLinear` for axes, `d3.autoType` and `timeParse` for data processing, and GSAP for animated hover effects that enlarge individual points. A line path connecting the points is defined via `d3.line`, though it remains commented out in the code.

Rrudi.oreillymeehan@gmail.com
93% match
Loading thumbnail…

Fork of Codu exercise

A line chart visualizes the monthly total count of homeless individuals from a CSV dataset, plotted over time. The Svelte application uses D3 scales (`scaleTime`, `scaleLinear`) to map data to pixel coordinates, with a white line plot connecting the data points. Circles at each point enlarge on hover via GSAP animations. The visualization includes custom SVG axes for the date and value ranges, with the chart's dark background from the main stylesheet.

Bbogdansharpy@gmail.com
90% match
Loading thumbnail…

Codu exercise

A time-series line chart visualizes the total number of homeless individuals in Ireland from July 2014 to June 2024, with individual data points rendered as white circles. The chart uses d3-scale for the time and linear scales, d3-shape’s `line` function to plot the trend, and d3-array’s `extent` and `timeParse` for domain calculations and date formatting. GSAP powers the hover animations on the circles, adjusting their radius. The Svelte components manage the axes and circles, rendered as SVG on a dark navy background.

Rrudi.oreillymeehan@gmail.com
89% match
Loading thumbnail…

Fork of Homelessness - Multi-line Chart

This multi-line chart visualization compares the number of homeless persons across five different variables from 2005 to 2013, with each variable represented by a distinct colored line and data points. Hovering over the points triggers a tooltip displaying additional details. The visualization uses the D3.js library (v7) with SVG rendering and relies on `d3.csv` to load the dataset, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.group` to organize data by variable. A color legend from Susie Lu and ColorBrewer distinguishes the lines, and the code animates interactive elements.

EEunice Tu
75% match
Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Svelte

This example shows a gapminder-style bubble chart representing global health and economic data for 2007. The visualization maps GDP per capita on the x-axis and life expectancy on the y-axis, with circle size encoding population and colors distinguishing continents. Built with Svelte and d3.js, the code uses d3.scaleLinear, d3.scaleSqrt, and d3.scaleOrdinal to map data values to positions, radii, and fills. Each bubble is rendered as an SVG circle with reduced opacity, driven by data from the Gapminder dataset.

SSebastian Graeff
73% match
Loading thumbnail…

Fork of Svelte + D3 Starter

Four thin vertical bars mark the positions of four data points along a pink horizontal strip, with each bar placed by a linear scale mapping the domain 1–10 to the width of the SVG. The visualization uses D3’s `scaleLinear` inside a Svelte component to compute x-coordinates, while the bars themselves are simple SVG `<rect>` elements with low opacity and white fill. The data is a static array of numeric values, and the chart demonstrates a minimal integration of D3 scales with Svelte’s template syntax and reactive declarations.

LLuisa Vasquez
71% match
Loading thumbnail…

Fork of HTML Starter

This visualization animates US COVID-19 case data from the New York Times, mapping cumulative cases over time as colored circles along a horizontal timeline. A sequential spectral color scale encodes case counts, with circle radius proportional to daily increases. The sketch.js file uses D3 v7 to load the CSV data, parse it, and render animated circles through an iterative drawing loop. The visualization demonstrates cumulative growth patterns from early January through August 2020, with color intensity shifting as case numbers escalate.

BBortrex
71% match