Line & Area Charts

Line Chart

using Vega

@vgplot(
    height=200,
    padding=5,
    marks=[
        {
            marks=[
                {
                    encode={
                        update={
                            interpolate={
                                signal="interpolate"
                            },
                            fillOpacity={
                                value=1
                            }
                        },
                        hover={
                            fillOpacity={
                                value=0.5
                            }
                        },
                        enter={
                            stroke={
                                field="c",
                                scale="color"
                            },
                            x={
                                field="x",
                                scale="x"
                            },
                            strokeWidth={
                                value=2
                            },
                            y={
                                field="y",
                                scale="y"
                            }
                        }
                    },
                    from={
                        data="series"
                    },
                    type="line"
                }
            ],
            from={
                facet={
                    name="series",
                    data="table",
                    groupby="c"
                }
            },
            type="group"
        }
    ],
    axes=[
        {
            scale="x",
            orient="bottom"
        },
        {
            scale="y",
            orient="left"
        }
    ],
    data=[
        {
            name="table",
            values=[
                {
                    c=0,
                    x=0,
                    y=28
                },
                {
                    c=1,
                    x=0,
                    y=20
                },
                {
                    c=0,
                    x=1,
                    y=43
                },
                {
                    c=1,
                    x=1,
                    y=35
                },
                {
                    c=0,
                    x=2,
                    y=81
                },
                {
                    c=1,
                    x=2,
                    y=10
                },
                {
                    c=0,
                    x=3,
                    y=19
                },
                {
                    c=1,
                    x=3,
                    y=15
                },
                {
                    c=0,
                    x=4,
                    y=52
                },
                {
                    c=1,
                    x=4,
                    y=48
                },
                {
                    c=0,
                    x=5,
                    y=24
                },
                {
                    c=1,
                    x=5,
                    y=28
                },
                {
                    c=0,
                    x=6,
                    y=87
                },
                {
                    c=1,
                    x=6,
                    y=66
                },
                {
                    c=0,
                    x=7,
                    y=17
                },
                {
                    c=1,
                    x=7,
                    y=27
                },
                {
                    c=0,
                    x=8,
                    y=68
                },
                {
                    c=1,
                    x=8,
                    y=16
                },
                {
                    c=0,
                    x=9,
                    y=49
                },
                {
                    c=1,
                    x=9,
                    y=25
                }
            ]
        }
    ],
    scales=[
        {
            name="x",
            range="width",
            domain={
                data="table",
                field="x"
            },
            type="point"
        },
        {
            name="y",
            nice=true,
            zero=true,
            range="height",
            domain={
                data="table",
                field="y"
            },
            type="linear"
        },
        {
            name="color",
            range="category",
            domain={
                data="table",
                field="c"
            },
            type="ordinal"
        }
    ],
    width=500,
    signals=[
        {
            name="interpolate",
            bind={
                options=[
                    "basis",
                    "cardinal",
                    "catmull-rom",
                    "linear",
                    "monotone",
                    "natural",
                    "step",
                    "step-after",
                    "step-before"
                ],
                input="select"
            },
            value="linear"
        }
    ]
)
01234567890102030405060708090

Area Chart

using Vega

@vgplot(
    height=200,
    padding=5,
    marks=[
        {
            encode={
                update={
                    interpolate={
                        signal="interpolate"
                    },
                    fillOpacity={
                        value=1
                    }
                },
                hover={
                    fillOpacity={
                        value=0.5
                    }
                },
                enter={
                    x={
                        field="u",
                        scale="xscale"
                    },
                    y2={
                        value=0,
                        scale="yscale"
                    },
                    fill={
                        value="steelblue"
                    },
                    y={
                        field="v",
                        scale="yscale"
                    }
                }
            },
            from={
                data="table"
            },
            type="area"
        }
    ],
    axes=[
        {
            tickCount=20,
            scale="xscale",
            orient="bottom"
        },
        {
            scale="yscale",
            orient="left"
        }
    ],
    data=[
        {
            name="table",
            values=[
                {
                    v=28,
                    u=1
                },
                {
                    v=55,
                    u=2
                },
                {
                    v=43,
                    u=3
                },
                {
                    v=91,
                    u=4
                },
                {
                    v=81,
                    u=5
                },
                {
                    v=53,
                    u=6
                },
                {
                    v=19,
                    u=7
                },
                {
                    v=87,
                    u=8
                },
                {
                    v=52,
                    u=9
                },
                {
                    v=48,
                    u=10
                },
                {
                    v=24,
                    u=11
                },
                {
                    v=49,
                    u=12
                },
                {
                    v=87,
                    u=13
                },
                {
                    v=66,
                    u=14
                },
                {
                    v=17,
                    u=15
                },
                {
                    v=27,
                    u=16
                },
                {
                    v=68,
                    u=17
                },
                {
                    v=16,
                    u=18
                },
                {
                    v=49,
                    u=19
                },
                {
                    v=15,
                    u=20
                }
            ]
        }
    ],
    scales=[
        {
            name="xscale",
            zero=false,
            range="width",
            domain={
                data="table",
                field="u"
            },
            type="linear"
        },
        {
            name="yscale",
            nice=true,
            zero=true,
            range="height",
            domain={
                data="table",
                field="v"
            },
            type="linear"
        }
    ],
    width=500,
    signals=[
        {
            name="interpolate",
            bind={
                options=[
                    "basis",
                    "cardinal",
                    "catmull-rom",
                    "linear",
                    "monotone",
                    "natural",
                    "step",
                    "step-after",
                    "step-before"
                ],
                input="select"
            },
            value="monotone"
        }
    ]
)
12345678910111213141516171819200102030405060708090100

Stacked Area Chart

using Vega

@vgplot(
    height=200,
    padding=5,
    marks=[
        {
            marks=[
                {
                    encode={
                        update={
                            fillOpacity={
                                value=1
                            }
                        },
                        hover={
                            fillOpacity={
                                value=0.5
                            }
                        },
                        enter={
                            interpolate={
                                value="monotone"
                            },
                            x={
                                field="x",
                                scale="x"
                            },
                            y2={
                                field="y1",
                                scale="y"
                            },
                            fill={
                                field="c",
                                scale="color"
                            },
                            y={
                                field="y0",
                                scale="y"
                            }
                        }
                    },
                    from={
                        data="series"
                    },
                    type="area"
                }
            ],
            from={
                facet={
                    name="series",
                    data="table",
                    groupby="c"
                }
            },
            type="group"
        }
    ],
    axes=[
        {
            zindex=1,
            scale="x",
            orient="bottom"
        },
        {
            zindex=1,
            scale="y",
            orient="left"
        }
    ],
    data=[
        {
            name="table",
            values=[
                {
                    c=0,
                    x=0,
                    y=28
                },
                {
                    c=1,
                    x=0,
                    y=55
                },
                {
                    c=0,
                    x=1,
                    y=43
                },
                {
                    c=1,
                    x=1,
                    y=91
                },
                {
                    c=0,
                    x=2,
                    y=81
                },
                {
                    c=1,
                    x=2,
                    y=53
                },
                {
                    c=0,
                    x=3,
                    y=19
                },
                {
                    c=1,
                    x=3,
                    y=87
                },
                {
                    c=0,
                    x=4,
                    y=52
                },
                {
                    c=1,
                    x=4,
                    y=48
                },
                {
                    c=0,
                    x=5,
                    y=24
                },
                {
                    c=1,
                    x=5,
                    y=49
                },
                {
                    c=0,
                    x=6,
                    y=87
                },
                {
                    c=1,
                    x=6,
                    y=66
                },
                {
                    c=0,
                    x=7,
                    y=17
                },
                {
                    c=1,
                    x=7,
                    y=27
                },
                {
                    c=0,
                    x=8,
                    y=68
                },
                {
                    c=1,
                    x=8,
                    y=16
                },
                {
                    c=0,
                    x=9,
                    y=49
                },
                {
                    c=1,
                    x=9,
                    y=15
                }
            ],
            transform=[
                {
                    sort={
                        field="c"
                    },
                    field="y",
                    groupby=[
                        "x"
                    ],
                    type="stack"
                }
            ]
        }
    ],
    scales=[
        {
            name="x",
            range="width",
            domain={
                data="table",
                field="x"
            },
            type="point"
        },
        {
            name="y",
            nice=true,
            zero=true,
            range="height",
            domain={
                data="table",
                field="y1"
            },
            type="linear"
        },
        {
            name="color",
            range="category",
            domain={
                data="table",
                field="c"
            },
            type="ordinal"
        }
    ],
    width=500
)
0123456789020406080100120140160

Horizon Graph

using Vega

@vgplot(
    height=100,
    marks=[
        {
            marks=[
                {
                    marks=[
                        {
                            encode={
                                update={
                                    y2={
                                        value=0,
                                        scale="y"
                                    },
                                    fillOpacity={
                                        signal="opacity"
                                    },
                                    y={
                                        field="y",
                                        scale="y"
                                    }
                                },
                                enter={
                                    interpolate={
                                        value="monotone"
                                    },
                                    x={
                                        field="x",
                                        scale="x"
                                    },
                                    fill={
                                        value="steelblue"
                                    }
                                }
                            },
                            from={
                                data="table"
                            },
                            type="area"
                        }
                    ],
                    encode={
                        update={
                            y={
                                field="offset"
                            }
                        }
                    },
                    from={
                        data="layer_indices"
                    },
                    type="group"
                }
            ],
            encode={
                update={
                    height={
                        field={
                            group="height"
                        }
                    },
                    clip={
                        value=true
                    },
                    width={
                        field={
                            group="width"
                        }
                    }
                }
            },
            type="group"
        }
    ],
    axes=[
        {
            tickCount=20,
            scale="x",
            orient="bottom"
        }
    ],
    data=[
        {
            name="layer_indices",
            values=[
                0,
                1,
                2,
                3
            ],
            transform=[
                {
                    expr="datum.data < layers",
                    type="filter"
                },
                {
                    as="offset",
                    expr="datum.data * -height",
                    type="formula"
                }
            ]
        },
        {
            name="table",
            values=[
                {
                    x=1,
                    y=28
                },
                {
                    x=2,
                    y=55
                },
                {
                    x=3,
                    y=43
                },
                {
                    x=4,
                    y=91
                },
                {
                    x=5,
                    y=81
                },
                {
                    x=6,
                    y=53
                },
                {
                    x=7,
                    y=19
                },
                {
                    x=8,
                    y=87
                },
                {
                    x=9,
                    y=52
                },
                {
                    x=10,
                    y=48
                },
                {
                    x=11,
                    y=24
                },
                {
                    x=12,
                    y=49
                },
                {
                    x=13,
                    y=87
                },
                {
                    x=14,
                    y=66
                },
                {
                    x=15,
                    y=17
                },
                {
                    x=16,
                    y=27
                },
                {
                    x=17,
                    y=68
                },
                {
                    x=18,
                    y=16
                },
                {
                    x=19,
                    y=49
                },
                {
                    x=20,
                    y=15
                }
            ]
        }
    ],
    scales=[
        {
            name="x",
            zero=false,
            range="width",
            domain={
                data="table",
                field="x"
            },
            type="linear",
            round=true
        },
        {
            name="y",
            nice=true,
            zero=true,
            range=[
                {
                    signal="vheight"
                },
                0
            ],
            domain={
                data="table",
                field="y"
            },
            type="linear"
        }
    ],
    width=500,
    signals=[
        {
            name="layers",
            bind={
                options=[
                    1,
                    2,
                    3,
                    4
                ],
                input="select"
            },
            on=[
                {
                    events="mousedown!",
                    update="1 + (layers % 4)"
                }
            ],
            value=2
        },
        {
            name="height",
            update="floor(200 / layers)"
        },
        {
            name="vheight",
            update="height * layers"
        },
        {
            name="opacity",
            update="pow(layers, -2/3)"
        }
    ]
)
1234567891011121314151617181920

Job Voyager

using Vega, VegaDatasets

@vgplot(
    height=500,
    padding=5,
    marks=[
        {
            marks=[
                {
                    encode={
                        update={
                            x={
                                field="year",
                                scale="x"
                            },
                            y2={
                                field="y1",
                                scale="y"
                            },
                            fillOpacity={
                                field={
                                    parent="sum"
                                },
                                scale="alpha"
                            },
                            fill={
                                field="sex",
                                scale="color"
                            },
                            y={
                                field="y0",
                                scale="y"
                            }
                        },
                        hover={
                            fillOpacity={
                                value=0.2
                            }
                        }
                    },
                    from={
                        data="facet"
                    },
                    type="area"
                }
            ],
            from={
                data="series",
                facet={
                    name="facet",
                    data="jobs",
                    groupby=[
                        "job",
                        "sex"
                    ]
                }
            },
            type="group"
        },
        {
            encode={
                update={
                    text={
                        field="job"
                    },
                    align={
                        field="argmax.year",
                        scale="align"
                    },
                    baseline={
                        value="middle"
                    },
                    x={
                        field="argmax.year",
                        scale="x"
                    },
                    dx={
                        field="argmax.year",
                        scale="offset"
                    },
                    fill={
                        value="#000"
                    },
                    fillOpacity={
                        field="argmax.perc",
                        scale="opacity"
                    },
                    fontSize={
                        offset=5,
                        field="argmax.perc",
                        scale="font"
                    },
                    y={
                        signal="scale('y', 0.5 * (datum.argmax.y0 + datum.argmax.y1))"
                    }
                }
            },
            interactive=false,
            from={
                data="series"
            },
            type="text"
        }
    ],
    axes=[
        {
            format="d",
            tickCount=15,
            scale="x",
            orient="bottom"
        },
        {
            format="%",
            domain=false,
            encode={
                grid={
                    enter={
                        stroke={
                            value="#ccc"
                        }
                    }
                },
                ticks={
                    enter={
                        stroke={
                            value="#ccc"
                        }
                    }
                }
            },
            grid=true,
            scale="y",
            orient="right",
            tickSize=12
        }
    ],
    data=[
        {
            name="jobs",
            values=dataset("jobs"),
            transform=[
                {
                    expr="(sex === 'all' || datum.sex === sex) && (!query || test(regexp(query,'i'), datum.job))",
                    type="filter"
                },
                {
                    sort={
                        order=[
                            "descending",
                            "descending"
                        ],
                        field=[
                            "job",
                            "sex"
                        ]
                    },
                    field="perc",
                    groupby=[
                        "year"
                    ],
                    type="stack"
                }
            ]
        },
        {
            name="series",
            source="jobs",
            transform=[
                {
                    fields=[
                        "perc",
                        "perc"
                    ],
                    ops=[
                        "sum",
                        "argmax"
                    ],
                    as=[
                        "sum",
                        "argmax"
                    ],
                    groupby=[
                        "job",
                        "sex"
                    ],
                    type="aggregate"
                }
            ]
        }
    ],
    scales=[
        {
            name="x",
            zero=false,
            range="width",
            domain={
                data="jobs",
                field="year"
            },
            type="linear",
            round=true
        },
        {
            name="y",
            zero=true,
            range="height",
            domain={
                data="jobs",
                field="y1"
            },
            type="linear",
            round=true
        },
        {
            name="color",
            range=[
                "#33f",
                "#f33"
            ],
            domain=[
                "men",
                "women"
            ],
            type="ordinal"
        },
        {
            name="alpha",
            zero=true,
            range=[
                0.4,
                0.8
            ],
            domain={
                data="series",
                field="sum"
            },
            type="linear"
        },
        {
            name="font",
            zero=true,
            range=[
                0,
                20
            ],
            domain={
                data="series",
                field="argmax.perc"
            },
            type="sqrt",
            round=true
        },
        {
            name="opacity",
            range=[
                0,
                0,
                0,
                0,
                0,
                0.1,
                0.2,
                0.4,
                0.7,
                1.0
            ],
            domain={
                data="series",
                field="argmax.perc"
            },
            type="quantile"
        },
        {
            name="align",
            zero=false,
            range=[
                "left",
                "center",
                "right"
            ],
            domain=[
                1730,
                2130
            ],
            type="quantize"
        },
        {
            name="offset",
            zero=false,
            range=[
                6,
                0,
                -6
            ],
            domain=[
                1730,
                2130
            ],
            type="quantize"
        }
    ],
    width=800,
    signals=[
        {
            name="sex",
            bind={
                options=[
                    "men",
                    "women",
                    "all"
                ],
                input="radio"
            },
            value="all"
        },
        {
            name="query",
            bind={
                input="text",
                placeholder="search",
                autocomplete="off"
            },
            on=[
                {
                    events="area:click!",
                    update="datum.job"
                },
                {
                    events="dblclick!",
                    update="''"
                }
            ],
            value=""
        }
    ]
)
18501860187018801890190019101920193019401950196019701980199020000%10%20%30%40%50%60%70%80%90%100%Accountant / AuditorAccountant / AuditorActorActorAdvertising AgentAdvertising AgentAgentAgentApprenticeApprenticeApprentice - Auto MechanicApprentice - Auto MechanicApprentice - BricklayerApprentice - BricklayerApprentice - CarpenterApprentice - CarpenterApprentice - ConstructionApprentice - ConstructionApprentice - ElectricianApprentice - ElectricianApprentice - MachinistApprentice - MachinistApprentice - MechanicApprentice - MechanicApprentice - Metal WorkingApprentice - Metal WorkingApprentice - PlumberApprentice - PlumberApprentice - PrintingApprentice - PrintingArchitectArchitectArtist / Art TeacherArtist / Art TeacherAthleteAthleteAuctioneerAuctioneerAuthorAuthorBaggagemanBaggagemanBakerBakerBank TellerBank TellerBarber / BeauticianBarber / BeauticianBartenderBartenderBill CollectorBill CollectorBlacksmithBlacksmithBlasterBlasterBoarding House KeeperBoarding House KeeperBoatmanBoatmanBoilermakerBoilermakerBookbinderBookbinderBookkeeperBookkeeperBootblackBootblackBuilding ManagerBuilding ManagerBus DriverBus DriverBuyer - FarmBuyer - FarmBuyer - StoreBuyer - StoreCabinet MakerCabinet MakerCar WasherCar WasherCarpenterCarpenterCashierCashierCement / Concrete FinisherCement / Concrete FinisherChainmanChainmanCharwomanCharwomanChemistChemistChiropractorChiropractorClergymanClergymanClerical WorkerClerical WorkerCollege President / DeanCollege President / DeanConstableConstableCookCookCounter WorkerCounter WorkerCraftsmanCraftsmanCranemen / HoistmenCranemen / HoistmenCreditorCreditorCrossing Guard / Toll CollectorCrossing Guard / Toll CollectorDancer / Dance TeacherDancer / Dance TeacherDecoratorDecoratorDelivery ManDelivery ManDemonstratorDemonstratorDentistDentistDesignerDesignerDisabledDisabledDispatcherDispatcherDoctor Office AttendantDoctor Office AttendantDraftsmanDraftsmanDressmaker / SeamstressDressmaker / SeamstressDyerDyerEconomistEconomistEditor / ReporterEditor / ReporterElectricianElectricianElectrotyperElectrotyperElevator OperatorElevator OperatorEngineerEngineerEngineer - AeuronauticalEngineer - AeuronauticalEngineer - ChemicalEngineer - ChemicalEngineer - CivilEngineer - CivilEngineer - ElectricalEngineer - ElectricalEngineer - IndustrialEngineer - IndustrialEngineer - MechanicalEngineer - MechanicalEngineer - MetallurgicalEngineer - MetallurgicalEngineer - MiningEngineer - MiningEngraverEngraverEntertainerEntertainerFarm AdvisorFarm AdvisorFarm ForemanFarm ForemanFarm LaborerFarm LaborerFarm ManagerFarm ManagerFarmerFarmerFiremanFiremanFishermanFishermanFloor ManagerFloor ManagerForemenForemenForgemenForgemenForresterForresterFuneral DirectorFuneral DirectorFurnacemanFurnacemanFurrierFurrierGardener / GroundskeeperGardener / GroundskeeperGlazierGlazierHospital AttendantHospital AttendantHousehold WorkerHousehold WorkerHucksterHucksterHuman ResourcesHuman ResourcesInmateInmateInspectorInspectorInsulation WorkerInsulation WorkerInsurance AgentInsurance AgentJanitorJanitorJewelerJewelerJob SetterJob SetterLaborerLaborerLaundry / Dry CleaningLaundry / Dry CleaningLawyer / JudgeLawyer / JudgeLibrarianLibrarianLibrary AttendantLibrary AttendantLithographerLithographerLocomotive EngineerLocomotive EngineerLocomotive FiremanLocomotive FiremanLongshoremanLongshoremanLoom FixerLoom FixerLumbermanLumbermanMachinistMachinistMail CarrierMail CarrierManager / OwnerManager / OwnerMasonMasonMathematicianMathematicianMeat CutterMeat CutterMechanicMechanicMechanic - AirplaneMechanic - AirplaneMechanic - AutomobileMechanic - AutomobileMechanic - Office MachinesMechanic - Office MachinesMechanic - Radio / TelevisionMechanic - Radio / TelevisionMechanic - RailroadMechanic - RailroadMessengerMessengerMetal FilerMetal FilerMetal HeaterMetal HeaterMetal WorkerMetal WorkerMidwifeMidwifeMilitaryMilitaryMillerMillerMillinerMillinerMillwrightMillwrightMinerMinerModel MakerModel MakerMolderMolderMotion Picture ProjectionistMotion Picture ProjectionistMotormanMotormanMusician / Music TeacherMusician / Music TeacherNewsboyNewsboyNurseNurseNutritionistNutritionistOffice Machine OperatorOffice Machine OperatorOiler / GreaserOiler / GreaserOperativeOperativeOptician / Lens GrinderOptician / Lens GrinderOptometristOptometristOsteopathOsteopathPainterPainterPaperhangerPaperhangerParking AttendantParking AttendantPharmacistPharmacistPhoto DeveloperPhoto DeveloperPhotographerPhotographerPhysician / SurgeonPhysician / SurgeonPiano / Organ TunerPiano / Organ TunerPilotPilotPlastererPlastererPlumberPlumberPoliceman / DetectivePoliceman / DetectivePorterPorterPostmasterPostmasterPower Station OperatorPower Station OperatorPressmanPressmanProduce GraderProduce GraderProfessional - MiscProfessional - MiscProfessorProfessorProfessor - AgricultureProfessor - AgricultureProfessor - BiologyProfessor - BiologyProfessor - ChemistryProfessor - ChemistryProfessor - EconomicsProfessor - EconomicsProfessor - EngineeringProfessor - EngineeringProfessor - GeologyProfessor - GeologyProfessor - MathematicsProfessor - MathematicsProfessor - MedicalProfessor - MedicalProfessor - PhysicsProfessor - PhysicsProfessor - PsychologyProfessor - PsychologyProfessor - ScienceProfessor - ScienceProfessor - Social ScienceProfessor - Social ScienceProfessor - StatisticsProfessor - StatisticsPsychologistPsychologistPublic OfficialsPublic OfficialsPurchasing AgentPurchasing AgentRadio OperatorRadio OperatorRailroad BrakemanRailroad BrakemanRailroad ConductorRailroad ConductorRailroad SwitchmanRailroad SwitchmanReal Estate AgentReal Estate AgentRecreation AttendantRecreation AttendantReligious WorkerReligious WorkerRetiredRetiredRoad Machinery OperatorRoad Machinery OperatorRollerRollerRooferRooferSailorSailorSalesmanSalesmanSawyerSawyerScientistScientistScientist - AgricultureScientist - AgricultureScientist - BiologyScientist - BiologyScientist - GeologyScientist - GeologyScientist - PhysicsScientist - PhysicsScientist - SocialScientist - SocialSecretarySecretarySecurity GuardSecurity GuardService AttendantService AttendantService WorkerService WorkerServicemanServicemanSheriff / BailiffSheriff / BailiffShip OfficersShip OfficersShipping and ReceivingShipping and ReceivingShoemakerShoemakerSocial WorkerSocial WorkerSports Instructor / OfficialSports Instructor / OfficialStationary EngineerStationary EngineerStatistician / ActuaryStatistician / ActuaryStock BrokerStock BrokerStone CutterStone CutterStreet Car ConductorStreet Car ConductorSurveyorSurveyorTailorTailorTaxi Cab Driver / ChauffeurTaxi Cab Driver / ChauffeurTeacherTeacherTeamsterTeamsterTechnicianTechnicianTechnician - Medical / DentalTechnician - Medical / DentalTechnician - TestingTechnician - TestingTelegraph MessengerTelegraph MessengerTelegraph OperatorTelegraph OperatorTelephone OperatorTelephone OperatorTempererTempererTextile SpinnerTextile SpinnerTherapistTherapistTicket AgentTicket AgentTool MakerTool MakerTruck / Tractor DriverTruck / Tractor DriverTypesetterTypesetterUnion OfficialUnion OfficialUpholstererUpholstererUsherUsherVeterinarianVeterinarianWaiter / WaitressWaiter / WaitressWeaverWeaverWelderWelder