Skip to content
/ next-d3 Public

A collection of data visualizations created using react and D3 libraries of JS

0 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

sanghvian/next-d3

BranchesTags

Repository files navigation

Fetching from csv file

Using the d3.csv(), d3.csvParse() and d3.csvFormat() functions to get data from a CSV file in the form of array of objects where :

  1. Array elem = x axis = row = item
  2. Object prop = y axis = column = attribute
export const fetchData = async() => {
    const csvUrl = "https://gist.githubusercontent.com/crew-guy/e1ae0b5db6ace5eda68bc8fb9e903576/raw/UN%2520World%2520Population%2520Dataset%2520-%2520Sheet1.csv"

    **// Using d3.csvParse()**
    // const unparsedData = await fetch(csvUrl)
    // const text = await unparsedData.text()
    // const data = d3.csvParse(text)
    // console.log(data)

    **// Using d3.csv()**
    // This function is simply passed to d3.csv() as a **callback specifying what parts of each received result (usually JS objects) do we wanna edit, extract**
		const row = (d) => {
        d.Population = +d['2020']
        return d
    }
    const fullData = await d3.csv(csvUrl, row)
    const data = fullData.slice(0,10)
    // const data = await d3.csv(csvUrl)
    const text = d3.csvFormat(data)
    // console.log(dataDirect)
    // console.log(data)
    return data;
}

Margins and Axes

Basically, we use from d3, the :

scaleLinear = ticks = X

scaleBand = domain = Y

Here, xScale, yScale and innerHeight are defined as

Logic for margin = cut off margins from a stipulated width and then transform translate the box inside the main component

	const [height, setHeight] = useState(0)
	const [width, setWidth] = useState(0)
	
	  useEffect(()=>{
	    setHeight(window.innerHeight-100)
	    setWidth(window.innerWidth-100)
	  },[])
	
	  const margin = {top:40, left:300, right:40, bottom:100}
	  const innerWidth = width - margin.left - margin.right
	  const innerHeight = height - margin.top - margin.bottom
	
	  const xVal = d => d.Population
	  const yVal = d => d.Country
	
		// Mapped over dataset instead of providing number range as y-values are country names which have a categorical and not a discretely ordered form
	  const yScale = scaleBand()
	      .domain(data.map(yVal))
	      .range([0,innerHeight])
	      .padding(0.2)
	
		// max function of d3 will take into account each mapping of the data and passed it to the xVal function
	  const xScale = scaleLinear()
	      .domain([0, max(data,xVal)])
	      .range([0, innerWidth])
	  
	  
	  const xAxisLabelOffset = 80
	  const siFormat = format(".2s");
	  const tickFormat = tickFormat => siFormat(tickFormat).replace('G','B')

Logic for axes ( SVG = line (x1, y1, x2, y2) + text (style, dy, y, x, dx, textAnchor in style) )

export const AxisTop = ({xScale, innerHeight, tickFormat}) => (
    xScale.ticks().map(tickValue=>(
						// Here, translate sets up the x1 and y1 values
            <g className="tick" transform={`translate(${xScale(tickValue)},0) `} >
                <line y2={innerHeight} />
                <text
                    key={tickValue}
                    style={{textAnchor:"middle"}}
                    dy='0.71em'
                    y={innerHeight}
                >{tickFormat(tickValue*1000)}</text>
            </g>
    ))
)
export const AxisBottom = ({yScale}) => (
    yScale.domain().map(tickValue=>(
        <g className="tick">
            <text
            key={tickValue}
            x={-3}
            style={{textAnchor: 'end'}}
            dy="0.32em"
            y={yScale(tickValue) + yScale.bandwidth()/2}
            >
            {tickValue}
            </text>
        </g>
    ))
)

Size of marks

A small optimization tweak on the dataviz to show the intensity of a mark by using its size as a metric

Snippet

Here, the size of the circle mark is set on the fact that how populous a place is.

This is the inside the ConfigContext.js file for this viz

// Using size to depict population
    config.maxRadius = 20
    config.sizeValue = d => d.population
    config.sizeScale = scaleSqrt()
        .domain([0, max(data.cities, config.sizeValue)])
        .range([0, config.maxRadius])

Rendering chart

Snippet

Integrating 3 things :

  1. fetched data
  2. marks
  3. axes
import {useState, useEffect} from 'react'
import {scaleLinear, scaleBand, max, format} from 'd3'
import {AxisTop} from '@components/AxisTop'
import {AxisBottom} from '@components/AxisBottom'
import {Marks} from '@components/Marks'
import {fetchData} from '@helpers/fetchData'

export default function Home({data}) {
  const [height, setHeight] = useState(0)
  const [width, setWidth] = useState(0)

  useEffect(()=>{
    setHeight(window.innerHeight-100)
    setWidth(window.innerWidth-100)
  },[])

  const margin = {top:40, left:300, right:40, bottom:100}
  const innerWidth = width - margin.left - margin.right
  const innerHeight = height - margin.top - margin.bottom

  const xVal = d => d.Population
  const yVal = d => d.Country

  const yScale = scaleBand()
      .domain(data.map(yVal))
      .range([0,innerHeight])
      .padding(0.2)

  const xScale = scaleLinear()
      .domain([0, max(data,xVal)])
      .range([0, innerWidth])
  
  
  const xAxisLabelOffset = 80
  const siFormat = format(".2s");
  const tickFormat = tickFormat => siFormat(tickFormat).replace('G','B')
  

	// Rendering chart
  return (
        <svg width={width} height={height}>
          <g transform={`translate(${margin.left},${margin.top})`} >
            <AxisTop xScale={xScale} innerHeight={innerHeight} tickFormat={tickFormat} />
            <AxisBottom yScale={yScale}/>
						<Marks data={data} xScale={xScale} yScale={yScale} xVal={xVal} yVal={yVal} />
            <text
              className="axis-label"
              x={innerWidth / 2}
              textAnchor='center'
              y={innerHeight + xAxisLabelOffset}
            >Population</text>
          </g>
        </svg>
)}

// Fetching data
export const getStaticProps = async () => {
  const data = await fetchData()
  console.log(data)
  return {
    props:{
      data
    }
  }
}

Configuration context

Snippet

  • This file simply contains all direct numerical configurations

    // MARGIN
export const MARGIN = {
    top: 60,
    left: 100,
    bottom: 150,
    right: 300,
}

// LABELS
export const X_AXIS_LABEL_OFFSET = 120
export const Y_AXIS_LABEL_OFFSET = 40

// MARKS
export const RADIUS_CIRCLE = 12

// TICKS
export const X_AXIS_TICK_OFFSET = 8
export const Y_AXIS_TICK_OFFSET = 8

// LEGEND
export const COLOR_ARRAY = ['#E6842A', '#137B80', '#8E6C8A']
export const TICK_SPACING = 32
export const TICK_TEXT_OFFSET = 20

export const LEGEND_X_OFFSET = 130
export const LEGEND_Y_OFFSET = 250

// INTERACTIVITY
export const FADE_OPACITY = 0.2

  • This file is the Context for the entire plot and exposes a hook to use the context as well

    import React, { useState, useEffect, useContext } from 'react'
// import fetchData from '@helpers/fetchData'
import {scaleLinear, max, extent, scaleOrdinal} from 'd3'
import {useData} from '@hooks/useData'
import { attributes } from '@helpers/attributes'
import
    {
        MARGIN,
        X_AXIS_LABEL_OFFSET,
        Y_AXIS_LABEL_OFFSET,
        RADIUS_CIRCLE,
        X_AXIS_TICK_OFFSET,
        Y_AXIS_TICK_OFFSET,
        COLOR_ARRAY,
        TICK_TEXT_OFFSET,
        TICK_SPACING,
        LEGEND_X_OFFSET,
        LEGEND_Y_OFFSET,
        FADE_OPACITY
    } from '@helpers/configValues'

const ConfigContext = React.createContext()

export const useConfig = () => useContext(ConfigContext)

const ConfigProvider = ({ children }) =>
{
    const config = {}
    const [data, setData] = useState([])
    const [height, setHeight] = useState(0)
    const [width, setWidth] = useState(0)

    //* FOR HOVER INTERACTIVITY OF MARKS
    const [hoveredValue, setHoveredValue] = useState(null)
    config.hoveredValue = hoveredValue
    config.setHoveredValue = setHoveredValue

    useEffect( () =>
    {
        (async () => {
            const temp = await useData()
            setData(temp)
            setHeight(window.innerHeight)
            setWidth(window.innerWidth)
        })()
        // console.log(data)
    }, [])

    config.margin = MARGIN

    // console.log(data)
    config.data = data
    // console.log(config.data)

    //* ATTRIBUTES
    const currentX = attributes[0]
    const currentY = attributes[1]

    config.currentX = currentX
    config.currentY = currentY

    const [xAttribute, setXAttribute] = useState(currentX)
    const [yAttribute, setYAttribute] = useState(currentY)
    
    config.setXAttribute = setXAttribute
    config.setYAttribute = setYAttribute

    config.attributes = attributes

    config.xVal = d => d[xAttribute.value]
    config.yVal = d => d[yAttribute.value]
    config.colorVal = d => d.species

    //* FOR DATA INTERACTIVITY ON HOVER
    config.filteredData = data.filter(d => hoveredValue === config.colorVal(d))

    // console.log(config.xVal)

    //* HEIGHTS AND WIDTHS
    config.height = height
    config.width = width
    config.innerWidth = width - config.margin.left - config.margin.right
    config.innerHeight = height - config.margin.top - config.margin.bottom

    
    //* SCALES
    config.xScale = scaleLinear()
        // .domain(extent(data, config.xVal))
        .domain(extent(data,config.xVal))
        .range([0,config.innerWidth])
        .nice()

    config.yScale = scaleLinear()
        // .domain(extent(data, config.yVal))
        .domain([0,max(data,config.yVal)])
        .range([config.innerHeight, 0])
    
    config.colorScale = scaleOrdinal()
        .domain(data.map(config.colorVal))
        .range(COLOR_ARRAY)

    //* TICKS AND TOOLTIPS
    config.xAxisTickOffset = X_AXIS_TICK_OFFSET
    config.yAxisTickOffset = Y_AXIS_TICK_OFFSET
    config.tooltipFormat = d => d
    config.xAxisTickFormat = d => d
    config.yAxisTickFormat = d => d

    //* LABELS
    config.xAxisLabel = xAttribute.label
    config.yAxisLabel = yAttribute.label
    config.xAxisLabelOffset = X_AXIS_LABEL_OFFSET
    config.yAxisLabelOffset = Y_AXIS_LABEL_OFFSET

    //* MARKS
    config.radiusCircle = RADIUS_CIRCLE

    //* LEGEND
    config.legendXOffset = LEGEND_X_OFFSET
    config.legendYOffset = LEGEND_Y_OFFSET
    config.tickSpacing = TICK_SPACING
    config.tickTextOffset = TICK_TEXT_OFFSET

    //* INTERACTIVITY
    config.fadeOpacity = FADE_OPACITY
    
    return (
        <ConfigContext.Provider value={config} >
            {children}
        </ConfigContext.Provider>
    )
}

export default ConfigProvider

Be sure to wrap the provider around the components in the root file

  • After all this, your App file becomes this simple

    import AxesLabels from '@components/AxesLabels'
import MarksAndAxes from '@components/MarksAndAxes'
import ControlPanel from '@components/ControlPanel'
import Legend from '@components/Legend'

const Home = () =>
{
  const config = useConfig()

  const {
    height,
    width,
  } = config

  return (
    <>
      <ControlPanel/>
    <svg
      height={height}
      width={width}
    >
      <Legend/>  
      <MarksAndAxes/>
      <AxesLabels/>        
    </svg>
  </>
  )
}

  • Say now we wish to deal with ControlPanel to change X and Y coordinates

    import React from 'react'
//? REACT DROPDOWN
import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css';
import {useConfig} from '@contexts/ConfigContext'

//? USING CUSTOM BUILD DROPDOWN
// import {Dropdown} from '@components/Dropdown'

const ControlPanel = () =>
{
    const config = useConfig()
    const {
        attributes,
        setXAttribute,
        setYAttribute,
        currentX,
        currentY
    } = config
    const defaultOptionX = currentX;
    const defaultOptionY = currentY;
    return (
        <div className="c-panel"  >
        {/*<Dropdown 
          attributes={attributes} 
          setAttribute={setXAttribute}
        />
        <Dropdown 
          attributes={attributes} 
          setAttribute={setYAttribute}
        />*/}
        <Dropdown
          options={attributes}
          onChange={(attribute)=> setXAttribute(attribute) }
          value={defaultOptionX}
          placeholder="Select X"
        />
        <Dropdown
          options={attributes}
          onChange={(attribute)=> setYAttribute(attribute) }
          value={defaultOptionY}
          placeholder="Select Y"
        />
        {/* <ColorLegend data={data} colorScale={colorScale} colorVal={colorVal} />*/}
      </div>
    )
}

export default ControlPanel

Binned aggregation

Snippet

Basically, here, I have aggregated the total number of dead people by month and set the yScale to have the total deaths sum as the marks

New d3 functions used here are bin(earlier known as histogram)

import {bin, scaleLinear, max, timeMonths, sum} from 'd3'

const [start, stop] = xScale.domain()

// Binned data simpy takes all the cases of people dying between start and end date and groups each such case as an object, into a collective array which contains => x no. of case objects, start date, end data  
// So basically, if say we have 48 months, binned data is an array of 48 arrays where each of the 48 arrays has 3 things :
// 1. Start date (eg : Jan 1st)
// 2. End data (eg : Feb 1st, cause we are binning by month)
// 3. Individual case objects 

// **binnedData = [**
//		**[**
//       **x0 = .....** -> start date of bin
//       **x1 = .....** -> end date (i.e. start date + 1 month) of bin
//       **{**
//          **totalDead = .....**
//          **{...someOtherCaseRelatedInfo(eg : geo-coordinates)}**
//       **}**  -> a case object
//       **{},{}** -> more case objects
//    **]** -> a month array
// **]**

const binnedData = bin()
    .value(xVal)
    .domain(xScale.domain())
    .thresholds(timeMonths(start, stop))
		(data)

// Summed binned data just looks into the binned data array's case objects, extracts the number of deaths that occured on each timestamp and sums it up as a single number to use as our y coordinate
// Also, we rawly extract the start (x0) and end (x1) from each of the month array
// Eg, we have 48 months' binnedData
// summedBinnedData will be an array of 48 object where each object will have 3 things :
// 1. Start date (eg : Jan 1st)
// 2. End date (eg : Feb 1st, cause in binnedData, we were binning by month)
// 3. y = just a sum obtained by extracting the number of deaths from each case object and summing this metric across all case objects in a month array

// **summedBinnedData = [
//    {  
//       x0 = ...** -> start date of bin (eg : Jan 1st)
**//       x1 = ....** -> end date of bin (eg : Feb 1st (start date + 1 month ))
**//		   y = ....** -> sum of deaths in a month (eg : between Jan 1st and Feb 1st)
//    **}
// ]**

const summedBinnedData = binnedData

    .map(array => ({
      y: sum(array, yVal),
      x0: array.x0,
      x1:array.x1
    }))

// Gotta redefine yScale based on sums calculated in binnedData
const yScale = scaleLinear()
  .domain([0, max(summedBinnedData, d => d.y)])
  .range([innerHeight,0])

Rendering the bins using SVG rectangle

Just gotta set height and width based on updated yscale

export default function Marks({
    binnedData,
    xScale,
    yScale,
    tooltipFormat,
    innerHeight
})
{
    return (
        <g className="marks" >
            {binnedData.map((dataPoint,i) => (
                <g key={i} className="mark">
                    <rect
                        x={xScale(dataPoint.x0)}
                        y={yScale(dataPoint.y)}
                        width={xScale(dataPoint.x1) - xScale(dataPoint.x0)}
                        height={innerHeight-yScale(dataPoint.y)}
                    />
                    <title>{tooltipFormat(dataPoint.y)} </title>
                </g>
                )  )}
        </g>

      )
    }

Geospatial maps

Snippet #1

d3 ⇒ feature and mesh functions are used

  1. feature ⇒ function used to convert part topoJSON (less file size) data we obtained into corresponding geoJSON (for SVG rendering, large file size)
  2. mesh ⇒ to generate latitude - longitude mesh

Fetching data in topoJSON format and then converting it into geoJSON for SVGs to render

import * as d3 from 'd3'
import {feature, mesh} from 'topojson'

export const fetchData = async () =>
{
    const jsonUrl = "https://unpkg.com/[email protected]/countries-50m.json"

    const topojsonData = await d3.json(jsonUrl)
    const { countries } = topojsonData.objects
    

    return ({
        countries : feature(topojsonData, countries),
        interiors : mesh(topojsonData, countries, (a,xb)=> a!==b)
    })
}

Snippet #3

d3 modules for generating graticule, projection and background sphere were used

  1. geoEqualEarth, geoNaturalEarth1 ⇒ Both are simply views of the global map based off of which a projection is made
  2. geoPath ⇒ Used to draw that background sphere on which projection is applied
  3. geoGraticule ⇒ Simply to generate latitude-longitude grid
import {geoEqualEarth, geoNaturalEarth1, geoPath, geoGraticule } from 'd3'

// const projection = geoEqualEarth()
const projection = geoNaturalEarth1()
const path = geoPath(projection)
const graticule = geoGraticule() 

export default function Marks({countries, interiors})
{
    // console.log(countries)
    return (
        <g className="marks" >
            <path className="sphere" d={path({type:'Sphere'})}/>
            <path className="graticules" d={path(graticule())} />
            {countries.features.map(feature => (
                <path className="feature" d = {path(feature)}/>
            ))}
            {/*<path className="interior" d={path(interiors)}/>*/}
        </g>

      )
    }

Snippet #3

Just a view of the main app root file

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import {fetchData} from '@helpers/fetchData'
import { useState, useEffect } from 'react'

// Importing the components 
import Marks from '@components/Marks'

export default function Home({countries, interiors}) {
  const [height, setHeight] = useState(0)
  const [width, setWidth] = useState(0)
  
  useEffect(() =>
  {
    setHeight(window.innerHeight)
    setWidth(window.innerWidth)
  }, [])
  
  const margin = {
    top: 60,
    left: 140,
    right: 80,
    bottom:100
  }

  // console.log(countries)

  return (
      <svg height={height} width={width} >
        <Marks
        countries={countries} interiors={interiors}
        />
    </svg>
  )
}

export const getStaticProps = async () =>
{
  const { countries, interiors } = await fetchData()
  console.log(countries, interiors)
  return {
    props:{countries, interiors}
  }
}

Color legend

Snippet

Creating a color legend. For stuff you don't understand is getting imported, just read the "Configuration Context" part once again

import React from 'react'
import {useConfig} from '@contexts/ConfigContext'

export const ColorLegend = () =>
{
    const config = useConfig()
    const {
        data,
        colorVal,
        colorScale,
        tickSpacing,
        tickTextOffset,
        radiusCircle,
        setHoveredValue,
        hoveredValue,
        fadeOpacity
    } = config

    //? My approach
    // const allSpecies = (data.map(colorVal))
    // const uniqueSpecies = allSpecies.filter((v, i, a) => a.indexOf(v) === i); 
    // const allColors = data.map(d => colorScale(colorVal(d)))
    // const uniqueColors = allColors.filter((v, i, a) => a.indexOf(v) === i)

    // //! Alternatively, could have used the domain on the color scale for unique values
    // // const uniqueSpecies = colorScale.domain()
    // // const uniqueColors = uniqueSpecies.map(domainValue = colorScale(domainValue) )  

    // return (
    //     <>
    //         <h3>Legend => </h3>
    //         <ul className="legend" >
    //             {uniqueSpecies.map((species, i) => (
    //                 <li className="legend-item">
    //                     <div className="color-legend-div" style={{ background:`${uniqueColors[i]}` }} />
    //                     <span className="legend-text">{species}</span>
    //                 </li>
    //             ))}
    //         </ul>
    //     </>
    // )

    //? Teacher's approach
    return colorScale.domain().map((domainValue,i) => (
        <g
            className="legend-item-alternate interactivity"
            key={i}
            transform={`translate(0,${i * tickSpacing})`}
            opacity={hoveredValue && domainValue !== hoveredValue ? fadeOpacity : 1}
        >
            <circle
                fill={colorScale(domainValue)}
                r={radiusCircle}
                onMouseEnter={() =>setHoveredValue(domainValue)}
                onMouseOut={()=>setHoveredValue(null)}
            />
            <text style={{cursor:"default"}} transform={`translate(${tickTextOffset},5)`} >
                {domainValue}
            </text>
        </g>
    ))

}

Controlling X and Y attributes in a 2D-Scatter plot

Snippet

Simply access the setXAttribute or setYAttribute from "Configuration Context" and you have 2 options now :

  • Build a custom Dropdown component to refilter the data being fetched

    import React from 'react'

export const Dropdown = ({attributes, setAttribute}) => {
    return (
        <>
            <label htmlFor='x-select'/>
            <select id="x-select" onChange={(e) =>
                {setAttribute(
                        attributes.find(attribute =>
                        (
                            attribute.value === e.target.value
                        ))
                    )
                }}
            >
                {attributes.map(({ label, value }) => (
                    <option value={value}>{label}</option>
                ))}
            </select>
        </>
    )
}

  • Use 'react-dropdown' library to refilter the data being fetched

    import React from 'react'
//? REACT DROPDOWN
import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css';
import {useConfig} from '@contexts/ConfigContext'

//? USING CUSTOM BUILD DROPDOWN
// import {Dropdown} from '@components/Dropdown'

const ControlPanel = () =>
{
    const config = useConfig()
    const {
        attributes,
        setXAttribute,
        setYAttribute,
        currentX,
        currentY
    } = config
    const defaultOptionX = currentX;
    const defaultOptionY = currentY;
    return (
        <div className="c-panel"  >
        {/*<Dropdown 
          attributes={attributes} 
          setAttribute={setXAttribute}
        />
        <Dropdown 
          attributes={attributes} 
          setAttribute={setYAttribute}
        />*/}
        <Dropdown
          options={attributes}
          onChange={(attribute)=> setXAttribute(attribute) }
          value={defaultOptionX}
          placeholder="Select X"
        />
        <Dropdown
          options={attributes}
          onChange={(attribute)=> setYAttribute(attribute) }
          value={defaultOptionY}
          placeholder="Select Y"
        />
        {/* <ColorLegend data={data} colorScale={colorScale} colorVal={colorVal} />*/}
      </div>
    )
}

export default ControlPanel

Simple arc

Snippet

Arc can be created in 2 ways :

  1. Specifying the d property on a path inside an SVG element
  2. Use d3.arc( ) to handle the start/end angle of the arc

d3.arc( ) ⇒ innerRadius, outerRadius, startAngle, endAngle

This will be used in the d property of the path

export default function Home ({data,text})
{
  console.log(`${text.length / 1024} kB`)
  console.log(`${data.length} rows`)
  
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  useEffect(() => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  });
  
  const pieArc = d3.arc()
	  .innerRadius(0)
	  .outerRadius(width)
	  
  const colorPie = d3.pie().value(1)

  return (
    <div className={styles.container}>
      <svg width={width} height={height}>
        <g transform={`translate(${width/2}, ${height/2})`} >
          
          // Using d3.pie()
          {colorPie(data).map(d => (
            <path
              fill={d.data['Hex']}
              d={pieArc(d)}
            />

          ))}  
        
          
          // Standard approach
          {/*props.data.map((d, i) => (
            <path
              fill={d['Hex']}
              d={pieArc({
              startAngle: (i/data.length)*2*Math.PI,
              endAngle: ((i+1)/data.length)*2*Math.PI
            })}/>
          ))*/}

          
        </g>  
      </svg>
    </div>
  )
}

export const getStaticProps = async() =>
{
  const csvUrl = "https://gist.githubusercontent.com/crew-guy/7cbac5e5cf2dbac4ab6a4c5e43e6f70d/raw/data.csv"
  
  //? M1 => Using d3.csvParse() function
  // const unParsedata = await fetch(csvUrl)
  // const text = await unParsedata.text()
  // const data = d3.csvParse(text)

  //? M2 => Using d3.csv()
  const data = await d3.csv(csvUrl)
  const text =  d3.csvFormat(data)

  return {
    props: {data, text}
  }
}

About

A collection of data visualizations created using react and D3 libraries of JS

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages