Skip to main content
SimilarExport ZIP
100%

Fork of Codu exercise

✓ Published0🌍 Public
Bbogdansharpy@gmail.com
Last edited Aug 1, 2024
Created on Aug 1, 2024
Forked from 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.

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
90% 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
90% 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
88% 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
85% 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
77% match
Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays COVID-19 biweekly case counts for the United States over time, using a smooth curved path rendered with d3.line and curveNatural. The chart is built with React functional components and d3.v5 scales, including scaleTime for the x-axis and scaleLinear for the y-axis, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded asynchronously from a CSV URL using d3.csv within a useData hook. The visualization uses SVG rendering with a Poppins font and muted teal styling for the line and axes, but omits data point circles.

Aamanoakane
74% 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
74% match
Loading thumbnail…

Fork of A week in San Francisco - Line chart

This line chart visualizes the number of comments over time from a CSV dataset. The x-axis represents time, while the y-axis maps temperature, though the data lacks a temperature column. Built with D3 v5, the code uses `select`, `csv`, `line`, `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render an SVG with grid lines, axis labels, and a smooth curve. The chart displays a title and styled paths via CSS.

Mmorjyooo
74% match