Halvorte

@Halvorte·6 public vizzes

Fork of NewYorkCounty

This fork of NewYorkCounty displays a state of the US with its counties as an interactive SVG map, emphasizing a clean white and black aesthetic. The visualization's central mechanism is a dropdown selector that switches between states. Clicking on a county slides in a sidebar with its name, while hovering highlights the county in orange and shows a tooltip. It leverages d3.geoPath with a geoIdentity projection to render the map, and uses topojson-client to parse the US-10m TopoJSON file. All county and state geometry is drawn as SVG paths, with animated transitions on hover.

Dec 12, 2023

Loading thumbnail…

Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against petal width for 150 flowers. Each point is colored according to its species (setosa, versicolor, or virginica), revealing clear species clusters. A legend identifies the color mapping. The visualization is built with D3 v5, using `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a local CSV via `csv()`, and the chart is rendered as an SVG.

Sep 20, 2023

Loading thumbnail…

Bar chart on iris-dataset

This example presents a horizontal bar chart that visualizes the sepal length of different iris species classes from the classic Iris dataset. The chart encodes the measured sepal length along the x-axis, with each bar positioned by its corresponding flower class on the y-axis. The visual encoding clearly compares the distribution of sepal lengths across the three species. Using D3 v5, the code loads the dataset from a CSV file, scales the data with `d3.scaleLinear` and `d3.scaleBand`, and renders the visualization as SVG elements within an HTML canvas. Axis labels and a title are also generated using D3's axis utilities.

Sep 19, 2023

Loading thumbnail…

Making a scatter plot

This example demonstrates how to create a scatter plot using D3.js version 5, loaded via UNPKG, and rendered as an SVG. It imports functions like `csv`, `scaleLinear`, `scaleBand`, and `max` from the D3 library to process and visualize the `data.csv` file containing country populations. The code uses `svg.append` to dynamically add rectangles to the chart, with axes scaled using `scaleLinear` and `scaleBand`. It also includes a local ES6 module, `myMessage.js`, which displays a simple greeting message.

Sep 19, 2023

Loading thumbnail…

Fork of Hello VizHub

The example displays a simple, animated face made of SVG shapes: a yellow circle for the head, two eyes, and a mouth drawn with an arc path. The eyebrows animate by smoothly translating up and down over a few seconds. It demonstrates how to load D3 v5 from a CDN and use its `select` and `arc` API functions, alongside importing a local ES6 module. The text "Hello VizHub!" appears below the graphic, styled via an external CSS file.

Sep 18, 2023

Loading thumbnail…

Make a face using D3.js

This example demonstrates how to create a face using D3.js version 7, rendered as an SVG element with a red background. The code selects the SVG container using `d3.select` and applies the background color via the `style` method. The page structure includes an HTML file that loads D3 from a CDN, a linked stylesheet that resets margins, and JavaScript that manipulates the SVG directly. The visualization is minimal, showing the foundational steps for building custom shapes with D3's SVG manipulation capabilities.

Sep 18, 2023