sathishkottravel

@sathishkottravel·11 public vizzes

World Population Line Chart and Area Fill

This visualization displays world population trends from 2015 using a line chart with an area fill, plotted over time. The chart renders an SVG with D3 v5, using d3.scaleTime and d3.scaleLinear for axes, and d3.line and d3.area with curveBasis for the path generation. Data is loaded from a CSV via d3.csv, showing population values for major countries. The chart includes labeled axes, gridlines, and a title, with the area fill styled in pink and the line in red.

Apr 30, 2020

Loading thumbnail…

Temperature in SanFransciso using Line Chart and Area Fill

This visualization displays one week of temperature data for San Francisco using a red line and filled pink area chart. The chart plots temperature in degrees Celsius against time, sourced from the Data Canvas - Sense Your City project. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for the axes, with `axisBottom` and `axisLeft` generating gridlines. The line and area paths are created using `line` and `area` generators with `curveBasis` for smoothing, and the SVG output includes styled tick marks and axis labels.

Apr 30, 2020

Loading thumbnail…

Temperature in SanFransciso using Scatter Plot

This scatter plot visualizes one week of temperature data for San Francisco, with time on the x-axis and degrees Celsius on the y-axis. Each circle represents a temperature reading, and the chart includes labeled axes and gridlines for readability. The code uses D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG. Data comes from the Data Canvas - Sense Your City dataset, loaded as CSV and parsed into JavaScript Date objects and numeric temperatures before plotting.

Apr 28, 2020

Loading thumbnail…

D3 Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. Semi-transparent steelblue circles represent individual car models, with axis labels and a title clarifying the chart’s purpose. Data is loaded as CSV and parsed before rendering, with margins and inner dimensions calculated to position the plot within the SVG canvas.

Apr 25, 2020

Loading thumbnail…

D3 Scatter Plot Basic

This example shows the world’s ten most populous countries as circles in a horizontally-oriented scatter plot, with each circle’s x-position mapped to population via `d3.scaleLinear` and its y-position to country name via `d3.scaleBand`. The SVG chart uses `d3.csv` to load population data, then applies a transition that animates the circles sliding rightward from the left edge. Axis labels and a title are added using `d3.axisBottom`, `d3.axisLeft`, and manual text elements, with tick formatting through `d3.format` to abbreviate large numbers. The chart is built in React with D3 v5.

Apr 25, 2020

Loading thumbnail…

D3 Bar Chart - Axes

This bar chart displays the populations of the world’s ten most populous countries, from China down to Mexico, with horizontal bars sized by population. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data values to positions, and `axisLeft` and `axisBottom` for the country and population axes. It loads data from a CSV file, converts population figures, and animates bar growth via `transition`. The chart is rendered as SVG within a React project, with styling controlled by an external stylesheet.

Apr 25, 2020

Loading thumbnail…

D3 Bar Chart

This visualization displays world population by country using a horizontal bar chart rendered with SVG. The chart uses a linear scale for population values and a band scale for country names, with axes generated by `d3.axisLeft` and `d3.axisTop`. Data is loaded from a CSV file and parsed with `d3.csv`, then bars animate their widths via `transition`. The code applies a steelblue fill to all rectangles and uses `d3.scaleLinear` and `d3.scaleBand` for scaling.

Apr 25, 2020

Loading thumbnail…

HTML SVG SHAPES

This example demonstrates basic SVG shape creation and animation within a React scaffold. It draws a yellow face with circles for eyes, rectangles for eyebrows, and an arc for a mouth on a grey background, using D3 v5 selection and shape generators like `arc`. The eyebrows move up and down via chained `transition` calls with a duration of 800 milliseconds each, while hand-coded SVG elements for circles and rectangles appear in the HTML alongside programmatically appended ones.

Apr 25, 2020

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example builds a yellow smiley face with eyes, eyebrows, and an arc-based mouth, then animates the eyebrows upward and back down using chained `transition` calls on SVG `rect` elements. The face is centered via a `g` transform, with `d3.arc` generating the mouth path. The code selects an SVG, appends shapes with explicit pixel offsets, and relies on D3 v5’s `select`, `attr`, and `transition` APIs to demonstrate fundamental DOM manipulation and animation.

Apr 25, 2020

Loading thumbnail…

HTML D3.JS SVG

This example demonstrates a simple car sales report rendered as an HTML page, showing a list of vehicle listings with one item highlighted in red. The page uses plain static text content structured with HTML elements like headings and unordered lists, styled by an external CSS file that sets a monospace font and defines the `.highlighted` class for emphasis. The implementation relies on core web technologies—HTML for markup and CSS for presentation—without JavaScript or data processing libraries. The styling is minimal, focusing on typography and color to draw attention to a specific listing.

Apr 25, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of car listings, showing car details filtered by a maximum price. It uses JavaScript modules and native promises, with a JSON array of five car objects as the data source. The code loads the data asynchronously via `getCars`, then uses `generateReport` to filter by price and format each car into a string before displaying it in the page’s `pre` element. The visualization relies on plain DOM manipulation rather than any charting library.

Apr 25, 2020