Haris Vidimlic

@HarisVidimlic·10 public vizzes

MapD3

This interactive map of Sweden displays municipal boundaries as SVG paths, with a tooltip revealing each region’s name on hover. The visualization relies on D3.js v5’s `geoMercator` projection and `geoPath` generator, while the TopoJSON library supplies the administrative geometry from a GitHub-hosted dataset. Pan and zoom controls, implemented via D3’s `zoom` event, let users explore the country, and region styling changes color on mouseover.

Feb 16, 2022

Loading thumbnail…

Sweden

This example displays a choropleth of Sweden’s counties, rendered as a static SVG map without interactivity. Using React and D3 v5, it loads TopoJSON county boundaries via `d3.json` and converts them with `topojson.feature`. A Mercator projection (`d3.geoMercator`) and `d3.geoPath` draw the filled paths, with a fixed zoom scale and map dimensions. The code’s styling applies a teal fill and transparent stroke to each county.

Feb 16, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that displays a large, centered "Hello HTML!" message using custom CSS styling. The page is built entirely with HTML and CSS, showing how to create a basic styled text presentation without any external libraries or JavaScript functionality. The core implementation relies on an HTML `<div>` element, inline CSS rules that define the message's font size and alignment, and a plain text content structure. It serves as a simple demonstration of static web content rendering with modern CSS capabilities.

Feb 15, 2022

Loading thumbnail…

Fork of Polished World Map

This fork of the Polished World Map visualization displays country boundaries and graticules on a natural Earth projection, with landmasses in teal and interior borders highlighted. Built with React and D3 v5, it uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render SVG paths. The data originates from the World Atlas TopoJSON, loaded via `d3.json` and processed with `topojson`'s `feature` and `mesh` functions. The map presents a clean, stylized view of global geography with a subtle color palette.

Feb 15, 2022

Loading thumbnail…

world map

This example visualizes temperature data from the Data Canvas Sense Your City dataset as a time-series line chart. The y-axis displays temperature values while the x-axis represents time, with the line connecting data points to show trends over the course of a week. Built with React and D3 v5, the chart uses D3’s `scaleTime` for the time axis, `scaleLinear` for the temperature axis, and `line` with `curveNatural` to draw the smoothed path. The visualization is rendered as an SVG, with axes and marks generated by custom React components, though the data file is loaded via `d3.json` from a GeoJSON URL, suggesting a possible mismatch with the scatter plot described in the README.

Feb 15, 2022

Loading thumbnail…

Mouse follower

A single eye shape rendered as an SVG circle tracks mouse movement across a 960-by-500 canvas. The example demonstrates mouse-event handling in a React component, logging each move to the console while the circle itself remains fixed at the center. Built with React 16.9 and d3.v7, it uses the `onMouseMove` React event handler and d3’s `arc` import, though the arc function is not applied to the visible circle. The page hides scrollbars via CSS `overflow:hidden`, and the mouse-follower interaction is minimal, showing only the event trigger without updating the circle’s position.

Feb 15, 2022

Loading thumbnail…

Loading CSV

This example demonstrates how to load and render data from a CSV file using D3.js within a React application. It fetches a dataset of CSS named colors from a GitHub Gist URL and displays the results in a plain HTML page. The code uses the `d3.csv` function to parse the remote CSV file, then binds the loaded data to the DOM for visualization. The example serves as a minimal starting point for integrating data loading with D3 and React.

Feb 15, 2022

Loading thumbnail…

Forfghk of Hello HTML

A classic smiley face rendered as a yellow circle with two eyes and an arc-shaped mouth, drawn in SVG using React components. D3’s `arc()` generator creates the mouth path with specified inner and outer radii and angular extent. Coordinates for the eyes and face are computed from fixed constants, while the whole group is centered via a translation. React 16.9 and D3 v7 are loaded from CDNs, with all styling applied through SVG attributes.

Feb 15, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows the first step in building a smiley face: a large yellow circle with a thick black stroke, flanked by two smaller empty circles as eyes. The static SVG is rendered in an HTML page with no margins, using explicit pixel coordinates for all shapes. It relies solely on native SVG elements—`circle`, `fill`, and `stroke`—without any JavaScript libraries or data binding. The fork serves as a baseline for a video tutorial, demonstrating basic geometric composition before adding dynamic features.

Feb 15, 2022

Loading thumbnail…

Untitled

This example shows a single, large circle rendered on a blank SVG canvas, with no interaction or animation. The visualization relies on an inline SVG element sized to 960 by 500 pixels, containing a circle with a radius of 100. The code uses plain JavaScript and CSS within an HTML page, with the SVG’s `circle` element as the only visual mark, and the page is set up with a hidden overflow. No external data or libraries are used, and the styling is minimal, focusing on the bare structure of an SVG graphic.

Jan 24, 2022