Skip to content

Instantly share code, notes, and snippets.

View s-haensch's full-sized avatar

Steffen Hänsch s-haensch

15 followers · 8 following
View GitHub Profile
@s-haensch
s-haensch / App.js
Last active September 20, 2017 15:05
creating a strip plot - step 1
// ./src/components/App.js
import React from 'react';
class App extends React.Component {
render() {
const {width, height, margin} = this.props;
return (
<svg
width={width}
@s-haensch
s-haensch / App.js
Last active September 20, 2017 15:05
creating a strip plot - step 2
// ./src/components/App.js
import React from 'react';
import {scaleLinear} from 'd3-scale';
class App extends React.Component {
render() {
const {width, height, margin} = this.props;
const scale = scaleLinear()
.domain([0, 100])
.range([margin.left, width - margin.right]);
@s-haensch
s-haensch / App.js
Last active September 20, 2017 15:05
creating a strip plot - step 3
// ./src/components/App.js
import React from 'react';
import {scaleLinear} from 'd3-scale';
import _ from 'lodash';
class App extends React.Component {
stripLine(scale, dimensions, value, index) {
const {height, margin} = dimensions;
return (
@s-haensch
s-haensch / germanCitiesCategories.csv
Last active September 20, 2017 14:48
data drawn from https://ergebnisse.zensus2011.de/?locale=en
city notReligious ownedHomes selfEmployed populationChange populationDensity
Berlin 62.56279324 14.77972396 15.57973715 -2.45270567 3948
Hamburg 48.85539781 23.25007563 12.85243705 -7.55535390 2366
München 36.6365135 23.80842983 13.91549005 -15.26185189 4668
Köln 34.2409718 26.02610299 13.36781342 -10.09172322 2619
Frankfurt am Main 41.81785951 19.18427556 11.79778378 -11.98641168 2951
Stuttgart 32.01649148 30.45424447 10.70011113 -7.01416300 3008
Düsseldorf 33.09950391 22.68977715 14.14924001 -5.94336941 2816
Dortmund 28.80361309 26.35246445 10.24915062 2.19625000 2088
Essen 25.53284052 25.67406069 10.93361465 7.61194180 277
@s-haensch
s-haensch / App.js
Last active September 20, 2017 15:04
creating a strip-plot - step 4
// ./src/components/App.js
import React from 'react';
import {scaleLinear} from 'd3-scale';
import _ from 'lodash';
import {csv} from 'd3-request';
class App extends React.Component {
constructor (props) {
super(props);
this.state = {
@s-haensch
s-haensch / App.js
Last active September 20, 2017 15:04
creating a strip-plot - step 5
// ./src/components/App.js
import React from 'react';
import {scaleLinear} from 'd3-scale';
import _ from 'lodash';
import {csv} from 'd3-request';
import StripSeries from './StripSeries';
class App extends React.Component {
constructor (props) {
super(props);
@s-haensch
s-haensch / App.js
Last active September 6, 2017 13:52
creating a strip-plot - step 6
// ./src/components/App.js
import React from 'react';
import {scaleLinear} from 'd3-scale';
import _ from 'lodash';
import {csv} from 'd3-request';
import StripSeries from './StripSeries';
class App extends React.Component {
constructor (props) {
super(props);
@s-haensch
s-haensch / App.js
Last active September 26, 2017 15:42
creating a strip-plot - step 7
// ./src/components/App.js
import React from 'react';
import {scaleLinear} from 'd3-scale';
import _ from 'lodash';
import {csv} from 'd3-request';
import StripSeries from './StripSeries';
import Axis from './Axis';
class App extends React.Component {
constructor (props) {
@s-haensch
s-haensch / App.js
Last active September 25, 2017 15:02
creating a strip-plot - step 8
// ./src/components/App.js
import React from 'react';
import _ from 'lodash';
import {csv} from 'd3-request';
import StripPlot from './StripPlot';
class App extends React.Component {
constructor (props) {
super(props);
this.state = {
@s-haensch
s-haensch / App.js
Last active September 25, 2017 15:32
creating a strip-plot - step 9
// ./src/components/App.js
import React from 'react';
import _ from 'lodash';
import {csv} from 'd3-request';
import StripPlot from './StripPlot';
import * as util from './Util';
class App extends React.Component {
constructor (props) {