Skip to main content
SimilarExport ZIP
100%

Codu exercise

✓ Published4🌍 Public
Rrudi.oreillymeehan@gmail.com
Last edited Aug 1, 2024
Created on Jul 31, 2024
Forked from Codu_presentation

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.

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
89% match
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
89% 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
87% 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
85% match
Loading thumbnail…

Homelessness - Multi-line Chart

This multi-line chart displays the number of homeless persons across five variables from 2005 to 2013, with each variable drawn as a distinct colored path using d3.line and d3.scaleTime for the time axis. The visualization includes interactive tooltips on data points, which are rendered as SVG circles using d3.legend for color thresholds and colorbrewer schemes. Data comes from a CSV file loaded via d3.csv, and the chart also uses d3.axisBottom and d3.axisLeft to render axes with rotating labels.

EEunice Tu
75% 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
74% match
Loading thumbnail…

Svelte + D3: Line (II)

The chart displays daily Atlantic sea surface temperatures from 1982 to 2024, with each year drawn as its own line. Recent years are highlighted—2024 in blue and 2023 in pink—while older years appear as faint white strokes, emphasizing the temperature trajectory over time. Built with Svelte, it uses D3's `csv` and `autoType` to load data, `scaleLinear`, `extent`, and `line` with `curveCatmullRom` for the paths, and `groups` to structure lines by year. The SVG renders against a dark gradient background, with an overlay legend identifying the color coding.

MMatthias Stahl
71% match
Loading thumbnail…

simple line chart from dataset

This line chart displays a dataset of seven values, one per month from January to July 2016, on a time-based x-axis and a linear y-axis. A black polyline connects the points, with light grey circles marking each data value. Hovering over a circle highlights it in red, reveals the numeric value above it, and draws a dashed vertical guide line down to the baseline. The chart uses SVG rendering with D3 v4, including `d3.scaleTime`, `d3.line`, and transition effects for the hover interactions. Data is loaded asynchronously from a JSON file.

RRomainCandy
70% match