Marielle Lange widged

Diverging Stacked Bar Chart

Adapted from on a divergent bar chart by @wpoely86. Ported to d3js v5. Moved neutrals values to a separate group, as per the recommendations given in "The case against diverging stacked bars".

Click on the various examples

Each example is a random vector in the same "space" as the sample in the top left.

Drag on individual rows

Each row represents one dimension of our vectors. You can drag them back and forth to change the value of our vector for that dimension.

Watch how the similarity bar changes

The bar below each vector is a measure of how similar it is to the sample in the top left.

Whats going on?

Click on the various examples

Each example is a random vector in the same "space" as the sample in the top left.

Drag on individual rows

Each row represents one dimension of our vectors. You can drag them back and forth to change the value of our vector for that dimension.

Watch how the similarity bar changes

The bar below each vector is a measure of how similar it is to the sample in the top left.

Whats going on?

LOAD CSV into Neo4j quickly and successfully

Since version 2.1 Neo4j provides out-of-the box support for CSV ingestion. The LOAD CSV command that was added to the Cypher Query language is a versatile and powerful ETL tool. It allows you to ingest CSV data from any URL into a friendly parameter stream for your simple or complex graph update operation, that … conversion.

Importing the csv file from data.govt.nz. The header row is "Title","Url","DatasetType","Agency","AgencyContact","AgencyContactEmail","AgencyContactPhone","Description","Format","UpdateFrequency","Cost","CostInformation","SubmissionSource","Licence","LicenceURL","Date listed","Date last updated","DatasetLastUpdated","DatasetCreation","Guid"

USING PERIODIC COMMIT 100
LOAD CSV WITH HEADERS FROM "https://data.govt.nz/search/csv/?q=&CategoryID=0"
  AS line
WITH line LIMIT 500

Fork to demonstrate how promises can easily be replaced with some async functions. Added the option to switch between an animation where all tiles are moved in paralles and one where all tiles are moved in sequence.

A word of warning. I code javascript in the context of kiosk apps that run a specific browser. I am not used to have to support multiple browsers. I go for pure vanillajs whenever possible. Tested on the latest version of Chrome Canary. Should work on most modern browsers.

Original text follows

I recently wanted to implement a visualisation of a stream of incoming events. For the visualisation I wanted a list where the latest event is added to the beginning and the other events move down the list in a snake like pattern (to minimise the amount of movement). This is an example click on the squares to see my implementation in action. I used jQuery promises (which I recently blogged

	<!DOCTYPE html>
	<title>Callgraph expandable tree visualization on 16 processors</title>
	<meta charset="utf-8">
	<style>

	.node {
	cursor: pointer;
	}

	.node circle {

	notional2005result.csv
	notional2005result.json