Skip to main content
SimilarExport ZIP
100%

Fork of Codu exercise

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

AI-generated description

Codu exercise from talk on 1st august.

{#each data as d, i} <!-- <circle id={'circle_' + i} class="circle" cx={xScale(d.date)} cy={yScale(d.Total)} r={3} ></circle> -->

  <!-- <Circle {xScale} {yScale} data={d} {i} />

--> {/each}

<!-- <path
  id="lineplot"
  fill="none"
  stroke="white"
  stroke-width="1.5"
  d={linePlot(data)}
/>

--> <!-- <text id="yaxis_text" cursor="pointer" x="100" y="50" on:click={() => randomise()}>{'Randomise'}</text > -->

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
93% 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
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
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
87% 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 IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes asylum case wait times versus case entry dates, colored by decision code, with a dropdown menu filtering by year. Built with React and D3 v5, it uses scaleTime and scaleLinear axes, scaleOrdinal for color encoding, and React state to manage selections. The visualization reads CSV data from a GitHub gist, implements hover interactions via the ColorLegend component, and dynamically adjusts the x-axis tick format between years and months based on the selected filter.

Eeourm20
72% match
Loading thumbnail…

Fork of IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes asylum case wait times in days against case entry dates, colored by decision code. A dropdown menu filters the display to show all years or a specific year from 2003–2011, with the x-axis switching between year and month/day formatting accordingly. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, with SVG rendering for axes, marks, and a hover-fading color legend. Data comes from a CSV file loaded via `d3.csv`, and missing years trigger a "no data" message.

Ssuji8073
72% match
Loading thumbnail…

Fork of IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes defensive asylum case wait times in days against case entry dates, with points colored by decision code (Relief, Granted, Removed, Cast Terminated). A dropdown menu filters the data by year (2003–2011 or all years), updating the x-axis from yearly to monthly granularity and displaying a message when no data exists for a selected year. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, plus SVG-rendered axes, color legend with hover highlighting, and tooltips showing wait times. Data comes from a CSV file processed in `useData.js`.

HHaowenWeiJohn
71% match