Shweta-tech

A D3 Map, points plotted with canvas instead of SVG

This example shows a zoomable map of Manhattan with tree locations from a CSV file, plotted as red circles. It uses D3 v3 for map tile fetching and projection, while rendering the points onto a Canvas 2D context instead of SVG for performance. The code demonstrates a hybrid approach where D3's `d3.geo.tile` and `d3.geo.mercator` handle geographic transforms, and the canvas context draws arcs at projected coordinates. Zooming and panning trigger redraws, and the mouse position is displayed with latitude/longitude.

Jun 5, 2021

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data (in degrees Celsius) for cities worldwide, sourced from Data Canvas - Sense Your City. It uses d3.nest to group readings by city, then draws smoothed multi-line paths with d3.line and curveBasis, colored via a d3.scaleOrdinal with schemeCategory10. The visualization includes axes with gridlines, a color legend built from a custom colorLegend function, and axis labels. Rendering is SVG-based, with d3.axisBottom and d3.axisLeft for ticks, and d3.scaleTime and d3.scaleLinear for spatial mapping.

May 5, 2021

Fork of xMR char calc v3 -- changing initial condition for mr avg

This fork of the xMR char calculator v3 alters the initial condition for the moving range average, demonstrating how control chart bounds shift under different starting assumptions. It computes upper and lower bounds using a moving range formula, segmenting data into 12-point windows and detecting breakpoints where values exceed sigma thresholds. The visualization relies on D3 v6’s `select`, `csv`, `mean`, and `sum` APIs, with the dataset embedded as an array in the code. A line chart would typically display the bounds, though the current script only logs the calculated arrays to the console.

May 5, 2021

Untitled

This example visualizes municipal waste segregation data for three lanes in Mumbai, overlaying lane polygons on a map with a dark fill and white borders. The map uses `d3.geoMercator` projection and `d3.geoPath` to render GeoJSON features from `dummy_lane_polygon_swk.json`. A related CSV file `dummytracksheet.csv` provides daily tracking metrics such as houses reached and dry/wet waste amounts, though the visible code loads the data without drawing the linkage lines. The visualization is built with D3 v4 and React, rendering to an SVG element.

Nov 24, 2020

Leaflet + D3 Map

This map combines Leaflet’s interactive tile layer with D3’s geographic projections to display hand-drawn lane polygons from the Worli neighborhood in Mumbai. It uses `L.map`, `L.svg`, and `L.tileLayer` to set up the map, then `d3.geoTransform` and `d3.geoPath` to project GeoJSON features from `polygon.js` onto the overlay pane. Area paths change fill color on `mouseover` and `mouseout`, and the `map.on('zoomend')` event calls `pathCreator` to redraw all paths with updated coordinates. The example demonstrates direct integration of D3-generated SVG geometries within a Leaflet canvas.

Nov 24, 2020

Untitled

This interactive map visualizes the locations of healthcare facilities across Mumbai, Maharashtra, plotted as points on a geographic basemap. The visualization uses React to render the interface, with the underlying map and point placement powered by D3.js’s `d3.geoPath` and map projection utilities. The facility addresses are geocoded from a CSV file using the Google Geocoding API, with latitude and longitude coordinates stored in the dataset. A filtering control likely allows users to explore facility types or regions, though the primary view shows the spatial distribution of hospitals and clinics across the city.

Apr 22, 2020

Map making

This interactive SVG map displays administrative blocks in the Palghar district, with each region rendered as a red path using D3’s `geoMercator` projection and `geoPath` generator. The map supports zoom and pan through D3’s `zoom` event, transforming the group element. Block boundaries come from `block.geojson`, while the accompanying `data.csv` provides block names and two numeric columns, though the visualization currently styles all shapes uniformly rather than encoding these values.

Feb 20, 2020

Map

This visualization displays a geographic map of India and surrounding regions using a Mercator projection, centered on coordinates [77, 19]. The map renders GeoJSON features as SVG paths, with continents outlined in gray and specific school-type locations highlighted in blue. Built with D3 v5, the code uses `d3.geoMercator()` for projection and `d3.geoPath()` for path generation. The visualization loads data from a local GeoJSON file and renders at a fixed viewBox size of 1400 by 700 pixels.

feat1_dropdown_dependent_barchart

A dropdown selector toggles a bar chart between displaying Weight% and Height% data from the local data.csv file. The visualization uses D3.js (including d3.scaleLinear, d3.scaleBand, and d3.interpolateRdYlGn for color mapping) within a React framework, rendering SVG bars with transitions and a tooltip. The chart includes axes, value labels, and an animated bar height update when the selection changes.

Map

This example displays a world map rendered with SVG paths, using a Mercator projection. It loads geographic data from a GeoJSON file and draws each country as a path element. The code uses D3 v5’s `d3.json`, `d3.geoMercator`, and `d3.geoPath` to project and trace the map, within a fixed 1400×700 viewBox. No interactions or styling are applied beyond the static continent paths, making it a minimal, barebones geographic visualization.

Map

This visualization displays a map of Maharashtra, India, using geographic data from a local GeoJSON file (`taluka_maha.geojson`). The map renders administrative boundaries as SVG paths, which are drawn using D3’s `d3.geoPath()` with a `d3.geoMercator()` projection. Although a `schooltype.json` file containing school points is present in the project, the code only loads and draws the map boundaries, not the school locations. The visualization is built within a React framework, though the current implementation uses plain D3 v5 to append an SVG element to a container div, with a fixed viewBox of 1400×700 pixels.

iris dataset

This scatterplot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each data point colored by flower variety. The code uses d3.csv to load the data, d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks and gridlines, and d3.scaleOrdinal to map varieties to a color palette. The SVG rendering includes axis labels, a title, and circles positioned using d3-selection.

Feb 5, 2020

Bar Chart

This example shows a horizontal bar chart comparing the populations of ten countries, using a linear scale for population values and a band scale for country names. The bars are rendered as SVG rectangles, with axes generated using d3.axisLeft and d3.axisBottom. The code loads data from a CSV file via d3.csv, converts population values from thousands to absolute numbers, and applies a margin-based layout. The chart is built with React, though the visualization itself uses D3 v5 directly to manipulate the SVG.

Feb 4, 2020

Color Range slider

This example demonstrates an interactive color range slider that dynamically adjusts the displayed hue. Users manipulate the slider to select a specific color value, which updates the visualization in real time. The implementation uses React for component state and rendering, while D3.js (d3.v5) manages the slider’s input handling and color scale transitions. The project references the React Starter template and uses a minimal HTML page with embedded D3 and custom CSS for styling. The color transitions are driven via D3’s interpolation methods, though the exact rendering target is not specified beyond the slider interaction.

Jan 17, 2020

HTML Starter

This example displays the text "Hello HTML 123" centered on a plain web page with a font size of 13em. It demonstrates the minimal structure of an HTML document, including a `<style>` block that applies CSS to control the layout and typography. The page uses no JavaScript libraries or frameworks, relying solely on the browser’s rendering of HTML and CSS, making it a bare-bones starting point for web-based projects.

Jan 17, 2020

iris dataset

This example visualizes the Iris dataset as a scatter plot, showing sepal length on the x-axis and sepal width on the y-axis for individual flowers. The code uses D3 v5 with React, rendering SVG circles colored in red, with axis labels and a title. It employs `d3.csv` to load the data, `scaleLinear` for scaling, and `axisBottom` and `axisLeft` with tick lines to construct the chart, while the data comes from the `data.csv` file.

Jan 14, 2020

Bowl of fruit

Five circles, each representing an apple, are arranged horizontally across an SVG canvas. The visualization uses D3 v5 to select the SVG element, generate a data array of five fruit objects, and bind that data to circle elements. Each circle is positioned at a fixed y-coordinate, given a radius of 50 pixels, and spaced 100 pixels apart along the x-axis using the `select` and `range` functions from D3.

Jan 13, 2020

Bowl of fruit

The visualization shows a horizontal row of five circles meant to represent apples, evenly spaced across an SVG canvas. It uses the d3 v5 library, specifically the `select` and `range` functions, to create a data array of fruit objects and append a circle element for each one. The circles' x-coordinates are calculated by their index, all positioned at the vertical center, with a set radius. The rendering is done via SVG, with the chart's dimensions sourced from the SVG attributes. The code, though incomplete, demonstrates the basic d3 workflow of selecting, binding data, and appending graphical marks.

Jan 13, 2020

Scatter plot with customize axes

This scatter plot visualizes the top 10 most populous countries, with population on the x-axis and country names on the y-axis. The chart uses D3 v5’s `scaleLinear` and `scalePoint` to map the data, and customizes both axes with `axisLeft` and `axisBottom`, including formatted tick labels via `format('.3s')` and grid lines. Data comes from a CSV file and is rendered as SVG circles in React.

Jan 13, 2020

Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The data is loaded from a CSV file and rendered as colored rectangles on an SVG canvas. The chart uses D3 v5’s `scaleLinear` for the y-axis and `scaleBand` for the x-axis, with custom axes via `axisLeft` and `axisBottom`. Country labels appear along the horizontal axis, and the vertical axis shows population values in thousands.

Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis to create horizontal bars. The chart demonstrates custom axis customization through `axisLeft` and `axisBottom`. Population data is loaded from a CSV file and multiplied by 1000 to present the final values.

Customizing Axes

This example shows a horizontal bar chart ranking the ten most populous countries, with population values scaled to thousands and formatted with abbreviations like "B" for billions. It uses D3 v5 within a React wrapper, reading data from a CSV file and rendering SVG elements. The chart customizes axes using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with tick formatting via `d3.format` and grid lines created by negative tick sizes.

Intro to D3.js

This example shows a bar chart built with D3.js, displaying numeric values as vertical bars with corresponding value labels above each bar. It reads from an embedded dataset of eight numbers and renders them using SVG rectangles via `d3.select`, `selectAll`, and `data().enter().append()`. The chart sets fixed width and height attributes, calculates bar widths based on dataset length, and positions bars with a `translate` transform. Text elements display each value in a distinct color. The code uses the `d3.v5` library and is structured with React-ready starter files.

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes using React, rendering polygons, lines, and paths within a 1000x600 viewport. It shows CSS classes applied to SVG elements, such as the `.lines` class controlling stroke properties. The code uses raw SVG elements like `<polygon>` and `<path>`, with inline attributes for fill and stroke, alongside a `<g>` transform group. CSS rules in `style.css` style the path elements, including stroke color and line joins, showcasing SVG-CSS integration.

let's make a face with D3.js

This example constructs a cartoon face using D3.js v5 in a React environment, rendered as an SVG. It shows a yellow circle head with elliptical eyes, circular pupils, rectangular eyebrows, and an arc-based mouth, all positioned with absolute coordinates. The code uses D3 selections, `arc` for the mouth shape, and a `transition` to animate the right eyebrow moving downward. A static nose line completes the face, demonstrating basic SVG shape manipulation and animation without external data.

let's make a face with D3.js

This example builds a cartoon face using D3.js v5 and React, rendered as SVG shapes. It constructs a yellow circle for the head, white ellipses for the eyes, black circles for the pupils, and a path-based mouth generated with the `d3.arc()` API. The face is centered on a 1000x500 SVG canvas, with eye positions and mouth dimensions hard-coded rather than derived from data. The code uses D3 selections to append and style each shape, demonstrating basic geometric composition without any interactive or data-driven behavior.

let's make a face with D3.js

This example shows how to construct a simple cartoon face using basic D3.js shapes in an SVG canvas. A yellow circle forms the head, two white ellipses with black inner circles create the eyes, and a black path draws the mouth. The code uses D3 v5 with React, selecting the SVG element and appending shapes with attributes for position, size, and fill. The mouth is generated using the `d3.arc()` function with defined inner and outer radii and angles, while other shapes rely on direct attribute assignment rather than data binding.

Shapes with SVG and CSS

This example demonstrates how to create geometric shapes using SVG and style them with CSS in a React environment. It renders polygons with various fill colors, stroke colors, and stroke widths, including a star-shaped polygon and a translated group of shapes. The code uses SVG elements like polygon, line, and path, with CSS classes to apply stroke styles. A CSS class called “lines” applies black strokes and a path within it uses a custom stroke color and rounded line joins.

Shapes with SVG and CSS

This example demonstrates how to create geometric shapes using SVG polygons and lines, with styling applied through both inline attributes and an external CSS stylesheet. The page renders two sets of polygons—one in green and orange, the other in purple—along with a styled line and path, all within an SVG container. The code leverages React for structure, though the rendering relies on SVG elements and CSS selectors like `.lines` to control stroke properties. The polygons use explicit `points` coordinates, while the path uses SVG path commands, and CSS properties like `stroke-linejoin` enhance the visual presentation.

Shapes with SVG and CSS

This example shows how to create and style geometric shapes using raw SVG and CSS within a React application. It demonstrates drawing multiple polygons, a line, and a path, with attributes and styles applied both inline and via a separate stylesheet. The code utilizes SVG elements like `<polygon>`, `<line>`, and `<path>`, and uses a `<g>` transform to translate a group of shapes. The CSS file defines a `.lines` class, applying stroke properties and rounding the path's line joins.

Shapes with SVG and CSS

This example demonstrates how to draw and style basic geometric shapes using SVG elements directly in a React application. It shows two polygon shapes—a triangle and a five-pointed star—rendered with inline SVG attributes, alongside a duplicated version of both shapes wrapped in a `<g>` group with a `transform` to translate them horizontally. The code uses SVG’s native `<polygon>`, `points`, `fill`, and `stroke` attributes, as well as CSS from an external stylesheet to reset page margins and hide overflow. No external visualization libraries are used; rendering relies solely on React’s JSX markup and SVG support.

Shapes with SVG and CSS

This example demonstrates how to create basic shapes using SVG and style them with CSS. The visualization renders a single circle inside an SVG container, and a linked stylesheet applies visual formatting to the shape. The code uses React with SVG elements, and the styling is handled through a separate CSS file. The example shows a minimal approach to combining SVG markup with CSS for shape customization in a web page.

HTML Starter

This example shows a minimal HTML page that renders the text “Hello HTML” in large, centered type using CSS. The code defines a basic HTML document structure with inline styling in the `<head>` section, setting the body’s text alignment and font size. It demonstrates the simplest possible static web page without any JavaScript or external libraries, relying entirely on native HTML and CSS for layout and presentation. The page serves as a starting point for more complex visualizations, using plain markup rather than data-driven rendering.