Skip to main content
SimilarExport ZIP
100%

FIT5147 S1 2022 - DVP Project

✓ Published0🌍 Public
XXzou0011
Last edited Jun 4, 2022
Created on Jun 4, 2022
Forked from HTML Starter

This example presents a geographic visualization of data related to butterfly observations and crime routes in Victoria. It displays circles on a map representing locations, with circle radius and color (red or green) indicating butterfly counts, while blue lines depict routes with stroke width proportional to usage. The visualization uses D3.js v4 to load JSON data and render SVG elements, with interactive tooltips that appear on mouseover events. The tooltip provides detailed information about each location or route, including names, counts, and region identifiers.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

FIT5147 S1 2022 - Programming Exercise 3: D3

The map shows butterfly survey locations and travel routes across Royal Park, Melbourne, overlaid on simplified boundary polygons with the Melbourne Zoo highlighted. It uses D3 v4 with d3.json to load GeoJSON boundary, location, and route data, and d3.geoIdentity with fitExtent to project the map, while d3.geoPath renders the boundary shapes. Markers and lines are drawn as SVG elements, and a tooltip container is included but not yet populated with interactivity. The data is adapted from the City of Melbourne’s 2017 butterfly biodiversity survey.

WWendyZW
81% match
Loading thumbnail…

projet_1

This visualization displays hourly pedestrian counts across Melbourne city center using a Google Map with D3.js overlays. Circle markers, sized proportionally to pedestrian volumes, appear at sensor locations, with each hour selectable via buttons below the map. The code uses Google Maps API for the basemap, D3 v4 for data binding and SVG rendering, and d3.scaleSqrt to map count values to circle radii. Data comes from November 2017 pedestrian sensor readings and a corresponding sensor location CSV file.

EEssohanamKouyou
68% match
Loading thumbnail…

Covid 19

This visualization presents COVID-19 case data across Australian states, combining a geographic map with a line graph. The map displays cumulative confirmed cases per state using scaled circles positioned via `d3.geoConicConformal` and `d3.geoPath`, while the graph plots daily confirmed cases for Victoria using `d3.scaleTime` and `d3.line`. Data is loaded from local CSV and GeoJSON files, with the map rendering SVG paths and circles styled by hover effects.

Ddtd-amiele
67% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Final Project

This example visualizes patterns in New York City crime data across 31 offense types from 2012 to 2021. The interface presents a radio button that, when clicked, triggers an animation displaying SO2-related data as an interactive bar chart rendered with SVG. The code uses D3 v6, with methods such as `d3.scaleLinear` and `d3.select`, alongside React for the application framework. The visualization dynamically updates the chart by removing existing groups and redrawing based on user interaction, demonstrating an animated exploration of temporal crime trends.

YYi Yang
66% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Final Project

This example visualizes crime pattern changes in New York City from 2012 to 2021 across 31 offense categories. The visualization is a static SVG bar chart where clicking a radio button triggers a JavaScript function to display the data with animation. The chart uses D3.js v6 to create a linear scale for the x-axis, mapping the year-based dataset to a 600-pixel-wide view. The SVG rendering, with a light blue background, shows crime counts as bars, with each state type assigned a distinct color from a predefined palette.

YYi Yang
66% match
Loading thumbnail…

vvij

A world map displays the total number of dead and missing migrants by location, with circle size encoding the count. A linked date histogram beneath the map allows brushing to filter the map to a selected time range. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for map projection, `scaleSqrt` for circle sizing, and `brushX` for interactive filtering. Data comes from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON.

VViktor Richard Kozma
66% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Final Project

A pattern discovery visualization displays NYPD crime data across 31 offense categories and 10 years (2012–2021) through a multi-series line chart. Clicking the "View SO2" radio button triggers an animated rendering of the dataset. The code uses D3.js v6 to build an SVG visualization, with `d3.format` for number formatting and custom color arrays for series differentiation. The visualization animates through the data via a `black()` function that removes and redraws groups, presenting crime trends as interactive time-series line graphs.

YYi Yang
66% match
Loading thumbnail…

H1B Petition with Interactive Legend for Case Status

An interactive choropleth map displays the geographic distribution of violent crime rates across US cities. The visualization uses a natural earth projection with graticules and state boundaries rendered via D3's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs. Circle markers sized by the `scaleSqrt` function represent each city's violent crime count, with data loaded from a CSV via D3's `csv` method. The map leverages React hooks for data fetching and renders all SVG elements through a component-based architecture.

Yyyaaa1
66% match